Programing beginner by koala

【初心者必見】サイトの組み立て方⑤画像&動画付き「過保護説明」

さぁ、盛り上がってまいりました!笑

前回の続きで、今回のサイトで2番目に難しいところに行きたいと思います!(私の中で笑)

☆サイト作成の大まかな流れ、それぞれの回でやることをまとめています↓
【保存版】超初心者のためのサイトの組み立て方!画像&動画付き「過保護説明」

今回は、ちょっぴり複雑な横並び要素になります。早速行きましょう!

いつも完璧な贈り物。の部分

この部分でやることは、

●すべてを中央寄せにして、
●アイコン+説明の3つを横並びにする

ことですね。一つづつ行きましょう!

1.まずは<h2>タグを中央寄せにしよう!

2.では、横並び&中央寄せを一気にやっちゃいましょう!

この部分は、下記の記事を参考にしていただければ、サクッと出来るかと思います(^^)

【display:flex;が神】横並び要素まとめ!画像&動画付き「過保護説明」

display: flex;様様ですね!

3.それぞれの幅をもう少し狭めましょ!

中央寄せになったものの、それぞれの幅が横にびよーんと広くなってしまっていて、バランスが悪いですね(^_^;)

なので、それぞれの幅を狭めて、ついでに余白をいれちゃいましょう!

これで、第一ハードルクリアです♡

ギフトカードをもらったら。の部分

この部分は非常にシンプルです!ここでやることは、

●背景色を指定する
●文字やボタンの色、大きさ、位置の指定

これだけですね!一つづつ行きましょう(^^)

1.まずは背景色、文字の色、中央寄せを一気にやっちゃいましょう!

2.アイコンに余白を与える

なんだか上に詰まっているので、上に余白を与えましょう!

3.<h2>と<p>の文字の大きさを変えよう。

4.ボタンとデザインしてみよう!

5.一番下のリンクの部分の文字の色を変えてみます。

こんな感じになりました!


※クリックすると大きくなります!

もう、ほぼほぼ完成と言ってもいいのではないでしょうか?ここまで出来ると、ワクワクしてきますよね♪

次回は、一番難しかった「リストの横並び」です!がんばりましょう!

お疲れさまでしたm(_ _)m

人気記事【保存版】超初心者のためのWordPressテーマ自作方法!画像&動画付き「過保護解説」

About me

IT業界6年目にして、プログラミングの勉強を始めたkoalaです。

プログラミング用語が難しすぎる!ということで、初心者が初心者に解説するという型破りなブログを開設してみました。

専門用語少な目、分かりやすくをモットーにしています。

>>続きはこちら

今日の名言

クリックすると、あなたの心に響く誰かの名言が表示されます♪

 

今日の名言

 
※あなたの名言募集しています!詳細はこちら