Programing beginner by koala

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

さて、前回まででサイトの骨組みが完成しました(^^)

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

今回からCSSに入り、早速デザインしていきます。CSSに関しては、ほぼほぼコードのみになってしまったので、動画の方が参考になるかもです(^_^;)

デザイン通り反映されると、なんだか出来るような気がしてきて、とても楽しくなります!楽しみながらいきましょう(^o^)

ちなみに、CSSでは、htmlで使用したクラス名を使用していきます。自分のクラス名と見比べながら、間違えないように記述していってください。

ヘッダーの部分

では、上から行きたいと思います!ヘッダーでやることは、

●アイコンと検索ボックスを横並びにする
●リストを横並びにする

の2つになるかと思います。また、検索ボックスももう少しきれいにデザインしたいですね(^^)

では、まずは左から行きたいと思います。

1.アイコンと検索ボックスを横並びにする

いろいろな横並び要素がありますが、今回は、flexを使いました。

2.ついでに入力フォームとボタンも横並びにしておきます。

3.フォームボックスのサイズとボーダーの色を変えます。

4.ボタンの背景、ボーダーの色などを変える。

続いて、右のバーに移りましょう!

1.リストを横並びにしよう!

2.文字の色などを変える

さぁ準備が整ったので、これらを横並びにしよう!

1.左の部分に、右を回り込ませる

2.右の部分を右に寄せる

旅を贈ろう。の部分

この部分でやるこは、意外と簡単で、

・背景を入れること
・文字の位置を設定すること

の2つですね!早速行きたいと思います。

。。。とその前に、上記で「float」を使っているので、まずは解除しちゃいましょう。

1.floatの解除

1.背景画像を入れてみよう!

2.文字の位置と色をデザインしてみよう!

h1タグ

pタグ

3.ボタンをデザインしてみよう!

出来る限り本場サイトに寄せてみました笑

なかなかサイトっぽくなってきましたね!


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

上記のようになっていたらOKです!どうでしょうか?なかなかサイトっぽくなってきましたね(^^)

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

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

About me

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

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

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

>>続きはこちら

今日の名言

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

 

今日の名言

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