クモのようにコツコツと

フロントエンドエンジニア イイダリョウのブログ。略称「クモコツ」

【HTML、CSS、JSの書式】これを読めばコードが読める!書ける!まとめ!(基本5+応用1記事)

以前、「書ける前に読む!HTML、CSS、JSの書式」*1という連載記事を書きました。コードを書くにはまず読める方が先という考えから、コードの読み方をHTML→CSS→JSにステップアップ方式で解説しました。当ブログでは様々なテーマを連載していますが、そのどこからでもたどり着けるような記事にしたかった。
この記事はその内容を一つにまとめた物です。当ブログのあらゆる記事からいつでもたどり着ける「Webの基本」のメルクマールです。

※目次:

Webの基礎知識

「書ける前に読む!」の第一回は全体の概要編です。Webの仕組みを形作る「サーバサイド(バックエンド)」「クライアントサイド(フロントエンド)」の違い。そしてフロントエンドを形作る3つの言語「HTML」「CSS」「JS」それぞれの役割分担を解説しています。

  • HTML:文書構造
  • CSS:見た目
  • JS:動作、変更

※参考:【Webの基礎知識】書ける前に読む!HTML、CSS、JSの書式-1 - クモのようにコツコツと

idr-zz.hatenablog.com

HTMLの基本

第二回は「HTMLの基本」。Webの文書構造を司るHTML。その基本である「タグ」と「要素」。そしてタグの中にある「属性」。属性の中でも大事*2な「id名」「class名」の解説。絶対パス相対パスの説明。head要素、body要素などHTMLの必須要素にも触れています。

※参考:【HTMLの基本】書ける前に読む!HTML、CSS、JSの書式-2 - クモのようにコツコツと

idr-zz.hatenablog.com

CSSの基本

第三回は「CSSの基本」。Webの見た目を司るCSS。その基本である「セレクタ」「プロパティ」「値」。プロパティの特殊系である「CSS関数」。 様々なセレクタセレクタ同士の優先順位を解説。
付けすぎ注意な「!important」。「擬似クラス」と「擬似要素」。その他「属性セレクタ」「@ルール」なども解説しています。

※参考:【CSSの基本】書ける前に読む!HTML、CSS、JSの書式-3 - クモのようにコツコツと

idr-zz.hatenablog.com

JSの基本-前編(オブジェクト、関数、変数)

第四回からはJS。JSは盛りだくさんなので前後編に分けてお送りする。
前編では「オブジェクト指向」を形成する「オブジェクト(何が)」「プロパティ(どうなる)」「メソッド(どうする)」から始まりWebの特徴的なオブジェクト「DOM」を解説する。
そしてプログラミングに共通する概念である「変数」と「関数」も解説する。

※参考:【JSの基本-前編】書ける前に読む!HTML、CSS、JSの書式-4 - クモのようにコツコツと

idr-zz.hatenablog.com

JSの基本-後編(イベント、制御構造)

第五回JS後編は「イベント」と「制御構造」を解説。
イベントは「いつ」にあたる部分。「イベントハンドラ」と「イベントリスナ」の2つの書き方の違いについて。
制御構造は「分岐」と「反復」。分岐は「if文」「switch文」、反復は「for文」「while文」を解説する。

※参考:【JSの基本-後編】書ける前に読む!HTML、CSS、JSの書式-5 - クモのようにコツコツと

idr-zz.hatenablog.com

JS応用編:生JS、ライブラリ、フレームワーク

(※2018/10/26 追記)

すべての愛すべきjQueryerに送る。jQueryのその「次」へ進むための「生JS」「ライブラリ」「フレームワーク」の理解。

CSSの延長上のカンタン書式で「こいつ、動くぞ」を体験させてくれたjQuery。先人の作ったプラグイン資産たち。この経験を糧に「壁」を乗り越える。これを私は「脱」ではなく「jQuery」と呼びたい!

※参考:【卒jQueryへの道】生JSとライブラリとフレームワークの理解 - クモのようにコツコツと

idr-zz.hatenablog.com

まとめ

これを読んで「読めるぞ、私にもコードが読める!*3」となってくれれれば幸いです。
その時点でWeb制作の門は開かれています!世の中のあらゆるWebサイトのコードはブラウザの開発ツールで見放題。世界はお手本の大海原です。
コードを書くには環境構築は不要。テキストエディタで今すぐにでも始めることができます!

もっというと「CodePen」などのオンラインテキストエディタを使えばテキストエディタのソフトすら不要です。そしてここにも世界のクリエイターが作る素敵なWebコンテンツのお手本コードの大宇宙が広がっています!

※参考:CodePen - Front End Developer Playground & Code Editor in the Browser

Web制作 やりたい時が 始め時!
さあ、Webクリエイターになろう!


※参考:サーバサイドについてもまとめました!
【WordPress、PHP、SQL文】Webデザイナーでもわかるサーバサイドの基本まとめ!(6記事) - クモのようにコツコツと

idr-zz.hatenablog.com

*1:ソルマック

*2:CSS、JSと紐づく目印になる

*3:シャア