Programing beginner by koala

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

いよいよ最後のフェーズにやってきました!ワクワクしますね(^^)

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

私にとって、一番難しい箇所ではありましたが、いろいろ試行錯誤した中でも、一番シンプルで分かりやすい方法をお伝えしていきますので、安心して付いて来てくださいね!

では、早速いきたいと思います。

Contents

最後のリストの部分

まず、この部分でやるのは、

●リストを横並びにして、中央寄せすること。
●一番右の部分は、アイコンは横並びにすること
●文字の色や余白などの調整

ですね!では、一つづいきたいと思います!

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

毎度のことながら、display: flex;にお世話になりました。これで一件落着です!

あとはもう、体裁を整えるだけですね!ゴールはすぐそこです!!

3.リストの黒丸を消し、文字の色を変える

2.アイコンのサイズや色を変更しちゃいましょう!)

4.余白の調整をしてみましょう!

フッターの部分

この部分は、

●横並びにして位置の指定
●アイコンの横並び
●ボタンのデザインなど

また、フッターの上に薄ーい線が入っているので、それも入れていきましょう。

一つづつ見ていきましょう!

1.横並びと位置の調整を一気にやっちゃいましょう!

おなじみのdisplay: flex;を使用!本当に便利ですね~

2.アイコンを回り込ませちゃいましょう!

3.ボタンをデザインしていきましょう!

4.ボーダーからの位置調整

5.文字の色など変更!

お疲れさまでした!完成です(^o^)

 

お疲れさまでした!サイトの完成です!!以上で、サイト作成の流れを終了します。

ちなみに、冒頭でもお伝えしました通り、この方法が最善かどうかは、正直、初心者の私には分かりません(^_^;)

しかしながら、初心者であるがゆえに、シンプルで分かりやすい説明は出来たのではないかと思います。

この後も、いろいろなサイトの模写にチャレンジしながら、プログラミングスキルを磨いていきましょう!

最後までお付き合いくださり、ありがとうございましたm(_ _)m

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

About me

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

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

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

>>続きはこちら

今日の名言

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

 

今日の名言

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