Programing beginner by koala

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

前回の続きになります!

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

今回も手を動かしながら、どんどん行きましょう(^^)

Contents

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

この部分も、背景色などがついていて、複雑そうに見えますが「文字だけ」を考えると、意外とシンプルな部分ですよね!

早速コードを見ていきたいと思います。

上記のタグは下記のようなイメージになっておりますm(_ _)m


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

そこまで難しいポイントではないですね!ちなみにアイコンはFontAwesomeを使用しています。

4つのリストが横並びの部分

さて、ここが一番難しい部分ではないでしょうか。というか、私が一番苦労した部分でした(^_^;)

ただ、htmlでのやることはシンプルで、<li>タグにてリストを作ってあげればOKなのです。まずはコードは下記の通りです。

こうやってずらーっとコードが並ぶと、「うぉっ!!」って思ってしまいますが、画像を元にイメージしてみると、意外とシンプルです(^^)


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

一番右が、スペースがなかったもので<ul>タグが端っこになってしまいましたが、<ul>タグと<li>タグはセットで、<ul>タグが親要素、つまり<li>タグは<ul>タグに囲まれた感じになりますので、間違えないようにしてください。

図の通りですが、すべてを<div class=”last-colum-all“>で囲み、あとは、それぞれリストを作っていくだけですね!

一番右に関しては、アイコンとリストをすべて<div class=”last-colum4″>で囲み、アイコンとリストを分けて記述しました。別々にクラスを設けていた方が、後にデザインがしやすくなります。

また、SNSのアイコンは、FontAwesomeを使用しています。

フッターの部分

ちょっと長くなりましたが、footerの部分もシンプルなので、このままいっちゃいましょう!!コードは下記の通りです。

こんな感じになってればOKです!

※アイコンのところが縦並びになってますが、動画で横並びにする方法について説明しています。参考にしてみてください。

なんとなく見えてきましたね!後はこれに、デザインをしていきます。

というわけで、次回からはCSSに移ります(^^)

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

About me

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

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

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

>>続きはこちら

今日の名言

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

 

今日の名言

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