ABCウェブエンジニアblog

Webデザイナー/エンジニア/講師のホームページ・ウェブサイト制作の備忘録

【HTML/CSS】Web制作入門記事まとめ、コーディング基礎固め!

ウェブデザイン入門、HTML/CSS/JSステップ記事まとめ

前回、2020年振り返りということで、アクセスの多い記事をまとめてご紹介しました。

webabc.hatenablog.jp

 

年明け初投稿の今回も、引き続きまとめ記事シリーズ第2弾。

Web制作を学ぶ上で役立つ記事をなるべく学習ステップ順にまとめていこうと思います。

入門したての方や、学習中の方などのお役に立てれば嬉しいです。

是非ご参考ください。

 

 

Web制作入門ステップ順、記事まとめ

当サイトでは、いわゆる入門書などに掲載されてるような内容より、少し角度の違う、実際のニーズに沿った記事が多いかと思います。

▼入門書籍としては間違いのない決定版。

 

【HTML/CSS】初心者向け!コーディングでよく使うタグ、プロパティまとめ

webabc.hatenablog.jp

最初のステップとしては本当に基本のHTMLタグ、CSSプロパティをまとめた記事をご紹介します。

クイックリファレンス代わりにブックマークなどしていつでも見返しながら、サイト制作に役立てて貰えたらと思います。

 

【HTML/CSS】クラスとIDの使い分け方、違い

webabc.hatenablog.jp

入門者がまず迷うであろう、クラスとIDの違いについての解説記事です。

 

【HTML/CSS】class名に使える英単語

webabc.hatenablog.jp

学びたての方や英語に慣れてない方は、コーディングの技術的な部分ではなく、クラスの名前の付け方なども迷いがちなところです。

Web制作ではよく使われる英単語が多く存在します。

迷いそうな時はこちらを見返して、英単語の知識としても蓄積して頂ければ幸いです。

 

CSS】marginとpaddingの余白の違い 

webabc.hatenablog.jp

Webデザインにおいて余白のコントロール、理解は非常に大切な要素であると同時に、つまづきやすいポイントでもあります。

図解して解説してるので、確実に理解してステップアップして頂きたいところです。 

 

 【HTML/CSS】画像やブロックを中央揃えにしたい!!のに出来ない時に見る記事 Part.1「左右センタリング編」

webabc.hatenablog.jp

このあたりも基礎の基礎、レイアウトをマスターする上での第1歩の記事です。左右の中央揃え編となってます。

 

【HTML/CSS】横並びにしたいならdisplay: Flex;

webabc.hatenablog.jp

レイアウトを自由自在にマスターするためのネクストステップ、Flexの記事です。

Flexの設定例を一覧で挙げているので、ブックマークして何度も見返して役立ててもらえたら思います。 

 

【HTML/CSS】画像やブロックを中央揃えにしたい!!のに出来ない時に見る記事 Part.2「上下センタリング編」 

webabc.hatenablog.jp

Flexを用いた天地中央揃えの解説記事。内容としては先のFlex内のひとつの設定例を紹介した記事となってます。

よくあるレイアウトのひとつかと思うのでご参考頂ければ幸いです。

 

【HTML/CSS】画像の上に文字など要素を重ねて表示。position: relative/absolute。

webabc.hatenablog.jp

Flexに続いて、positionについての理解が深まればかなりレイアウトマスターに近づくと思います。

要素を重ねたい時にはabsolute。この記事を参考に着実に身につけて頂きたい知識です。

 

基礎を固まったら実践!ネクストステップ 

ここからはさらに実践的な応用技術記事をご紹介します。

ハンバーガーメニューに、レスポンシブ、JSライブラリによるスライドショー。ここまで出来れば初心者は卒業と言っていいと思います。

 

【HTML/CSSハンバーガーメニューPart.2「CSSのみでシンプル実装コード編」 

webabc.hatenablog.jp

 

 レスポンシブのviewport設定とスマホの解像度の理解

webabc.hatenablog.jp

 

JavaScript】Swiper.jsを使ってjQuery要らずのスライダー

webabc.hatenablog.jp

 

【HTML/CSS】爆速コーディング、簡単なEmmetのススメ 

webabc.hatenablog.jp

 

Web制作ステップにはゴール無し

基礎を固めて初心者卒業しても、年々Webの業界は進化していきます。

覚えた知識が使えなくなって1からまたアップデートが必要になることすらあります。

中級、上級以上の方々も気を抜くとどんどん技術が枯れていってしまうのです。

 

ですので、Webデザイナー、エンジニアの方は自分なりの方法で情報収集をして、時代のニーズや新たな技術にアンテナを張っておく必要があります。

 

このサイトではそういった私自身の情報収集の蓄積としている面もあるので、今後も役立ちそうな記事があれば是非キャッチして頂ければ非常に嬉しいです。

 

▼HTML/CSS以上にJavaScriptは進化の目まぐるしい分野。

▼コーディングだけでなく、Webデザインにおいての参考見本としては1冊手元に置いておくと助かる書籍です。必携!

 

 

最後までお読み頂き、ありがとうございました!