今回のテーマは『疑似要素を使う』と『SNSの記事を埋め込む』の2点です。全体像の動画がないと中々説明しづらいのですが、完成したら追加したいと思います。
★疑似要素を使って見出しの左右に線を入れる
疑似要素について
疑似要素とは？
・疑似要素＝HTMLに存在しないものをCSSで追加できるプロパティ
・色、大きさの指定も可能
・図形などの装飾がCSSで出来る、divタグわざわざ作る必要なし
見出しの左右に線を入れる
WORKの左右に”::before”と”::after”を使って「—」を入れます。同じものを入れるのでCSSを一つにまとめます。
【CSS】
.section_title::before,
.section_title::after { ←★「::」の左右に半角スペースは入れない
content: “”; ←※１
display: block; ←※２
width: 0.75em; ←※３
height: 4px;
background-color: #333;
}
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: {左右向き 上下向き ぼかし具合 大きさ(今回はなし) 色}
影の色を付けるのに参考になるサイトはこちら。
他に重力間のないふわふわした図形も流行りとのこと。参考サイトはこちら。
SNSの記事を埋め込む
Twitterを埋め込む
こちらのTwitterの埋め込みコードを生成できるサイトを使ってコードを作ります。
Twitter Publishの使い方
①ツイッターのプロフィールページのURLを入れて[→]ボタンをクリック
②Twitterの表示オプションを選ぶ
③［set customization options］をクリックして高さなどを入れて［Update］をクリック
④できたコードを［Copy Code］をクリックしてコピー、HTMLに張り付ける
noteを埋め込む
noteの記事はnoteのサイトから埋め込みリンクを生成します。参考サイトはこちら。
なお、noteはタイムラインでなく一記事ずつしか埋め込めませんでした。
SNSカードのブロックの高さや線をそろえる
Twitterとnoteの記事の高さを揃えます。すでにHTML上でCSSで強い指定がかかっているので、iframeに !important で指定してしまいます。
.about_sns iframe {
height: 400px !important;
border: 3px solid #888 !important;
border-radius: 10px !important;
}
アイコンフォントを埋め込む
TwitterとInstagramのアイコンを埋め込みます。headタグにFontAwesomeのリンク入れます。
インスタのアイコンにグラデーションをかける
グラデーションは「斜め135°」「#427eff」からスタートして「70%」のところで「#f13f79」とします。
【CSS】
.contact_sns_item-instagram i {
color: #fff;
background: linear-gradient(135deg, #427eff, #f13f79 70%);
}
※backgroundは単色のとき。今回はグラデーションでは使えない。
初心者はグラデーションのツールをもとに色を指定すると失敗しにくいそう。以下は参考のサイト。
ページ内リンク（アンカーリンク）をつける
固定のヘッダーに見出しが隠れないようにするための裏技。
.section {
padding-top: 60px;
margin-top: -60px;
margin-bottom: 100px;
text-align: center;
}
今回はここまで。次回はここにアニメーションを付けていくとのことで楽しみです！
お読みいただきありがとうございました◎
コメント