引き続き今のCSSを学ぶために本書を手に取った
参考になった箇所をメモ。
作成サイト
ルート<html>のfont-size:100pxにして全体をremで管理する
:root {
font-size: 100px; /* 20pxは0.2remとなる */
}
remベースのテキストの基本設定
/* テキストの基本設定 */
body {
color: var(--darkgray);
font-size: 0.16rem;
font-family: sans-serif; /* Windowsではメイリオ、macOSやiOSでは「ヒラギノ角ゴ」で表示される */
line-height: 1.8;
}
ヒーローイメージを画面の高さに合わせる
html, body, .hero {
height: 100%; /* 100vhだとモバイルではブラウザアドレスバーなどを含んでオーバーフローしてしまう */
}
body {
overflow-y: scroll;
}
擬似要素で読み込んだSVG画像のサイズ指定
- SVGはレスポンシブ設定されていないとCSSでサイズ指定できない
viewBox="0 0 31.7 26.4"-
<img>で読み込んだ場合はCSSでサイズ調整できる
スクリーンリーダー用のテキストを非表示にする設定
- 米政府デジタルサービスチーム18Fの設定
左右の余白がある状態で画像を横いっぱいに広げる
.item .photo {
/* 左右の余白の分だけマイナスマージンで広げる */
margin: 0 calc( var(--side) * -1 );
}
横並びにした画像を重ねる
.item.cafe .fig1 {
flex: 1 1 auto; /* 伸縮あり */
/* 重ねる幅を決める */
margin-right: -0.47rem;
margin-bottom: 0.38rem;
}
.item.cafe .fig2 {
flex: 0 0 43vw; /* 伸縮なし */
}
.item.cafe .fig2 img {
/* 重ねる幅を決める */
height: 1.56rem;
}
.item img {
/* 画像がオリジナルサイズより大きくなることを許可する */
width: 100%;
object-fit: cover;
}
お知らせで文字数が可変の横並びにする
flex-wrap: wrapにして、足して100%の固定幅で並べる
.news dl {
font-size: 0.16rem;
display: flex;
flex-wrap: wrap; /* wrapにする */
}
.news dt {
flex: 0 0 1.57rem;
}
.news dd {
flex: 0 0 auto;
width: calc(100% - 1.57rem); /* <dt>を100%から日付の幅を引いた値にする */
}
widthを指定したときに改行しないようにする
.hours dd {
flex: 0 0 auto;
width: calc(100% - 4em);
margin-left: 0;
white-space: nowrap; /* 自動改行を禁止する */
overflow: visible; /* オーバーフローを表示する */
}
CSSグリッドで同様なことをする
.hours dl {
display: grid;
grid-template-columns: auto auto;
column-gap: 1em;
justify-content: center;
}