#5 progateでHTMLを学んでwebエンジニアを目指す!~flexbox編~

HTML&CSS
この記事は約5分で読めます。
スポンサーリンク

フロントエンドエンジニアを目指して勉強中の当ブログ管理人。

今回も勉強した内容を記録していきたいとおもいます。

くま
くま

ちなみに勉強開始から5日目だよ

webエンジニアへの道

webエンジニアを目指して勉強する当ブログ管理人の記録です

progate学習記録

プログラミングのオンライン学習サービス[progate]を使って学習した記録です

学んだコース

今回修了したコースはprogateの【HTML&CSSflexbox編】。

内容は今までで一番短く、フレックスボックスの使い方のみの短いコースでした。

今回でprogateのHTML&CSSのコースはすべて終了。勉強開始から5日で終わらせることができました

今後はprogateのjqueryコースをやるか、参考書でHTML&CSSを勉強していくか悩んでいます。

学んだ内容をアウトプット!

毎回恒例、「勉強の区切りでアウトプットとしてオリジナルページを作る」です。

ワイヤーフレームを作ってみた

今回もなんとなくでワイヤーフレームを作ってみました。

ただ、今回もワイヤーフレームとは違うレイアウトになっちゃっています。ワイヤーフレームを作る段階である程度「どうやって実装するか」を考えていないと今の自分ではできないレイアウトもありそう。

今回は学んだ内容であるflex-boxを使う縛りをしていたので、実装不可となりレイアウトを変えました。

作ったオリジナルページ

今回は私の趣味を紹介するページを作ってみました。

レスポンシブデザインに対応させたのでスマホやタブレットでもレイアウトが崩れず表示されると思います。

追記:幅の狭いスマホだと崩れます笑 まだまだ勉強不足ですね。。

くまの趣味

progateを始めて5日目でこんなものが作れるようになりました!

ヘッダーやフッターは何回か作ってきたので、だんだんと効率よく作ることができるようになってきました。

また、paddingやmarginを考慮したコーディングがなんとなくわかるようになってきた気がします。

これからもどんどん練習していきます

学んだ内容の備忘録(HTML&CSS)

今回のコースはflex-boxに対してだけだったので、ほぼそれらの情報になります。

flexboxとは

flexboxをcssで設定することで要素を簡単に並べられるようになる。

折り返しや要素の幅も自動設定することができるので、レスポンシブデザインが簡単にできるしcssの設定も少なくてわかりやすい。

ブログカードや飲食店のメニューなど、コンテンツを並べて表示したいときに使えそう。

子要素を横並びにする

親要素にflexを設定することで、その親要素の子要素が横に並びます。

floatで横に並べるときは並べたいもの自体に設定していたけどflexは並べたいものの親要素に設定するので注意。

<div class="parent">
   <div class="child">
      横に並ぶ
   </div> 
   <div class="child">
   横に並ぶ
   </div> 
</div>
.parent{
   display:flex;
}

横並びにした子要素の幅を調整

flex:auto設定することで横並びになった子要素が均等に幅を持つように自動で伸縮する。

親要素ではなく伸縮させたい子要素に設定するので注意。

.child{
   flex:auto;
}

子要素を折り返して並べる

子要素に幅を持たせているとき、横にならんだ子要素の幅の合計が親要素の幅を超えないように自動で折り返させる設定ができる。

これは折り返させたい子要素を持つ親要素に設定するので注意。

これを設定した後、子要素の幅をメディアクエリで指定すれば簡単にレスポンシブデザインができる。

  • パソコンなら横に3つ (子要素の幅33%)
  • タブレットなら横に2つ (子要素の幅50%)

といった具合。幅によって自動で折り返されるので、幅を変えるだけでOK

.parent{
  flex-wrap:wrap;
}

縦に並べる

デフォルトでは子要素が横に並ぶが、縦に並べることができる

スマホ用表示などで縦に並べて表示したいときに使う。

これは並べたい子要素の親要素に設定するので注意。

.parent{
   flex-direction:column;
}

リセットCSS

ここからはflex-boxから離れます。

リセットCSSはprogateには載っておらず、ネットで得た情報。

そもそも、ブラウザにはあらかじめある程度のデフォルトのCSSが設定されているらしい。

このあらかじめ設定されたCSSをリセットするためにリセットCSSなるものを始めに読みこむ。

これによって

  • ブラウザごとのデフォルトのCSSの違いを無くす
  • 余白設定などによるレイアウトのしづらさを解消

をする。

特に、要素にはpaddingやmarginが勝手に設定されていることがある。これが原因で意図しない余白が空いて悩むことがあった。

知るまではなんとか自力で[margin:0 0]をいちいち打ち込んでいたが、リセットCSSを読む設定を済ませたほうが楽

読み込む方法は、リセットCSSを用意して普通のcss同様にhead内にlinkで書くだけ。

リセットCSSはググるとたくさん出てくるのでよく使われているものを選べばよさそう。

まとめ

今回でprogateのHTML&CSSコースをすべて終えました。

終えた感想としては、さくさく勉強することができましたが細かい部分などはあまり触れられていない印象です。

プログラミング経験がある身としては「なんでこうなるの」という部分が多く、解説がもっとあるとよかったと感じました。

ただ、本当の初心者に対してはとりあえず自分でwebページを作るという感触を学べるのでいいのではないかと思います。

実際にprogateで自分オリジナルのページを作れましたし、いい勉強になりました。

これからも頑張っていこうと思います。

コメント

タイトルとURLをコピーしました