【HTML&CSS】課題2②疑似要素とSNS記事の埋め込み

2020 7/05

2020.06.30 2020.07.05

今回のテーマは『疑似要素を使う』と『SNSの記事を埋め込む』の2点です。全体像の動画がないと中々説明しづらいのですが、完成したら追加したいと思います。

★疑似要素を使って見出しの左右に線を入れる

疑似要素について

疑似要素とは？
・疑似要素＝HTMLに存在しないものをCSSで追加できるプロパティ
・色、大きさの指定も可能
・図形などの装飾がCSSで出来る、divタグわざわざ作る必要なし

疑似要素を使うときのポイント
・CSSを書くときは :link　:visited　:hover　:active の順に記述する。
　バッティングしてCSSがうまく効かない、といった問題になりづらいため。
　LoVe and HAte で覚える。
・疑似要素「::」は：が2個なので注意、スペースもなし。

見出しの左右に線を入れる

WORKの左右に”::before”と”::after”を使って「—」を入れます。同じものを入れるのでCSSを一つにまとめます。

【CSS】
.section_title::before,
.section_title::after {　←★「::」の左右に半角スペースは入れない
　content: “”;　←※１
　display: block;　←※２
　width: 0.75em;　←※３
　height: 4px;
　background-color: #333;
}

※１：疑似要素は文字がなくても必ず content: “　”; がいる！入れ忘れると疑似要素見えなくなるため。
※２：displayはinline-blockの状態なので、blockにする。
※３：横の大きさをpxかけるのあまりよくない、文字の大きさ変わったときに困るから。
　　　emにしておくと見出しのサイズ変わったとき連動するので便利。

WORKの左右と「—」の余白を開けます。ここでも※３の理由でemを使います。

【CSS】
.section_title::before {
　margin-right: 0.5em;　←※３
}
.section_title::aftere {
　margin-left: 0.5em;　←※３
}

WORKと「—」の高さをそろえます。疑似要素の親はh2(.section_title)なので、flexをかければ中央に揃います。

【CSS】
.section_title {
　adding: 1.6rem 0.2em;
　font-size: 4.0rem;
　font-weight: normal;
　line-height: 1;
　letter-spacing: 0.05em;
　text-transform: uppercase;
　display: flex;　←★
　justify-content: center;　←★
　align-items: center;　←★
}

card-newクラスのときだけ〇Newつける

画像の右上に”::after”を使って〇Newを入れます。

【CSS】
.card {
　position: relative;　←※4
}
.card-new::after {
　content: “New”;
　display: block;
　background-color: orange;
　color: #fff;
　font-weight: bold;
　border-radius: 100px;
　width: 4em;
　height: 4em;
　font-size: 1.3rem;
　display: flex;　←※３
　justify-content: center;　←※３
　align-items: center;　←※３
　position: absolute;　←※4
　top: 0px;　←※5
　right: 0px;　←※5
　transform: translateX(30%) translateY(-30%);　←※６　
　box-shadow: 2px 2px 10px rgba(42, 38, 36, 0.37);　←※７
}

※３：〇の中心に”New”の文字がくる
※４：position: relative;をかけることで、card-newを親要素＝基準とする。
子要素にposition: absolute;で他の要素は影響を受けず、子要素を独立して動かすことができる。

position 5種類の使い方
■ static： positionの初期値（＝何も設定していないとき、今回は使わない）
■ relative： 現在位置を基準にして要素を移動できる
■ absolute： 親要素を基準にして要素を移動できる、relativeとセットで使う
■ fixed： 画面を基準にして要素を移動（固定）できる
■ sticky：親要素が画面内に表示されなくなるまで要素を固定できる

※５：右上に寄せる
※６：〇自体を基準に〇の1/3だけ画像からずらす

※6について、top: XXpx;、right: XXpx; でずらしてはダメか
フォントサイズが変わるごとにpxの大きさを変えないといけなくなるので、”transform”を使う。

※７：図形に影をつける
　　　box-shadow:　　{左右向き　上下向き　ぼかし具合　大きさ(今回はなし)　色}

影の色を付けるコツ（Bracketsの場合）
①図形の色を抽出
②#XXXXXX のところでCtrl＋Eで色ツールを出す
③カラーパレットの中で色を黒く薄くする

影の色を付けるのに参考になるサイトはこちら。

PhotoshopVIP