イイダリョウのブログ。JS以前、「書ける前に読む!HTML、CSS、JSの書式」*1という連載記事を書きました。コードを書くにはまず読める方が先という考えから、コードの読み方をHTML→CSS→JSにステップアップ方式で解説しました。当ブログでは様々なテーマを連載していますが、そのどこからでもたどり着けるような記事にしたかった。この記事はその内容を一つにまとめた物です。当ブログのあらゆる記事からいつでもたどり着ける「Webの基本」のメルクマールです。本記事の概要に当たる内容をプログラミング実況してみました。ご覧ください!※参考:CodePenでHTML、CSS、JSを体験しよう【クモコツ一人もくもく会-1】www.youtube.com動画上で作ったCodePenはこちら。「書ける前に読む!」の第一回は全体の概要編です。Webの仕組みを形作る「サーバサイド(バックエンド)」「クライアントサイド(フロントエンド)」の違い。フロントエンドを形作る3つの言語「HTML」「CSS」「JS」それぞれの役割分担を解説しています。第二回は「HTMLの基本」。Webの文書構造を司るHTML。その基本である「タグ」と「要素」。タグの中にある「属性」。属性の中でも大事*2な「id名」「class名」の解説。絶対パス、相対パスの説明。head要素、body要素などHTMLの必須要素にも触れています。第三回は「CSSの基本」。Webの見た目を司るCSS。その基本である「セレクタ」「プロパティ」「値」。プロパティの特殊系である「CSS関数」。様々なセレクタとセレクタ同士の優先順位を解説。付けすぎ注意な「!important」。「擬似クラス」と「擬似要素」。その他「属性セレクタ」「@ルール」なども解説しています。クモのようにコツコツとidr-zz.hatenablog.comJSの基本-前編(オブジェクト、関数、変数)第四回からはJS。JSは盛りだくさんなので前後編に分けてお送りする。前編では「オブジェクト指向」を形成する「オブジェクト(何が)」「プロパティ(どうなる)」「メソッド(どうする)」から始まりWebの特徴的なオブジェクト「DOM」を解説する。プログラミングに共通する概念である「変数」と「関数」も解説する。クモのようにコツコツとidr-zz.hatenablog.comJSの基本-後編(イベント、制御構造)第五回JS後編は「イベント」と「制御構造」を解説。イベントは「いつ」にあたる部分。「イベントハンドラ」と「イベントリスナ」の2つの書き方の違いについて。制御構造は「分岐」と「反復」。分岐は「if文」「switch文」、反復は「for文」「while文」を解説する。追記)すべての愛すべきjQueryerに送る。jQueryのその「次」へ進むための「生JS」「ライブラリ」「フレームワーク」の理解。CSSの延長上のカンタン書式で「こいつ、動くぞ」を体験させてくれたjQuery。先人の作ったプラグイン資産たち。この経験を糧に「壁」を乗り越える。クモのようにコツコツとidr-zz.hatenablog.comまとめこれを読んで「読めるぞ、私にもコードが読める!*3」となってくれれれば幸いです。その時点でWeb制作の門は開かれています!世の中のあらゆるWebサイトのコードはブラウザの開発ツールで見放題。世界はお手本の大海原です。コードを書くには環境構築は不要。テキストエディタで今すぐにでも始めることができます!もっというと「CodePen」などのオンラインテキストエディタを使えばテキストエディタのソフトすら不要です。APIの続きになります。ブラウザで音...2018-01-18周回遅れでもWebGLを事始める!canvas大地に立つ!!ブラウザでの3D(3次元)を表現する「WebGL」。全てのブラ...2017-10-25【CSSの基本】書ける前に読む!HTML、CSS、JSの書式-3Webサイトを形作っている言語「HTML」「CSS」「JS」。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。