こんにちは、Autumn（オータム）です。
「WEB制作で実際によく使うポイントだけ知りたい、、」
そんな方のために、今回は現場でよく使うHTML・CSSのマスター必須項目を解説していきます。
この記事を書いている私の経歴
・前職では住宅会社の営業マンとして4年間勤務
・働きながらプログラミングの独学を半年間継続
・デザイン会社にフロントエンドエンジニアとして転職
・現在はWEB制作とWEB広告運用のサポートに従事
解説の前に、HTML・CSSの勉強をこれから始める方は先に勉強手順を理解しておくことをオススメします。勉強の流れを掴んでからの方が目的意識が出てモチベーションも出やすいです。
マスター必須項目HTML編【5項目】
まずは、HTMLの解説から始めていきます。
HTMLの中でも特に重要な項目はこの5つです。
・改行
・リンクを貼る
・表の作り方（tableタグ）
・お問い合わせフォーム（inputタグ）
ブロック要素・インライン要素
HTMLで使用する全てのタグは、ブロック要素・インライン要素のどちらかの属性を持ちます。
それぞれの属性の特徴を理解しておかないと、余白が付けれなかったり、中央寄せができなかったりなど、CSSを実装する際に問題が出てきます。
それぞれの主な特徴は以下の通りです。
・要素の幅はブラウザ幅いっぱいになる
・要素同士が縦に並ぶ
・幅（width）と高さ（height）が指定できる
・余白（padding・margin）が指定できる
・要素の幅は中身と同じ大きさになる
・要素同士が横に並ぶ
・幅（width）と高さ（height）が指定できない
・余白（padding・margin）が指定できない
より詳細はこちらの記事にまとめています。
改行
WEB制作案件だと長文のテキストを入れることや、デザインデータによって改行ポイントが決められていることがあります。そんな時にキリよく改行する方法を知っておくと便利です。
やり方は以下の２パターンです。
・改行ポイントでbrタグを入れる
より実践レベルでいくと、レスポンシブ対応で改行のオンオフを切り替える方法も覚えておくと便利です。詳しくはこちらの記事で解説しています。
リンクを貼る
WEBサイト内のページ遷移や、外部サイトへのリンクを貼るには「aタグ（アンカータグ）」を使います。特にページ内リンクはSEOの内部対策にも必須です。
また、CSSを使ってアンダーラインを消したり、遷移先のページを別タブで表示したりなど、細かい部分も解説していますので参考にして頂ければと思います。また応用編として、サイト内を遷移する時に使えるボタンの作り方も解説しています。
表の作り方（tableタグ）
コーポレートサイトなどでは商品の比較やデータをまとめて表示させたい場合があります。画像コピペで済む場合もありますが、コードで作成できるようになった方が後々修正があった時に楽ですので、覚えておいて損はないです。
・tableタグ：表を作成する宣言をする
・trタグ：列
・thタグ：項目名
・tdタグ：項目ごとの内容
お問い合わせフォーム（inputタグ）
ホームページで必ず必要なお問い合わせフォームもHTMLで作成することができます。
wordpressであればプラグインで作成することもできますが、タグの種類や使い方は覚えておく必要があります。
・formタグ：フォームを作成する宣言をする
・inputタグ：テキスト入力欄やチェックボックスを作成する
・textareaタグ：複数行のテキスト欄を作成する
・labelタグ：項目の名前をつける
こちらも実例を使って解説をしているので参考にしてください。
マスター必須項目CSS編【7項目】
続いてCSSの重要ポイントを解説していきます。
今回はポイントの特徴ごとに大きく3つのグループに分けました。
・配置（2項目）
・アニメーション・エフェクト（2項目）
配列
横や縦に要素を配列させたり、左右・中央に揃えたりなど、CSSの中で最も使用頻度が高いかつ重要なポイントです。
この3つはどれも必ず使用するものなので、しっかりマスターしておきましょう。
・float：要素を横に配列する・flexboxよりは使用頻度少なめ
・text-align：中央や左右に要素を揃えることができる
それぞれ解説するとかなりのボリュームになるので、詳細は下記の記事をご覧ください。
【flexbox】
「flexbox」の実践で使うところだけ解説【CSS学習】
【float】
「float」プロパティの使い方を簡単解説【初心者向け】
【text-align】
CSSプロパティ「text-align」 の使い方解説
また、flexboxの応用編としてレイアウトが崩れないアーカイブリストを作成する方法も解説しています。お知らせやブログなどの一覧を作成する時に役に立ちますのでぜひ。
配置
CSSを駆使すれば、要素の位置を自由に動かしたり、固定して追従させたり、チェックマークなどのアイコンを自分で作成することができるようになります。
このグループで使うプロパティはこちらの2つ。
・擬似要素（before / after）
この2つは案件でバリバリ使いますので、必ずマスターしておきましょう。
こちらもかなりのボリュームがあるので別記事にまとめてます。
・positionの基本
CSSプロパティ「position」の使い方を解説
・ヘッダーを追従させる「position: fixed ;」
【CSS】「position: fixed;」の使い方を実例解説
・サイドバーを追従させる「position: sticky ;」
【CSS】スクロールすると文章や写真が固定されて追従するエフェクトの作り方解説！
・擬似要素（before / after）
CSSでよく使う擬似要素「::before」「::after」をカンタンに解説
アニメーション・エフェクト
CSSは簡単なアニメーションも実装することができます。
CSSアニメーションを使う時によく使うプロパティはこちらの2つ。
・box-shadow
「transform」は要素を移動させたり、回転させたり、拡大縮小させたり、様々な使い方ができる便利なプロパティ。アニメーション時間を設定する「transition」と一緒に使うことが多いのが特徴です。
「box-shadow」を使うことで要素に影をつけて立体的に見せることができます。応用編として、ホバーするとボタンを押しているようなアニメーションも紹介しています。
また、ホバーアクションを利用したボタンのアニメーションの具体例を紹介しています。この3つを覚えれば基本的には問題なしです。
今回のポイントおさらい
最後に、今回の記事のポイントおさらいです。
・改行
・リンク（aタグ）
・表の作り方（tableタグ）
・お問い合わせフォーム（inputタグ）
・flexbox
・float
・text-align
・position
・擬似要素（before / after）
③アニメーション・エフェクト
・transform
・box-shadow
これらの重要項目をしっかり抑えて、エンジニア転職へスタートダッシュをかけましょう。
また、エンジニア転職までの手順の全体像がまだ掴めていない方向けに、未経験から転職までのロードマップも用意しました。どんなことも目標設定がとても重要です。自分が今どこまで進んでいるかの確認にもなりますので、ぜひ参考にしてください。
プログラミングの勉強は時間がかかりますが、計画的に続ければ必ず上達していきますので、コツコツと積み上げていきましょう。
読んでいただき、ありがとうございました！
