iSARA模写　解説②〜SNSボタンの設置など〜

iSARA模写 第2回です。

前回はこちら↓

iSARA模写　解説①〜ヘッダー部分〜

iSARAヘッダー部分の模写をしています。

emienglish.net

今回はこちらを作成します↓

今回のポイントは、

・バックグラウンドに写真追加

・テキストの中央寄せ

・SNSボタン設置

いつもの手順で

①レイアウトの確認

②HTMLの書き出し

③CSSで整えます。

①レイアウトの確認

②HTMLを書く

上から順にHTML要素を作っていく。

赤いボタンは前回作成したものを使い回します。

③CSSで見た目を整える

今回のポイントは、

☑️バックグラウンドに写真を入れる

div①{
    min-height: 500px;
    background-image: url(/* ファイル名 */);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

☑️テキストの中央寄せ

div②{
    text-align: center;
}

☑️SNSボタンの設置

ツイートボタンは、ここから取得できます。

↓こんな感じ

Tweet

Facebookいいねボタンは、ここから取得できます。

↓こんな感じ