書籍「HTML5/CSS3モダンコーディング」のテストページを作成して

一通り読んでみて

2016年に発売された本なので、使われている技術が少し古いものなどが多かったと思いました。
（Table、floatなど）
なるべくそれらを使わず、flexBoxを使用して作成できないか考えながら読み、知識としてfloatやTableの技術なども頭に入れておくことができました

スタンダードレイアウトページを作成してみて

・aタグの入れ子
aはちょっと特殊なコンテンツモデルを持っています。transparent（トランスペアレント）といって親要素のタグのコンテンツモデルを引き継ぎます（透過的と呼ぶ）
以前まではaでdivやhxといったタグを囲うことは禁止されていましたが、現在は親要素によってはaタグの中に
divやhタグを入れることが良しとされています。
参考

・CSSカウンタ
CSSカウンタはCSS2.1からある機能で、CSSの中でカウンタを定義して値を増やしたり表示したりすることができます。カウンタを表示するのに必要な手順は４つです。
カウンタの名前を決める
カウンタの値を０に初期化する .......... counter-reset;
カウンタの値を表示する .............. content: counter(カウンタ名);
カウンタの値を増加させる ............. counter-increment: カウンタ名;

・text-overflow
text-overflowプロパティで、表示領域からはみ出て見えなくなるテキストの境目の表示方法を指定できる。
指定できる値は以下の二つ。

clip(初期値) 表示領域を境にして非表示になります。境目に文字が被っている場合は文字が途中で途切れます。
ellipsis 非表示になるテキストの手前で、表示領域に収まるように省略記号（・・・）を表示します。

text-overflowの指定はテキストが横方向へはみ出た場合にのみ適用されますが、通常親要素の幅を超える文字は横にはみ出さずに折り返されてしまいます。
折り返しを禁止するwhite-space: nowrap;の指定が必要です。また、親要素をはみ出したテキストはそのまま表示されるので、はみ出した部分を非表示にするoverflow: hidden;の指定も必要です。
２つのプロパティを合わせて初めてtext-overflowの指定が反映されます。

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
この３つをセットで覚えとくとよいでしょう。

・直下セレクタ
要素同士を結合子 [>] で結ぶことで、ある要素の直下にある要素に対してスタイルを設定することができます。

<div>
  <h1>父母</h1>
  <p>長女</p>
  <p>長男</p>
  <p>次男</p>
</div>

上記HTMLで、直下セレクタでCSS　div > p {color: red;}　とした場合
div > pはdivの直下のpを指します。
結果、長女、長男、次男のテキストが赤になります。

・隣接セレクタ
要素同士を結合子 [+] で結ぶことで、ある要素の後続に出現する隣の要素に対してスタイルを指定することができます。

<ul class="documents">
  <li>item_1</li>
  <li>item_2</li>
  <li>item_3</li>
  <li>item_4</li>
  <li>item_5</li>
</ul>

上記のようなHTMLをCSSで.documents > li + li {color: red;}と指定した場合
documents > li の後に続くli
documentsの直下にあるliのうち2つ目以降のliに対してのセレクタになります。
結果item_2からitem_5が赤色になります。

・nth-childとnth-of-type
nth-child」と「nth-of-type」は、n番目の要素を指定したり、偶数番目など一定間隔の要素を指定することができる使いやすいCSSセレクタの擬似クラスです。

理解して使用しないと「指定したつもりのないところにスタイルが適用される」など意図した挙動にならないことがあります。

どのような違いがあるか
「nth-child」は兄弟関係の要素をカウントするのに対して、「nth-of-type」は指定した要素のみをカウントします。

よく使う指定
:nth-of-type(n+2)もしくは:not(:first-of-type)　･･･　最初の要素以外を指定する
:not(:last-child)　･･･　最後の子要素以外
:nth-of-type(-n+X)　･･･　〇〇番目まで
:nth-of-type(odd)もしくは:nth-of-type(2n+1)　･･･　奇数の要素を選択
:nth-of-type(even)もしくは:nth-of-type(2n)　･･･　偶数の要素を選択
:first-of-type　･･･　最初の要素を選択
:last-of-type　･･･　最後の要素を選択
:nth-last-child(2)　･･･　最後から2番目を選択
:nth-last-child(-n+2)　･･･　最後から2番目までを後ろから選択
:not(:nth-child(2))　･･･　2番目以外を選択
:only-child　･･･　親要素の中で要素が1つのみの場合に選択

参考
https://stocker.jp/diary/nth-child/
https://qiita.com/manabuyasuda/items/86f9bf68f80ad7ce5104
https://qiita.com/ituki_b/items/62a752389385de7ba4a2

グリッドレイアウトページを作成してみて

・ボックスエリアのリンク領域
ボックス全体をリンクにしたい時、親要素にpaddingが設定されていると
paddingがリンクエリアになってくれません。
paddingの分もリンクエリアにするには、aタグをネガティブマージンでpadding分広げ
再びaタグに広げたいぶんのpaddingをつける。

html
<div class="box">
  <a href="">
    <img src="" alt="">
    <p>aaa</p>
    <p>bbb</p>
  </a>
</div>

css
.item {
  width: 300px;
  margin-bottom: 4px;
  padding: 8px;
 }

a {
  display: block;
  margin: -8px;
  padding: 8px;
 }

・Masonryの導入
Masonryとは、指定した要素を可変グリッドレイアウトとして自動的に並び替えてくれるJavaScriptライブラリです。

実装方法は、MasonryのサイトからJSをダウンロードして読み込むか、CDNから読み込み
Masonryを実行する下記のJSコードを配置します。

new Masonry('body',{         -------- ①
 itemSelector: '.item',      -------- ②
 columnWidth: 180,           -------- ③
 gutter: 4                   -------- ④
});

①可変させる要素の親、今回はbody
②可変させるボックス要素のセレクト(クラス)、今回は".item"
以下オプション設定 ↓
③グリッドの横幅、ボックスが並ぶ基準となる列の幅。今回は一番小さいボックスの幅と同じなので180を指定
④左右のボックスとの間隔、隣り合うボックスとのマージンを設定、今回は4px
上下のマージンは別途ボックスに設定する必要があります。

シングルレイアウトページを作成してみて

・transformの複数指定

transformを複数指定したい場合は、下記のように半角スペースで区切ります。

.div {
  transform: translate(-50%, -50%) scale(0.5);
}

・font-familyの指定

body {
  font-family: Raleway, "Hiragino Kaku Gothic ProN",  Meiryo,  sans-serif;
}

font-familyの指定は左から順に適用されます、日本語フォントの前に欧米フォントを記述することで、英数記号など欧米フォントの範囲内の文字にはRalewayが適用され、欧米フォントに含まれない文字には次の
Hiragino Kaku Gothic ProN、そのフォントが存在しなければMeiryoが適用されることになります。

・縦横比を維持したまま可変する正方形の作り方
vmin という単位を利用する方法

<div class="squareBox">
  <div class="content"></div>
</div>

.squareBox
  /* margin 30px */
  width: calc(100vmin - 60px)
  height:  calc(100vmin - 60px)

・アスペクト比を固定して可変させる方法
幅300pxのboxに、縦横比4:3の高さを指定する場合
3 ÷ 4 = 0.75
5:2にしたい場合は、2 ÷ 5 = 0.4など

<div class="box">
  <p>height: calc(300px * 0.75);をやっています</p>
</div>

.box {
  background: teal;
  width: 300px;
  height: calc(300px * 0.75);
}
.box p {
  color: white;
}

参考　https://swallow-incubate.com/archives/blog/20190530/
アスペクト比の計算　https://aspect.arc-one.jp/

・form
1行テキストエリアはinput要素のtype属性をtextに
複数行テキストエリアはtextarea要素で表示できます。
送信ボタンはinput要素のtype属性をsubmitに、ボタン上のテキストはvalue属性の値で指定します。
form要素内の各要素にname属性は必須ではありませんが、基本的には付けておきましょう。

rgbaでの色指定
rgba(255,255,255,0.5);
左から 赤, 緑, 青,不透明度の数値
前の三つの値は0~255の間で、最後の不透明度は0~1の間で表されます。

rgba変換ジェネレーター
https://tech-unlimited.com/color.html
https://hp-html.jp/rgba/
https://arts-factory.net/rgbatool/

・擬似要素で下線

contentsTtl
&::before,&::after {
content: "";
position: absolute;
right: 0;
left: 0;
bottom: 0;
border-bottom: 1px solid #333;
}

left:0 right:0 の指定しないと幅いっぱいに表示されない
width: 100%;で指定するとテキストにある余白いっぱいまで下線が表示されてしまう

・IEで表示した時の崩れ修正
flex-directionを指定すると、IEで表示がおかしくなりやすく、レイアウト崩れに注意。
min-height: 0%;
vertical-align:bottom;
https://web-pixy.com/flex-direction-ie/

サンプルを作成してみて

・デザインを見て、作業を始めるまでにしっかりとしたHTML,CSS設計ができるように心がけたい
・リキッドデザインにすることを今回は目標としていなかったが、次回からはリキッドになるようにする
・更新でコンテンツが増えたことなども想定したHYML,CSS設計、更新保守しやすいように意識、スタイルが重複しないように気を付けたいです
・打ち消すスタイルをなるべく付けないようにする。
・自分が書いたscssが読みにくい。コメントなどでわかりやすくする必要がある