MENU

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

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


今回のテーマは『疑似要素を使う』と『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: “”; ←※1
 display: block; ←※2
 width: 0.75em; ←※3
 height: 4px;
 background-color: #333;
}

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

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

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

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; ←※3
 justify-content: center; ←※3
 align-items: center; ←※3
 position: absolute; ←※4
 top: 0px; ←※5
 right: 0px; ←※5
 transform: translateX(30%) translateY(-30%); ←※6 
 box-shadow: 2px 2px 10px rgba(42, 38, 36, 0.37); ←※7
}

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

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


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

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

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

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

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

他に重力間のないふわふわした図形も流行りとのこと。参考サイトはこちら。

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;
}

今回はここまで。次回はここにアニメーションを付けていくとのことで楽しみです!

お読みいただきありがとうございました◎

この記事が気に入ったら
フォローしてね!

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』

ブロックエディター完全対応のWordPressテーマ。
圧倒的な使い心地を追求し、日々進化しています。

この記事を書いた人

コメント

コメントする

CAPTCHA


目次
閉じる