勉強できる時間が迫ってきて、これからの勉強ノートは雑になってくるところが増えると思いますが、また質問等あれば答えさせていただきます。
「divタグ」で複数要素を入れる！
箱のの作成！
今回も前回同様に要素ごとをdivで扱っていきます。
それによりhtmlの構造としてもcssとしても扱いやすくなります。
箱に名前をつける！
作成した箱にクラスを追加する。
今回は複数という話題があるように前回使用したidは一つのwebページに1つしか存在しない。classの場合は複数存在しえる。
タイトルを入れる
作成した箱の中にh1タグを作成する。
<div class="box> <h1>title</h1> </div>
大見出しを入れる
作成した箱の中にh2タグを作成して大見出しを入れる。
<div class="box> <h1>title</h1> <h2>Headlime</h2> </div>
小見出しを入れる
作成した箱の中にh3タグを作成して小見出しを入れる。
<div class="box> <h1>title</h1> <h2>Headlime</h2> <h3>Article</h3> </div>
段落付きの文章を入れる
作成した箱の中にpタグを作成して段落付きの付きの文章を入れる。
pタグは単に文字だけでなく画像やほかのページへのリンク等を囲むことも可能です。
<div class="box> <h1>title</h1> <h2>Headlime</h2> <h3>Article</h3> <p> </p> </div>
箱を装飾！
準備
CSSで「box」という名前の付いた要素を編集する準備を行う。
.box{ }
色
クラス「box」の箱に背景色をつける。
.box{ background-color: #F6F6F6; }
横幅
クラス「box」の箱に「298px」の横幅をつける。
.box{ background-color: #F6F6F6; width: 298px;}
枠
箱に枠線をつける。
枠線を指定指定する際はborderを使う。
.box{ background-color: #F6F6F6; border: 1px solid #CCC; width: 298px;}
隙間
箱の内側に隙間を入れる。
paddingを入れて隙間を入れる。
.box{ background-color: #F6F6F6; border: 1px solid #CCC; padding: 25px 15px; width: 298px;}
要素のデフォルト値を初期化
初期化する要素の選択 1
初期化する理由としては、サイトによってデフォルトで値が変わるのでそれによる変化をなくすために行う。
まずは、それをするための準備をします。
.box > h1 { }
初期化する要素の選択 2
カンマ区切りでboxクラス直下にある要素を複数選択する。
複数の要素に同じスタイルを適用する場合は、カンマ 区切りで要素を記述する。
.box > h1, .box > h2, .box > h3, .box > p { }
文字の色を初期化！
デフォルトの文字の色を変更！
一般的なすべてのブラウザにおいてデフォルトの文字は#000になっている。
.box > h1, .box > h2, .box > h3, .box > p { color: #333; }
フォントの種類を初期化
デフォルトのフォントの種類を変更する！
フォントの種類を変更する場合は、font-familyを使用。
.box > h1, .box > h2, .box > h3, .box > p { color: #333; font-family: serif; }
他の要素との間隔を初期化
他の要素との間隔を変更！
変更にはmarginを使用。
.box > h1, .box > h2, .box > h3, .box > p { color: #333; font-family: serif; margin: 0; }
要素内の間隔を初期化
要素内の間隔を変更！
変更にはpaddingを使用。
.box > h1, .box > h2, .box > h3, .box > p { color: #333; font-family: serif; margin: 0; padding: 0;}
各要素にスタイルを適用
h1要素の調整-下線
h1要素に下線を追加する。
下線を入れるには、border-bottom 太さ 線の種類 色という形で指定。
.box > h1 { border-bottom: 1px solid #999; }
h1要素の調整-間隔
h1要素の文字部分と下線部分との間に隙間を入れる。
paddingを使用します。下線部分のみの調整なのでpadding-bottom属性を使用する。
.box > h1 { border-bottom: 1px solid #999; padding-bottom: 5px;}
h1要素の調整-中央寄せ
h1要素の文字を中央よせ。
ある要素の文字を中央寄せにする場合、text-align属性に対してcenterという値を適用。
.box > h1 { border-bottom: 1px solid #999; padding-bottom: 5px; text-align:center;}
h2要素の調整-余白
h2要素の余白をmarginを使って調整。
.box > h2 { margin: 10px 0;}
h3要素の調整-余白
h3要素の余白をmarginを使用して調整。
.box > h3 {margin: 5px 0;}
p要素の調整-文字の大きさ
p要素の大きさを調整するにはfont-sizeを使用して調整。
.box > p { font-size: 14px;}
p要素の調整-行間隔
p要素の行の間隔をline-heightを使用して調整。
行の間隔を狭くしすぎると文章全体が見づらくなるので心広めで間隔をあける。
.box > p { font-size: 14px; line-height: 20px;}
p要素の調整-文字間隔
p要素の文字の間隔をletter-spacingを使用して調整。
.box > p { font-size: 14px; letter-spacing: 1px; line-height: 20px;}
右下を折り返したレイアウト
疑似クラスbefore
boxというクラス名を持つ要素に対して疑似クラスbeforeでスタイルを追加する。
疑似クラスbeforeがある要素についた場合、beforeによって定義されたスタイルがあたかもスタイルがあたかも一つの要素としてAの直前に注入される。
.box:before{ }
contentの抽入 1
作成したbeforeセレクタにcontent属性を指定。
content属性を指定し、値に文字を入力することでその文字を反映する。
.box:before{ content: "Hello"; }
contentの抽入 2
作成したbeforeセレクタにcontent属性を指定。
beforeセレクタによって指定したスタイルがhtml文章に抽入されない場合があるので、文字を入力しない場合はcontent:"";と記入する。
borderの抽入
作成したbeforeセレクタにborder属性を指定。
.box:before { border: 20px solid #CCC;}
borderの下側の色を変更
border属性の下側の色のみを調整する場合は、border-bottom-color属性を使用する。
.box:before {border-bottom-color: #FFF;}
borderの右側を変更
border属性の右側の色のみを調整する場合は、border-right-color属性を使用する。
.box:before {border-right-color:#FFF;}
配置を変更 1
作成したbeforeセレクタの位置属性をabsoluteに変更
要素の位置はhtmlの構造に沿って自動で決定されるがそれを変更する。配置の変更には、positionという属性を使用してabsoluteという値を入れる。これによりほかの要素に影響されない位置を指定できる。
.box:before { position: absolute;}
配置の変更 2
作成したセレクタを値で変更！
position:absolute;で下要素にはtop,bottom,right,leftという属性を使用することができる。要素に有効な位置を割り当てるには、先のうち二つを割り当てる必要がある。
.box:before { bottom: 0; right: 0;}
配置の変更 3
boxの要素に対してrelativeを指定。
relativを親要素に入れることでabsolute属性を使用した要素を右下のbox要素に持ってくることができる。
配置の変更 4
作成したセレクタの値を修正！
折り返し部分の右下に不要な線が入ってしまっているのを消すために使用。
.box:before { bottom: -1; right: -1;}
なかなか今日の内容は同じように入力してみないとわからない内容になっていたと思います！今後やっぱり こんな風な内容が増えてしまうので、qiitaの書き方を見直したいところです。いい方法があれば教えてくださると幸いです。
今日はここまでです。