【目的】
HTMLとCSSについて知識が皆無に等しいので、理解したことをここにアウトプットすることで理解を深める
【実施内容】
スラスラわかるCSSのデザインのきほんをもとに理解したことをまとめていく
わからないとこのみかな
【いざ実施】
一章:WebとHTML
・画像の表示方法
imgタグを用いる。
src属性:画像のパスを記述する。
→相対パスと絶対パス
→基本相対パス。相対パスは、現在のフォルダから目的のファイルまでの道のりを記述したもの。
alt属性:画像の説明を記述する。
width属性:画像の幅を指定する。
height属性:画像の縦を指定する。
-画像フォーマット
・jpeg:標準的な画像フォーマット。べた塗りとかの画像には向いていない
・gif:容量を抑えるために、使える色彩を限定したもの
・png:一番容量を食う。どっちのフォーマットにも対応できる。
二章:CSSの基本
・idセレクタ
htmlのタグについているid属性(id=hoge)で要素を選択するセレクタ
cssとしては(#hoge{宣言})の形式で記述
・classセレクタ
htmlタグについているclass属性(class=hoge)で要素を選択するセレクタ
cssとしては(.hoge{宣言})の形式で記述
・疑似クラス
状態に対して装飾を行うこと
a:hoverセレクタはaタグにマウスが重なっている状態を表せ、その状態の時の装飾を宣言できる
・font-familyプロパティ
そのページのフォントを定義するもの
三章:ボックスモデル
https://nulab-inc.com/ja/blog/nulab/css-basics-for-engineer-boxmodel/
→要素の領域の編集にあたるkey:marginとpadding
・背景画像の挿入方法
cssのbackground-imageセレクタに:url(パス情報)で指定した領域に対して背景画像が埋め込める
・ボーダーラインの記述方法
定義すべき項目:色 太さ 線の形状→solid(実線など)
・テーブルの記述方法
callapse:テーブルボーダーが一重であること。
separate:テーブルボーダーが二重で引かれること。
tr td:first-child:テーブルの最初の要素にマッチする
四章:フロート・ポジションについて
・フロート:ある要素にfloatを設定(ex float:left)すると、その要素は文要素のボックス内でできるだけ左に配置しようとする。つまり横並びの表現が可能
・ポジション:ボックスの位置を座標で指定して配置するための機能。
absolute:rerativeで定義された親ボックスからの座標位置をしていることでその位置に配置できる。
→absolute指定で文字が重なるのは、浮かせているから。論理的に他の要素からこの要素が見えなくなているから次の要素が詰められて重なる