HTML・CSSの学習
※こちらは学習中のメモ書きです。プログラミング勉強中の者が書いています。
HTML練習課題より
アウトライン
HTMLのアウトラインを誤解していたようだ。同じ階層ながらhレベルを変えてしまっていた。ブラウザで表示した時には違和感がなかったものの、書き方としてはhレベルが混在してしまっていた。
【まとめ】階層とhレベルを合わせることを意識する
GFM:pre記法(バッククォート×3)
これはcode専用。見た目が見やすくなるような気がして乱用していたので気をつけたい。
codepen
Debug Modeのチェック機能あり。
CSS positionのプロパティにいて
値は4種類
static：初期値のこと
relative：基準を現在位置とした指定
absolute：基準を親要素とした指定(絶対的)
fixed：固定
・絶対的な位置指定とは、他の要素を考慮しない表示(重なってでも表示する)
absoluteを使用する
absolute を使用する際は、親要素を position:relative or fixed に指定しておく。
三角形を作る
基本的には
borderのtop・right・bottom・leftを使う。
各border間の接続面が斜めになっていることを利用して、widthとheightを無くし、かつこのうち3辺を透明(transparent)指定する。
※底辺の対辺は記述自体不要
向きやサイズが変わると
色指定1箇所：2つのborder利用
色指定2箇所：4つのborder利用
吹き出し
よくある四角ver
考え方としては
div+ 三角形(擬似要素after)
擬似要素について： CSSの疑似要素とは？beforeとafterの使い方まとめ
吹き出しまんまるver
divに
border-radius: 50%;(widthとheightも)
三角の部分はtransform: rotate(45deg)で対応。
transformは要素を変形させるもので、degはdegree「度」の略である。
参考： CSSのdegとは？CSS Transformsとは？ | Devsway
ツール
作成ツールもあるようだ
参考：
cssarrowplease
Flexbox
プロパティ
flex
flex-grow伸び(余ったスペースを分割)・ flex-shrink縮み ・flex-basis長さをまとめて指定できる。
初期値は flex: 0 1 auto; だが、一つだけ値を入れた場合は flex: 値 1 0; になるので注意。
参考： flex - CSS: カスケーディングスタイルシート | MDN
◉横並びにしたい時はdisplay:flexでは隙間ができてしまうので、flex: auto を指定する。
計算
- flexコンテナのアイテム幅の計算をする場合は、コンテナ幅に対する各アイテムのgrow値の比で割り当て計算する。
- もしbasis値があった場合は
basis値1 + (grow値1 × (コンテナ幅 − (basis値1 + grow値2 )) ÷ (grow値1 + grow値2) )
※paddingも考慮する場合 basis指定✖️box-sizing指定の有無で計算方法が異なるので要確認。
・flex-direction ： 横・縦並び(配置方向
rowcolumnrow-reversecolumn-reverse)・flex-wrap ：折り返し (
nowrap：初期値、wrap)・flex-flow ：上記をまとめて記述可能
・justify-content ：寄せ、間隔(水平方向) / align-content ：子要素が複数行(垂直方向)
(flex-start：左flex-end：右center：中央space-betweenspace-aroundspace-evenly:均等 )
「space-btween」は最初と最後の子要素を両端に。残りの要素を均等間隔で配置。
「space-around」は両端の子要素も含んだ均等間隔の配置。(アイテム両側には半分サイズの間隔入る)
「space-evenly」はアイテム周りの間隔量が等しい。
・align-items ：アイテムの配置(垂直方向)
(flex-start：上flex-end：下center：中央stretch：上限までbaseline：ベースラインで揃える)※align-self
align-itemsと同じような機能だが「個別」に指定するもの。
order
順序を指定するもので、デフォルトは0からスタート。値は正負で指定。
