Programing beginner by koala

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

前回の続きです。

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

さて、今回は「旅を贈ろう」、その下の「いつも完璧な贈り物」の部分に行きたいと思います。一緒に手を動かしながら行きましょう(^^)

Contents

「旅を贈ろう」の部分

前回同様、まずはコードを紹介し、説明していきたいと思います。

メインイメージの部分なので、クラス名を<div class=”main-image“>として、「ギフトカードを登録」のボタンまで包んでみました!

背景は、CSSにて指定していくので、ここではそこまで難しいことはないかなと思います。

実際に見てみると下記の通りになります!(前回のheaderの部分も含まれています)

まだまだサイトには程遠いですが、進んでいきましょう!

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

この部分はちょっと難しい部分かもです。先にコードを見ていきたいと思います。

ちょっと分かりやすく、画像を用いて説明してみます!


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

まず、「いつも完璧な贈り物」の部分を<h2>タグ。

そして、それぞれの「アイコン+説明」を、mail、time、worldというdivクラスで囲み、見出しを<h4>タグ、説明文を<p>タグにしました。

さらに、「アイコン+説明」の3つを<div class=”second-colum“>で包み込みました笑

また、アイコンに関しては、FontAwesomeを使用しています(好きなアイコンを選んでください♪)!

だんだんとそれらしく?なってきました!

実際にリロードしてみて、上記のようになっていたらOKです!だんだんと、それらしく?なってきましたね(^^)

今回はここまでです!お疲れさまでしたm(_ _)m

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

About me

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

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

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

>>続きはこちら

今日の名言

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

 

今日の名言

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