HTMLとCSSの基礎だけでWebサイトを作る！ラスボスfloat,flexbox【学習7日目】

CodeCampデザインマスターコース学習中の藤本です。

前回まででなんとなくHTMLとCSS使って文字や画像を表示させてそれっぽいサイトを作るまではできるようになりました。

学習５日目で作ったサイトはこちらから。

さあ、HTML・CSSもそろそろ終盤です。

タイタニックでいうとディカプリオが沈んだところくらいです。

長かった（？）HTMLとCSSの学習も最後になってきました。

あと一回でこのシリーズは終わるのでお付き合いくださいね。

さてここまで習得した技術を使うと、文字や画像のブロックを作り縦になんとなく表示させることができます。イメージだとこんな感じ。

ヘッダー、フッター・・・等うまく活用すればいいので簡単に表示させられました。簡単だぜ！ちょちょいのジョイやで！

問題は次・・・

文章や画像のブロックを複雑な場所に整理して表示させたい場合。

（イメージこんな感じ↓）

なんでそうなんねん・・なんで並ぶねん・・・・

縦、真ん中（横に３つ）・・・下にもブロックが・・・どうなってるんだ・・・・絵にすると簡単そうですよね・・・これがまあまあ初心者には難しいんですよ。太字にしちゃうくらい難しいんですよ。

このブロックの位置を整理してくれるCSSがfloatもしくはflexboxです。

理屈はわかるんだけど、最初にやり始めて感じたこと・・・

これが一番難しい気がする＼(^o^)／うまく＼(^o^)／いかないヨ＼(^o^)／

正直文字をどこに置くか、色を変えるか、画像を貼るかとかはサクサク進みました。

最後の最後でこんなラスボス（float,flexbox)に出会うなんて。

バイオハザードで一回倒したのに復活するラスボスいましたよね。（どれだったっけ・・・）

そんな感じですわ。もう心折れますわ。ぼきぼきのバキバキですわ。

ここまで頑張って技術習得した感じなのに、ここで挫折しそうになるという。

私はレッスンを予約しました。（そっと・・・予約ボタンを押したのです）

考えて考えてそれでもダメならアイテムを使うしかない・・・ラスボス戦に向けてレッスンを使おうという気持ちでした。

書籍でもfloat、flexboxを扱っていたりしますが、こればっかりは実際にコード書いて表示させて、第三者（現役エンジニア等のプロ）に説明してもらわないと理解が難しいのではないかと思いました。

もちろんサポートなしに習得できる方もいらっしゃると思いますが、私のような０ベース初心者の場合は「なんでここがうまくいかないの？」に対する答えをもらえた方が理解は早くなります（涙）

無事レッスンを受けfloatもflexboxも理解・・・。

これで置きたい場所にブロックを置けるようになりました。ここまでのスキル感があればいよいよ最終課題料理レシピ紹介サイトの作成に突入できます。

ここまで入念に準備してきました。企業のようなかっこいいWebサイトを作るためには

・HTMLの基礎理解（文章、画像、ブロックの配置、文章の改行やリストの作成、ヘッダーフッター等の理解）

・CSSの基礎理解（文字や背景色の変更、サイズやフォントの変更、文字・画像の装飾方法、配置の方法などなど）

・自分で解決しようとする気持ち

・折れない心

が必要です。特に最後の２つは重要で、コードを書いて表示されない！なんてことは日常茶飯事なので「自分で解決しようと努力する姿勢」が大事になります。これはエンジニアやデザイナーを目指す上でも必須の資質ですね。

そして折れない心・・・。ちょっとしたことでエラーが出たりうまくいかないこともありました。エラーが出ても前向きに「改善するゾ」「がんばるゾ」という気持ちは常に必要だと思います。

これまでの7日間で私は上記4つを手に入れました。

Macすら触ったことがなく、シフトキーの場所すら知らなかった初心者の私はもういません。

満を辞して最終課題に挑戦します。

最終課題・・・それはどうみてもクックパッ●・・・・・

集大成としてクック●ッドを作ります。

次回HTML,CSS学習最終回。

未経験知識０ベースからそれなりに整ったかっこいいサイトは作れるのでしょうか。

次回もご飯のお供にご覧ください。