【初心者必見】サイトの組み立て方⑥画像＆動画付き「過保護説明」
いよいよ最後のフェーズにやってきました！ワクワクしますね(^^)
☆サイト作成の大まかな流れ、それぞれの回でやることをまとめています↓
【保存版】超初心者のためのサイトの組み立て方！画像＆動画付き「過保護説明」
【保存版】超初心者のためのサイトの組み立て方！画像＆動画付き「過保護説明」
私にとって、一番難しい箇所ではありましたが、いろいろ試行錯誤した中でも、一番シンプルで分かりやすい方法をお伝えしていきますので、安心して付いて来てくださいね！
では、早速いきたいと思います。
Contents
最後のリストの部分
まず、この部分でやるのは、
●リストを横並びにして、中央寄せすること。
●一番右の部分は、アイコンは横並びにすること
●文字の色や余白などの調整
ですね！では、一つづいきたいと思います！
１．横並び、中央寄せを一気にやっちゃいましょう！
|
1 2 3 4 |
.last-colum-all{ display: flex; /*横並び*/ justify-content: center; /*中央寄せ*/ } |
毎度のことながら、display: flex;にお世話になりました。これで一件落着です！
あとはもう、体裁を整えるだけですね！ゴールはすぐそこです！！
３．リストの黒丸を消し、文字の色を変える
|
1 2 3 |
.last-colum-all li{ list-style-type: none; /*黒丸を消す（listタグに指定します）*/ } |
|
1 2 3 4 5 |
.last-colum-all li a{ font-size: 14px; /*文字の大きさ*/ font-weight: bold; /*文字の太さ*/ color: #C0C0C0; /*文字の色*/ } |
２．アイコンのサイズや色を変更しちゃいましょう！）
|
1 2 3 4 5 |
.icons a{ font-size: 20px; /*アイコンサイズ*/ color: #c0c0c0; /*アイコンの色*/ padding-right: 10px; /*アイコン同士の隙間*/ } |
４．余白の調整をしてみましょう！
|
1 2 3 |
.last-colum1,.last-colum2,.last-colum3,.last-colum4{ margin: 20px; /*それぞれのリストのマージンを15pxにしました*/ } |
|
1 2 3 |
.icons{ margin: 30px 0 0 30px; /*アイコンの上と左の余白30px*/ } |
フッターの部分
この部分は、
●横並びにして位置の指定
●アイコンの横並び
●ボタンのデザインなど
また、フッターの上に薄ーい線が入っているので、それも入れていきましょう。
一つづつ見ていきましょう！
１．横並びと位置の調整を一気にやっちゃいましょう！
|
1 2 3 4 5 6 7 |
.last-foot{ display: flex; /*横並び*/ justify-content: space-between; /*端っこにする*/ width: 70%; /*フッターの幅*/ margin: 0 auto; /*中央寄せ*/ border-top: 1px solid #f7f7f7; /*フッター上部の線*/ } |
おなじみのdisplay: flex;を使用！本当に便利ですね～
２．アイコンを回り込ませちゃいましょう！
|
1 2 3 |
.last-left p{ float: left; } |
３．ボタンをデザインしていきましょう！
|
1 2 3 4 5 6 7 |
.jbutton,.enbutton{ margin: 15px; /*それぞれのボタンに余白を上下左右に15px*/ background-color: white; /*背景色*/ border: 1px solid #f7f7f7; /*枠線の色や太さ*/ font-size: 1.0em; /*文字の大きさ*/ color: darkgrey; /*文字の色*/ } |
４.ボーダーからの位置調整
|
1 2 3 4 5 6 7 |
.last-right{ margin-top: 20px; /*右（ボタン）上部の余白*/ } .last-left{ margin-top: 20px; /*左の部分上部の余白*/ } |
５.文字の色など変更！
|
1 2 3 4 5 6 7 8 9 10 11 |
.last-left a{ color: #C0C0C0; /*左のaタグの文字の色*/ font-size: 15px; /*文字のサイズ*/ text-decoration: none; /*下線を消す*/ } .all-reserved{ color: #C0C0C0; /*All-reservedのところ*/ font-size: 15px; /*文字のサイズ*/ margin-top: 0px; /*上部の余白*/ } |
お疲れさまでした！完成です(^o^)
お疲れさまでした！サイトの完成です！！以上で、サイト作成の流れを終了します。
ちなみに、冒頭でもお伝えしました通り、この方法が最善かどうかは、正直、初心者の私には分かりません(^_^;)
しかしながら、初心者であるがゆえに、シンプルで分かりやすい説明は出来たのではないかと思います。
この後も、いろいろなサイトの模写にチャレンジしながら、プログラミングスキルを磨いていきましょう！
最後までお付き合いくださり、ありがとうございましたm(_ _)m
