どうも！プログラミングスクールシャベルエンジニア、代表のスプ兄です！
今回はプログラミングを始めた人がよく使う「Progate」についてお話ししたいと思います。
Progateは初学者さんには非常におすすめのサービスで、基本をしっかりと学べるプラットフォームですよね。僕自身も最初はProgateでたくさんのことを学びました。
しかし、実際にエンジニアとして働くようになると・・・
Progateの学習だけでは足りない！実務ではこうするな〜
と感じるギャップがいくつか出てきました。
今日は、その中でも特に重要な部分を3つに絞って紹介したいと思います。
- 即戦力として活躍できる
- 効果的に学習できる
１.Flexboxを重視すべし（floatはそんなに使わない！）
Progateを使って学習を進めていると、「float」というCSSプロパティに頻繁に出会うことが多いと思います。
floatはWeb制作の領域で非常によく使われてきた書き方で、
特に要素を横並びにするためによく使われていました。
ですが、今や実務の現場ではこのfloatが使われることはほとんどありません。
なぜなら、floatには実務で使う上でいくつか問題があったからです。
例えば要素が親要素からはみ出したりやレイアウトが意図しない形で崩れることがあります。
もちろん対策はあるのですが、コードが複雑になりがちです。
対策は、Flexboxを使うこと！
Flexboxは、webページのレイアウトを非常に柔軟かつ効率的に作成することができるCSSの一部です。
要素を中央に配置したり、スペースを均等に割り振ったりするのがとても簡単になります。
ですので、Progateの最初の段階でfloatを学ぶことは確かに基本を理解するためには有益ですが、実務で本当に役立つのはFlexboxの知識なのかなと思います。
特にProgateの最後にあるFlexbox編をしっかりと学んでおくことを強くおすすめします！
Flexboxの使い方をマスターすることで、webデザインの幅が大きく広がり、実務でもすぐに活用できるスキルとなります。
２.もっと深く擬似クラスを理解すべし！
Progateを使って学習を進めていると、「hover」などの擬似クラスに出会うことが多いですよね。
hoverは、マウスを要素に重ねたときにスタイルを変更するための便利な方法です。
しかし、実務の現場ではもっと多くの擬似クラスを使うことが多いんです。
要素の順番に対する擬似クラス：「last-child」「nth-child」など
コードがシンプルになるだけでなく、メンテナンスも楽になります。
「nth-child」を使えば、リストの特定の要素だけにスタイルを適用することができます。
例えば、2番目ごとに異なる背景色を設定することも可能です。
このような細かい制御ができることで、より綺麗で保守性の高いコードにすることができます。
コンテンツの前後に矢印のようなアイコンを追加したり、装飾を追加したりする場合：「before」・「after」
「before」や「after」は、すぐに使いこなせるようにならなくても大丈夫です。
重要なのは、これらの擬似要素が何を意図しているのかを理解することです。
意図がわかれば、必要なときに使い方を調べてすぐに活用できるようになります。
Progateで基本を学びつつ、実務でよく使われる擬似クラスや擬似要素も少しずつ理解しておくことが、エンジニアとしてのスキルアップにつながります。
ぜひ、いろいろな擬似クラスを試してみて、その便利さを実感してください。
３.高さの設定は柔軟に！
Progateを使って学習を進めていると、高さの指定を絶対値（例えば30pxなど）で設定することが多いですよね。
最初に学ぶときは確かにわかりやすい方法ですが、実際にデザインをする際には注意が必要です。
実際に高さを絶対値で設定すると、思わぬデザイン崩れが生じることがよくあります。
特にレスポンシブデザインが必要な近年のwebサイトでは、画面サイズやコンテンツの量に応じて柔軟に高さが変わることが求められます。
HTMLでは通常、デフォルトで高さが子要素の大きさに合わせて自動的に調整されるようになっています（これは「height: auto」が適用されているためです）。
そのため、特別な意図がない限り、高さを設定する必要はありません。
要素の高さが自動で調整されることで、コンテンツが増減してもデザインが崩れにくくなります。
ただし、もちろん高さを設定する必要がある場合もあります。
高さを設定する必要性について
例えば、ヘッダーやフッターのように一定の高さが必要な要素については、高さを設定することが求められることもあります。
この場合でも、闇雲に絶対値を使うよりは、柔軟に対応できる方法を検討しましょう。
例えば、Flexboxを使えば、子要素の高さを揃えたり、コンテナ全体の高さを均等に分配したりすることが簡単にできます。
画像の縦横比を統一したい場合:「aspect-ratio」プロパティを使うこと
これにより、異なる画面サイズでも画像が正しい縦横比を保つことができ、デザインが崩れる心配が少なくなります。
高さの設定は必ずしも絶対値で行う必要はなく、柔軟に対応できる方法を選ぶこと
適切なプロパティやテクニックを使うことで、より美しいフロント実装を実現しましょう！
まとめ
より実務に近い形でスキルを高めるための3つのポイントは以下の通りです。
1.Flexboxを重視すべし
→レイアウトの問題を解決するのに役立つ！
2.擬似クラスをもっと深く理解すべし！
→last-childやnth-childなどの擬似クラスを活用することで、より細かい制御が可能。
→beforeやafterといった擬似要素の意図を理解することも大切！
3.高さの設定は柔軟に！
→height: autoに任せ、必要な場合はFlexboxやaspect-ratioを使って柔軟に対応を！
これらのポイントを押さえることで、より即戦力として活躍できるスキルが身につきます。
Progateで基礎を学びつつ、実務に役立つ知識を補完していくことが重要です。
