【今日学んだこと】HTML CSS Webデザイン
今日はWebデザインの勉強をしました。
重要だと思ったポイントをまとめていきます。
★重要だと思ったポイント
■線の指定
border-widthプロパティは、線の太さを指定する。1つのサイズを指定した場合はすべての辺に同じサイズが適用される。
辺によって太さを変えたい場合は半角スペースで区切って上・右・下・左(時計回り)の順で指定。
border-styleと同時に指定する必要がある。
border-styleプロパティは、線の装飾方法を指定。初期値は「none」。1つのスタイルを指定した場合はすべての辺に同じスタイルが適用される。
辺によってスタイルを変えたい場合は半角スペースで区切って上・右・下・左(時計回り)の順で指定。
border-colorプロパティは、線の色を指定。一色を指定した場合はすべての辺に同じ色が適用される。
辺によって色を変えたい場合は半角スペースで区切って上・右・左・下(時計回り)の順で指定。
「border-width」、「border-style」、「border-color」はまとめて書くことができる。値は好きな順番でスペースで区切って指定する。
「border」のみだとすべての辺に適用される。
「border-top」「border-bottom」「border-left」「border-right」を使えば、どの辺に指定するか設定できる。
線はコンテンツを区切りたいときに使える。
文字色よりも薄い色を使うと、コンテンツの邪魔にならずデザインをスッキリと見せられる。
■リストの装飾
list-style-typeプロパティは、リストマーカーの種類を指定する。リスト項目の先頭に表示されるマークをリストマーカーという。
デフォルトでは、箇条書きリストは黒丸で、番号付きリストは数字で表示される。
list-style-positionプロパティは、リストマーカーを項目内のどの位置に表示させるかを指定。ボックスの外側に表示させるか、内側に表示させるかを指定する。
list-style-imageプロパティを使えば、リストマーカーに画像を指定することができる。指定できるのは一種類の画像。
「list-style-typeプロパティ」、「list-style-positionプロパティ」、「list-style-imageプロパティ」はまとめて書くことができる。
値は好きな順番でスペースで区切って指定する。
「list-style-typeプロパティ」、「list-style-imageプロパティ」を両方指定した場合は、「list-style-imageプロパティ」での画像の指定が優先される。
クラスとIDはタグの中に記述することができる属性の一つで、すべてのタグに指定することができる。
HTMLでクラスやIDを割り振っておき、CSSと紐づけることでその部分だけデザインを変えることができる。
■クラスとIDを使った指定方法
クラスを使う場合は、HTMLファイルでタグにclass属性を追記し、任意のクラス名を記述。
CSSファイルには「.」と「クラス名」を書き、適用させたいスタイルを書く。
HTMLのclass属性部分には「.」を付ける必要はない。
IDを使う場合は、HTMLファイルでタグにid属性を追記し、任意のID名を記述する。
CSSファイルには「#」と「ID名」を書き、適用させたいスタイルを書く。
HTMLのID属性部分には「#」を付ける必要はない。
「.クラス名」「#ID名」と指定すると、使用しているタグは関係なく、それらのクラスやIDが指定されている箇所すべてにそのデザインが反映される。
CSSで「タグ名.クラス名」「タグ名#ID名」のようにタグに名前に続けてクラス名やIDを書くと、そのクラスやIDのついた特定のタグでしか反映されない。
〇クラス名とID名のルール
・空白(スペース)を入れない
・英数字と「」、「」で記述
・一文字目は必ず英字
1つのタグに対して複数のクラスやIDを付けることもある。
その場合は、クラス名やID名を記述する「""」内に半角スペースで区切って書いていく。
IDとクラスを同じタグに書くこともできる。
〇クラスとIDの違い
ー同じHTMLファイル内で使用できる回数。
IDはページ内で同じIDを使うことができない。レイアウトの枠組みなど、どのページでも変わることのない部分に使われることが多い。
クラスはページ内で何度でも使える。ページ内で何度も使う装飾はクラスを使うとよい。
ーCSSの優先順位
装飾が被った場合、IDで指定した装飾が優先。
同じタグにクラスとIDで違う色を指定した場合、IDで指定した装飾の方が優先される。
IDを使ってページ内リンクを作成することもできる。
以上です！
