イイダリョウのブログ。【HTMLの基本】書ける前に読む!HTML、CSS、JSの書式-22017-10-25【HTMLの基本】書ける前に読む!HTML、CSS、JSの書式-2HTMLWebサイトを形作っている言語「HTML」「CSS」「JS」。この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める(インプット)と、自分でゼロから書く(アウトプット)ときの引き出しになる。書ける前に読む!*2と、いうことでコードを読むために理解しておくといいHTML、CSS、JSの基本書式をまとめる。第2回は「HTMLの基本」編。第1回(Webの基礎知識)にも書いたようにHTMLは文書に「タグ」という印を付けて構造化する「マークアップ言語」だ。このタグの解説に入りたいところだが、まずはその前に「コメント」について解説する。コメントHTMLのコードにはコメント(メモ)が付けられる。コメントはブラウザの処理では無視されて、画面にも表示されない。<!--コメント-->テキストテキストテキストテキストテキストテキストテキストテキストテキスト......<!--と-->の間に入っているテキストがコメントだ。>の中にある感嘆符!とハイフン2つ--でコメントと認識される。例:<!--コメントだよ〜〜〜〜ん。テヘヘ-->今日の国際化社会における世界平和を実現する為には、各国の強調が必要であり、経済と外交と戦争の云々云々云々......上記はコメントが本文のトーンと全く違うが、ブラウザには表示されないので問題ない。コメントの主な使用法コード修正時にわかりやすくなる件名をメモする。(<!--左カラム-->など)途中経過や問題をメモする。(<!--ここまで完了-->、<!--表示がおかしい-->など)すぐに戻す予定の一時的な修正が生じたとき、元のコードをコメントに入れて無効化する。「タグ」はコンテンツ(テキスト、画像など)を「要素」に変えてくれる印。>に要素名を入れた「開始タグ」<要素名>と、スラッシュを加えた「終了タグ」</要素名>でコンテンツを囲うのが基本形。ブラウザはこのコンテンツとタグの全体を「要素」と認識する。囲うべきコンテンツがない単独の要素もある。こちらはコンテンツが空なので「空要素」と言う。(段落)は終了タグがあるので「要素」。(改行)は単独なので「空要素」。前回(Webの基礎知識)の「テキスト原稿サンプル」が改行すら再現してないことに驚いた方もいるのではないだろうか。そんなん、メモ帳以下やん!と。このタグがあって初めて動いてくれる言語で、それが無いと改行すらしてくれないのである。正しいネスト構造HTMLは複数の要素を「ネスト(入れ子)」構造にできる。ネストにするとき、開始タグと終了タグの位置はとても重要だ。下記は正しいネスト構造になっている例。*6:節)の中に子要素(h1要素、p要素)がネストになっている。このように子要素のタグの前にはタブや半角スペースなどでインデント(字下げ)しているとネスト構造がわかりやすい。問題があるネスト構造よくあるのは終了タグの「入れ替わり」「抜け」「ダブり」だ。</p></section>コードを何度も修正しているとこういうことがよく起こる。開始タグと終了タグの位置は常に意識したい。属性の基本形タグの中には要素に対する様々な「属性(設定)」を入れられる。属性名="属性値">要素名のあとに半角スペースを空け、属性名="属性値"という風に属性名と属性値をイコール=で繋ぐ。src="face.jog">a要素*8(リンク)の中にhref属性*9が入っている。*10(画像)の中にsrc属性*11が入っている。一つの要素には複数の属性を設定できる。属性名="属性値">属性と属性の間は半角スペースを空ける。alt="顔写真">a要素の中にsrc属性とtarget属性*12が入っている。img要素の中にsrc属性とalt属性*13が入っている。中で特に重要なのは「id属性」と「class属性」だ。いずれも要素に命名ができる。HTMLは同じ種類の要素がいくつも存在し得るが、命名することで要素の識別がしやすくなる。class="class名">id属性とclass属性の違いは使用回数だ。id名はページ内に一度しか使えないため、固有な名前を付ける。class名はページ内に何度でも使えるため、汎用的な名前を付ける。一つの要素には複数のclass名を設定できる。class名">class名とclass名の間は半角スペースを開ける。半角スペースを開けるところは先ほどの「複数の属性」と似ている。2つ("face"と"l_size")付いている。命名ルールid名、class名には以下の命名ルールがある。使える文字は半角英数とハイフン-、アンダースコア_のみ。一文字目はアルファベットから開始する。数字や記号は使えない。アルファベットの大文字、小文字は区別される。下記はこれまでの内容を反映した例。例:<p>赤点は以下の3名である。class="name">カワタジロウ</li></ul>ul要素*15(リスト)に"akaten"というid名が付いている。その中にli要素*16が入っていて、それぞれに固有のid名が付いている。全てのli要素に"name"というclass名が付いている。一つ目のli要素にだけ"booby"というclass名が付いている。パス(URL)次は「属性値」の中でHTMLのリンク(ハイパーリンク)を特徴付ける「パス(URL)」の書式を解説する。ページやファイルのパスには「絶対パス」と「相対パス」がある。絶対パス絶対パスは主に外部サイトのページやファイルを指定する書き方。a要素(リンク)の場合は下記のような書式になる。href="http://ドメイン/ディレクトリ/ページ名">コンテンツ</a>絶対パスはドメイン(http:〜)からページ名まで全てを書く。href="http://idr-zz.hatenablog.com/entry/toukou.html">コチラ</a>なお、ページ名がindex.htmlの場合は省略することができる。href="http://idr-zz.hatenablog.com/">コチラ</a>相対パス相対パスは同一サイト内のページやファイルを指定する書き方。見ているページを基準として相対的な位置を指定する。img要素(画像)の場合は下記のような書式になる。src="../親ディレクトリ/ファイル名">相対パスはドメイン(http:〜)部分を省略できる。*18同一階層はそのままファイル名を書けば良い。子階層を指定する場合はディレクトリ(フォルダ)名の後にスラッシュ/を書く。*19親階層を指定する場合は、ディレクトリ名の前にドットを2つとスラッシュ../を付ける。src="../img/face.jog">同一階層「ページと同一階層にある画像face.jpgを表示」という意味になる。子階層「ページと同一階層にあるimgディレクトリの中の画像face.jpgを表示」という意味になる。親階層「ページの親階層にあるimgディレクトリの中の画像face.jpgを表示」という意味になる。ページ内リンクa要素(リンク)は通常はページの先頭にジャンプするが、id名が付いた要素を指定するとその要素の頭にジャンプする。これを「ページ内リンク」という。スクロールに時間がかかる縦長ページなどでよく使われる。href="ディレクトリ/ページ名#id名">コンテンツ</a>id名の前にハッシュ#を付けるとid名指定の意味になる。別ページのid名を指定する場合はページ名の後ろにハッシュ#とid名を続ける。href="about/profile.html#iida">コチラ</a>同一ページ「ページ内のiidaというid名が付いている要素にジャンプする」という意味になる。別ページ「aboutディレクトリ内のprofile.htmlページ内のiidaというid名が付いている要素にジャンプする」という意味になる。下記はどのWebページにも必ず入っているHTMLの必須要素。html>は一番先頭に入る必須要素で「DOCTYPE宣言」という。その下のhtml要素も必須要素で、この中にhead要素とbody要素が入っている。head要素にはページの様々な設定がある。body要素には画面に表示されるコンテンツがある。HTMLサンプル最後に、前回(Webの基礎知識)に用意した「テキスト原稿サンプル」を下記のように打ち替えてみた。丹沢山地と相模湾の自然に囲まれて暮らしています。丹沢山地と相模湾の自然に囲まれて暮らしています。</body></html>属性の詳しい説明は省くが、要素を上から順番に解説する。上記に書いたようにhead要素はページの様々な設定が入る。meta要素は文書情報。charset属性は文字コード。*21文字化け対策のためhead要素の一番最初に書く。title要素はページ名。ブラウザのタブやブックマーク、Google検索結果などに表示される。その下のmeta要素はページの説明文(discription)。こちらもGoogleの検索結果などに表示される。さら下のmeta要素にはレスポンシブ(スマホ表示)の切り替え(viewport)を設定している。link要素で外部CSSファイルを読み込んでいる。script要素で外部JSファイルを読み込んでいる。body要素の内容body要素にはこれまで出てきた主要な要素を入れた。*22section要素の中に、h1要素、2つのp要素、img要素が入っている。section要素には"profile"というid名が付いている。p要素には"detail"、"link"というclass名が付いている。class名"link"のp要素にはa要素(リンク)が入っている。img要素で画像を表示している。上のコードのブラウザ表示のサンプル。CodePen.「Result」タブが実際のブラウザでの表示だ。「HTML」タブにはHTMLコードがある。*23HTMLだけだとまだ味も素っ気も無く、プレーンテキストに近い表示だ。見出しは大きな太字になり、段落に改行も効いた。リンクも効いて、画像も表示されている。「読めるぞ!私にもHTMLが読める!!*24」と、なっていただけただろうか。次回は第二の言語、Webサイトの見た目を彩る「CSS」の書式を解説する。idr-zz.hatenablog.com本連載は、これからWebサイト制作を始めてみたい方を念頭に、当ブログの記事中に出てくるWeb系の単語の「出発点」になることを目指して書きました。平易な言葉で、段階的な説明を心がけたつもりです。(書きながら自分自身の復習にもなりました)もし内容に不明点、おかしい点などあれば(優しく)ご指摘いただけると幸いです。idr-zz.hatenablog.com※参考:【HTML、CSS、JSの書式】まとめqiita.com*1:ソースコード。人が書いたコンピュータへの命令のこと。*2:某胃腸薬*3:h1要素のhはheader(見出し)の略。h1〜h6までの段階がある。*4:p要素はparagraph(段落)の略*5:br要素はbreak(改行)の略。*6:section要素は見出しと内容を「節」としてセクショニング(グループ化)する要素。link(アンカーリンク)でリンクを設定する。*9:hrefとはなんだろう。Referenceの略とのこと。わかるかい!って気分だ。属性値がリンク先のURL。*10:img要素はimageの略で画像を表示する。*11:src属性はsource(ソース)の略。属性値が表示する画像ファイルのURL。*12:taeget属性はリンク先の設定で_blankは別タブで開く*13:alt属性のaltはalternateの略で画像の代替テキストのこと。*14:そして、CSSやJSの設定の自由度が増す。*15:箇条書きの要素。listの略で番号無しのリスト。list:項目付きリスト)もある。*16:listの略ね*17:セキュリティ設定(SSL/TLS)を強化したページのURLには「https:」と「s」が付いている。*18:ドメインに変更があった時に影響を受けないメリットがある。*19:孫階層は「子ディレクトリ/孫ディレクトリ/ファイル名」*20:祖父階層は「../../祖父ディレクトリ/ファイル名」となる。*21:「あ」「a」などの文字と、機械が理解できる二進法コードを紐付ける決まりで、いくつかの種類がある。*22:他にtable要素(表)、form要素(フォーム)、div要素(division:汎用的ブロック)、b要素(bold:テキストの強調)、span要素(汎用的インライン)などもよく見られる。APIを使ってページのテキスト読み上げボタンを実装してみたテキスト読み上げのスクリーンリーダーについて調べたところ、...2019-08-14【Vue.js】コンポーネント事始め(グローバル登録とローカル登録)Vue.jsシリーズの続きです。前回まではlocalSltrageとの連携で...2019-05-29【Vue.js】v-bindでclass名を動的に追加、削除する!(北斗の拳の名言編)Vue.jsの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。