Created
July 8, 2020 05:41
-
-
Save Hikali-47041/454c1c2c94c68c98f8d16d40752d7134 to your computer and use it in GitHub Desktop.
ウェブサービス入門の講義でかいたCSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* きょうつうCSS */ | |
/* 色の定義 */ | |
:root { | |
--primary-color:#03a9f4; | |
--link-button-color:#00bcd4; | |
--def-light-color:#fefefefe; | |
--def-hn-text-color:#212121; | |
} | |
html, body, .grid-container { | |
height: 100%; | |
margin: 0; | |
scroll-behavior: smooth; | |
} | |
.grid-container * { | |
/* border: 1px solid #11acff; *//*境界線を表示*/ | |
position: relative; | |
} | |
.grid-container *::after { | |
/* content:attr(class); *//*コンテナ名を表示*/ | |
position: absolute; | |
top: 0; | |
left: 0; | |
} | |
.grid-container { | |
display: grid; | |
grid-template-columns: 0.1fr 3fr 0.1fr; | |
grid-template-rows: 0.8fr 0.2fr 1fr 0.2fr 0.8fr; | |
grid-template-areas: "header header header" "L-margin Top-margin R-margin" "L-margin main R-margin" "L-margin Bottom-margin R-margin" "footer footer footer"; | |
} | |
/*よはく*/ | |
.Top-margin { grid-area: Top-margin; } | |
.L-margin { grid-area: L-margin; } | |
.R-margin { grid-area: R-margin; } | |
.Bottom-margin { grid-area: Bottom-margin; } | |
.header { | |
grid-area: header; | |
background-color: #333333; | |
border-bottom: 3px solid #11acff; | |
} | |
.header a{ | |
color: var(--def-light-color); | |
text-decoration: none; | |
} | |
.title { | |
grid-area: title; | |
} | |
.sub-ttile { | |
grid-area: sub-ttile; | |
} | |
.main { | |
grid-area: main; | |
padding:1% 2%; | |
line-height: 1.5em; | |
} | |
.footer { | |
grid-area: footer; | |
background: var(--primary-color); | |
padding-top: 1.5%; | |
padding-bottom: 3%; | |
} | |
/* しゃしん */ | |
.pictures{ | |
margin: 0.4em 0 1% 1%; | |
padding: 0 1% 1% 5%; | |
border: 2px; | |
max-width: 100%; | |
height: auto; | |
border-color: #eeeeee; | |
float: right; | |
} | |
.image-grid{ | |
display: inline-block; | |
vertical-align: bottom; | |
word-wrap: break-word; | |
padding: 1% 0%; | |
width: 98%; | |
} | |
.pic-in-frame{ | |
margin-left: 2%; | |
padding-left: .5%; | |
} | |
/* コンテナマージンの色とか */ | |
.back-element{ | |
background-color: #f1f1f1; | |
height: 100%; | |
width: 100%; | |
/* user-select: none; */ | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
} | |
/* リンク系 */ | |
a:hover{ | |
color: var(--link-button-color); | |
transition: 0.4s; | |
border-bottom: 1.5px solid var(--link-button-color) ; | |
} | |
/* みだし */ | |
h1 { | |
padding-left: 5%; | |
letter-spacing: 0.1em; | |
font-weight: bold; | |
font-size: 48px; | |
} | |
h2 { | |
padding-left: 10%; | |
letter-spacing: 0.1em; | |
} | |
.main h2{ | |
padding: 0.75em; | |
padding-left: 3%; | |
letter-spacing: 0.05em; | |
color: var(--def-hn-text-color);/*文字色*/ | |
background: #e1e5e9;/*背景*/ | |
border-left: 5px solid var(--primary-color);/*左線*/ | |
} | |
h3{ | |
padding: 0.75em;/*上下右の余白*/ | |
padding-left: 2%; | |
color: var(--def-hn-text-color);/*文字色*/ | |
border: 1px #0288D1aa dashed; | |
border-bottom: 3px solid #0288d1; | |
margin-top: 1%; | |
margin-bottom: 1%; | |
} | |
h4{ | |
font-weight: bold; | |
font-size: large; | |
text-decoration: underline; | |
text-indent: 2%; | |
} | |
p { | |
margin: 2%; | |
font-size: medium; | |
} | |
.frame{ | |
padding: 2%; | |
margin: 2%; | |
color: var(--def-hn-text-color); | |
border:2px dashed #BDBDBD ; | |
} | |
.frame ul li{ | |
list-style: circle; | |
margin-left: 2%; | |
padding-left: .5%; | |
} | |
.frame ul li:first-child{ | |
font-weight: bold; | |
} | |
.frame ol li{ | |
margin-left: 2%; | |
padding-left: .5%; | |
} | |
/* パンくずリスト 本文用 */ | |
.bread { | |
display: inline; | |
list-style: none; | |
color: var(--def-hn-text-color); | |
margin-left: 0; | |
} | |
.bread::after { | |
position: relative; | |
content: ' > '; | |
padding-left: 1px; | |
padding-right: 1px; | |
color: var(--def-hn-text-color); | |
} | |
.bread:first-child::after { | |
content: "現在の位置:"; /* さいしょのliの後ろにコロンをいれる */ | |
font-weight: bold; | |
} | |
.bread:last-child::after { | |
content: ""; /* 最後のliの後ろには区切り文字を表示しない */ | |
} | |
blockquote{ | |
padding: 1%; | |
padding-left: 3%; | |
padding-right: 3%; | |
color: var(--def-hn-text-color); | |
border:3px dashed #BDBDBD ; | |
} | |
/* 表 */ | |
table{ | |
width: 100%; | |
border-spacing: 0; | |
} | |
table th,table td{ | |
padding: 10px 2px; | |
text-align: center; | |
} | |
table tr:nth-child(even){ | |
background-color: #f8f8f8 | |
} | |
table th{ | |
border: solid 0.1px #0288d1; | |
padding: 10px 0; | |
} | |
table td{ | |
border: solid 0.1px #0288d1; | |
text-align: center; | |
padding: 10px 0; | |
} | |
table caption{ | |
font-weight: bold; | |
text-align: left; | |
text-indent: 2%; | |
} | |
table caption::before{ | |
content: "◇"; | |
font-size: small; | |
} | |
.footer address { | |
color: var(--def-light-color); | |
} | |
/*おりたたみボックス全体*/ | |
.accbox { | |
margin: 2em 0; | |
padding: 2%; | |
} | |
/*ラベル*/ | |
.accbox label { | |
display: block; | |
padding: 0.75em;/*上下右の余白*/ | |
padding-left: 2%; | |
font-weight: bold; | |
color: var(--def-hn-text-color);/*文字色*/ | |
border: 2px #0288D1aa dashed; | |
border-bottom: 3px solid #0288d1; | |
margin-top: 1%; | |
margin-bottom: 1%; | |
cursor :pointer; | |
transition: all 0.4s; | |
} | |
/*アイコンを表示*/ | |
.accbox label:before { | |
content: ' + '; | |
padding-right: 8px; | |
} | |
/*ラベルホバー時*/ | |
.accbox label:hover { | |
background :var(--primary-color); | |
color: var(--def-light-color); | |
} | |
/*チェックは隠す*/ | |
.accbox input { | |
display: none; | |
} | |
/*中身を非表示にしておく*/ | |
.accbox .accshow { | |
height: 0; | |
padding: 1%; | |
overflow: hidden; | |
opacity: 0; | |
transition: 0.4s; | |
} | |
/*クリックで中身表示*/ | |
.cssacc:checked + label + .accshow { | |
height: auto; | |
padding: 2%; | |
background: var(--def-light-color); | |
opacity: 1; | |
} | |
.accbox .accshow p { | |
margin: 15px 10px | |
} | |
/*アイコンを入れ替える*/ | |
.cssacc:checked + label:before { | |
content: ' - '; | |
} | |
/* ページ遷移系 */ | |
#ctrl{ | |
display:flex; | |
justify-content: center; | |
margin: 1%; | |
padding: 1%; | |
} | |
.current{ | |
color: var(--def-light-color); | |
background-color: var(--link-button-color); | |
border: solid 2px var(--link-button-color); | |
text-decoration: none; | |
text-align: center; | |
font-size: larger; | |
font-weight: bold; | |
display: inline-block; | |
padding: 0.9em 1.6em; | |
transition: 0.4s; | |
} | |
.current:hover { | |
color: var(--link-button-color); | |
background-color:var(--def-light-color); | |
} | |
.page-link { | |
text-decoration: none; | |
text-align: center; | |
font-size: larger; | |
font-weight: bold; | |
display: inline-block; | |
padding: 0.9em 1.6em; | |
color:var(--link-button-color); | |
border: 2px solid var(--link-button-color); | |
transition: .4s; | |
} | |
.page-link:hover { | |
background: var(--link-button-color); | |
color:var(--def-light-color); | |
} | |
/* ナビゲーション関連 */ | |
#navigation{ | |
position: fixed; /*固定*/ | |
bottom: 0%; | |
background-color:#0288d1aa; | |
width: 100%; | |
opacity: 1; | |
animation-duration: 0.5s; | |
animation-name: fade-in; | |
} | |
/*フェードインするアニメーション*/ | |
@keyframes fade-in { | |
0% { | |
display: none; | |
opacity: 0; | |
} | |
1% { | |
display: block; | |
opacity: 0; | |
} | |
100% { | |
display: block; | |
opacity: 1; | |
} | |
} | |
.display-none{ | |
display: none; | |
opacity: 0; | |
} | |
/* なびげーしょんようのぢv */ | |
#bottom-navigation{ | |
display: flex; | |
flex-wrap: nowrap; | |
justify-content: space-between; | |
} | |
/*ハンバーガー*/ | |
#sitemap{ | |
width: 10%; | |
background:#03a9f499; | |
} | |
/*チェックボックス等は非表示に*/ | |
.nav-unshown { | |
display:none; | |
} | |
/*メニューボタン*/ | |
#nav-open { | |
display: block; | |
position: relative; | |
width: 100%; | |
height: 100%; | |
} | |
/*メニューコンテンツ*/ | |
#nav-open span{ | |
cursor: pointer; | |
position: relative; | |
display: block; | |
width: 100%; | |
height: 100%; | |
} | |
#nav-open span::after{ | |
content: " ≡ サイトマップ "; | |
margin: auto; | |
font-size: 15px; | |
letter-spacing: 0.1em; | |
font-weight: bold; | |
color:var(--def-light-color); | |
position: absolute; | |
top: 35%; | |
bottom: 35%; | |
right: 0; | |
left: 0; | |
margin: auto; | |
text-align: center; | |
padding: 1%; | |
} | |
/*閉じる用の薄黒カバー*/ | |
#nav-close { | |
display: none;/*はじめは隠しておく*/ | |
position: fixed; | |
z-index: 99; | |
top: 0;/*全体に広がるように*/ | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background: #000000C8; | |
transition: .4s; | |
} | |
/*中身*/ | |
#nav-content { | |
overflow: auto; | |
position: fixed; | |
top: 0; | |
left: 0; | |
z-index: 9999;/*最前面に*/ | |
width: 90%;/*右側に隙間を作る(閉じるカバーを表示)*/ | |
max-width: 350px;/*最大幅**/ | |
height: 100%; | |
background: #f8f8f8;/*背景色*/ | |
transition: 0.4s;/*滑らかに表示*/ | |
-webkit-transform: translateX(-105%); | |
transform: translateX(-105%);/*左に隠しておく*/ | |
} | |
/*チェックが入ったらもろもろ表示*/ | |
#nav-input:checked ~ #nav-close { | |
display: block;/*カバーを表示*/ | |
opacity: .5; | |
} | |
#nav-input:checked ~ #nav-content { | |
-webkit-transform: translateX(0%); | |
transform: translateX(0%);/*中身を表示(右へスライド)*/ | |
} | |
/*ハンバーガーメニュー内部*/ | |
#nav-content ul{ | |
list-style: none; | |
padding: 0 1%; | |
} | |
#nav-content li { | |
margin: 1%; | |
} | |
#nav-content li a { | |
display: block; | |
padding:1.75%; | |
border: 2px solid var(--link-button-color); | |
background-color: var(--def-light-color); | |
color: var(--link-button-color); | |
text-indent: 12%; | |
transition: 0.4s; | |
} | |
#nav-content li a:hover { | |
background-color:var(--link-button-color); | |
color:var(--def-light-color); | |
} | |
.dir{ | |
margin: 3%; | |
padding: 1%; | |
border: 1px dotted var(--primary-color); | |
} | |
.dir ul li:first-child{ | |
font-weight: normal; | |
} | |
/* 閉じるボタン */ | |
#exit { | |
border: 2px solid var(--link-button-color)!important; | |
background-color: var(--link-button-color)!important; | |
color: var(--def-light-color)!important; | |
text-align: center!important; | |
text-indent: 0px !important; | |
} | |
#exit:hover { | |
background-color:var(--def-light-color)!important; | |
color:var(--link-button-color)!important; | |
} | |
/* パンくずリスト */ | |
#bread-list{ | |
background-color:#03a9f433; | |
} | |
#bread-list ul { | |
display: flex; | |
list-style-type: none; | |
height: 100%; | |
justify-content: center; | |
align-items: center; | |
margin: auto; | |
} | |
#bread-list li a { | |
padding: 5px; | |
color: var(--def-light-color); | |
font-size: 16px; | |
text-decoration: none; | |
transition: .4s; | |
font-weight: bold; | |
} | |
#bread-list li a:hover { | |
background-color: var(--link-button-color); | |
} | |
#bread-list li::after { | |
content: '\003e'; | |
margin-left: 10px; | |
margin-right: 10px; | |
color: var(--def-light-color); | |
} | |
#bread-list li:first-child::after { | |
content: "現在の位置:"; /* さいしょのliの後ろにコロンをいれる */ | |
font-weight: bold; | |
} | |
#bread-list li:last-child::after { | |
content: ""; /* 最後のliの後ろには区切り文字を表示しない */ | |
} | |
/*同階層リンク*/ | |
#nav-title{ | |
color: var(--def-light-color); | |
background-color: var(--link-button-color); | |
border: solid 2px var(--link-button-color); | |
opacity: 0.9; | |
text-align: center; | |
font-size: larger; | |
font-weight: bold; | |
display: inline-block; | |
padding: 0.9em 1.5em; | |
} | |
/* みやすさをすこしあげた */ | |
#nav-ctrl .page-link{ | |
color:var(--def-light-color); | |
} | |
/*うえにもどる*/ | |
#page_top{ | |
width: 10%; | |
right: 3%; | |
bottom: 10px; | |
background: #03a9f455; | |
position: unset; | |
} | |
#page_top a{ | |
position: relative; | |
display: block; | |
width: 100%; | |
height: 100%; | |
transition: .4s; | |
} | |
#page_top a::after{ | |
content: " PAGE TOP ↑ "; | |
font-size: 15px; | |
letter-spacing: 0.1em; | |
font-weight: bold; | |
color: var(--def-light-color); | |
position: absolute; | |
top: 35%; | |
bottom: 35%; | |
right: 0; | |
left: 0; | |
margin: auto; | |
text-align: center; | |
padding: 1%; | |
} | |
#page_top a:hover{ | |
background: var(--link-button-color); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment