どうも7noteです。大量にあるHTMLのタグに覚えておきたい優先順位を付けてみました。 初心者でHTMLの練習を初めて驚くのが、HTMLタグの種類の多さ！ いや多すぎでしょ。マイナーなのも入れたらなんこあるの？？ その数なんと、＼ １１４個 ／。 ※https://yoshikawaweb.com/element/ より算出。 いや多すぎでしょ。覚えられんわ。 ということで、個人的に重要だなと思う順で、覚える優先順位をつけてみました。 ※あくまで主観なので、googleのSEOに効果があるとかそういうのじゃありませんのであしからず。 ※HTML5のタグも交えて解説しています。 重要度★★★「絶対に覚えておいたほうがいいタグ」 これがないとコーディングができないレベルで重要なタグたちです。丸暗記しましょう 「ルート要素＆文書メタデータ」 html・・・HTML文書であることを示す head・・・文書のヘッダ情報を表す title・・・文書にタイトルをつける link・・・リンクする外部リソースを指定する meta・・・その文書に関する情報（メタデータ）を指定する style・・・スタイルシートを記述する 「セクション」 body・・・文書の本体を表す h1〜h6・・・見出しを付ける header・・・ヘッダであることを示す footer・・・フッタであることを示す 「グルーピングコンテンツ」 p・・・ひとつの段落（パラグラフ）であることを表す ol・・・順序のあるリストを表示する ul・・・順序のないリストを表示する li・・・リストの項目を記述する dl・・・定義・説明リストを表す dt・・・定義・説明される言葉を表す dd・・・定義用語や言葉の説明をする div・・・ひとかたまりの範囲として定義する 「テキストレベルセマンティクス」 a・・・ハイパーリンクを指定する span・・・ひとつの範囲として定義する br・・・改行する 「埋め込み型コンテンツ」 img・・・画像を表示する 「表データ」 table・・・テーブル（表）を作成する tr・・・テーブル（表）の横一行を定義する th・・・テーブル（表）のデータセルを作成する td・・・ テーブル（表）の見出しセルを作成する 「フォーム」 input・・・フォームを構成する様々な入力部品を作成する label・・・フォーム部品と項目名（ラベル）を関連付ける 「スクリプティング」 script・・・文書にJavaScriptなどのスクリプトを組み込む 重要度★★「使う機会があるので覚えておいたほうがいいタグ」 ホームページ等をコーディングする上で頻出するタグです。最重要タグを覚えたら次にこのタグたちを覚えていくとスムーズな開発ができると思います。 「セクション」 article・・・記事であることを示す section・・・一つのセクションであることを示す nav・・・ナビゲーションであることを示す aside・・・余談・補足情報のセクションであることを示す 「グルーピングコンテンツ」 main・・・メインコンテンツであることを示す pre・・・半角スペースや改行をそのまま表示する 「テキストレベルセマンティクス」 time・・・日付や時刻を正確に示す 「埋め込み型コンテンツ」 picture・・・レスポンシブ・イメージを実現する source・・・動画や音声などのURLや種類を指定する iframe・・・インラインフレームを作る video・・・動画を再生する audio・・・音声を再生する 「フォーム」 form・・・入力・送信フォームを作る button・・・ボタンを作成する select・・・セレクトボックスを作成する option・・・セレクトボックスや入力候補リストの選択肢を指定する textarea・・・複数行のテキスト入力欄を作成する 「インタラクティブ」 details・・・備考や操作手段などの詳細情報を示す summary・・・detailsの内容の要約を示す 「スクリプティング」 canvas・・・図形を描く 重要度★「たまに出てくるくらいのレベルのタグ」 たまに出てくるレベルですが、知っておいて損はないタグです。ただ中にはややこしいものもあると思うので覚える優先順位は低い目かなと。2回目使うときに覚えよう、くらいの感覚でいいと思います。 「セクション」 address・・・連絡先を示す 「グルーピングコンテンツ」 blockquote・・・引用・転載セクションであることを表す figure・・・図表であることを示す figcaption・・・図表のキャプションを示す 「テキストレベルセマンティクス」 strong・・・強い重要性を表す em・・・強勢する（アクセントを付ける）箇所を表す q・・・引用句・引用文であることを表す s・・・すでに正確ではなくなった内容を表す wbr・・・改行しても良い位置を示す cite・・・作品のタイトルを表す code・・・プログラムなどのコードであることを示す ruby・・・ルビをふる rb・・・ルビをふる文字を指定する(IE用) rt・・・ルビのテキストを指定する rtc・・・ルビテキストの集まりを指定する rp・・・ルビを囲む記号を指定する small・・・免責・警告・著作権などの注釈や細目を表す 「埋め込み型コンテンツ」 map・・・イメージマップを作成する area・・・イメージマップのハイパーリンク領域を設定する svg・・・コードを記載して画像を描画する 「表データ」 caption・・・テーブル（表）にキャプションをつける colgroup・・・表の縦列をグループ化する col・・・表の縦列の属性やスタイルを指定する tbody・・・テーブル（表）のボディ部分を定義する thead・・・テーブル（表）のヘッダ部分を定義する tfoot・・・テーブル（表）のフッタ部分を定義する 「スクリプティング」 canvas・・・図形を描く 重要度ゼロ「正直使うことめったに無いので、覚えなくてもいいタグ」 全く覚えなくてもいいというよりgoogleで調べればなんでも出てくるので、暗記する必要がないという意味ですね。 「なんか見たことあるな」「こんなタグあったね」くらいでいいかなと思ってます。 「ルート要素＆文書メタデータ」 base・・・相対URLの基準となるパスを示す 「グルーピングコンテンツ」 hr・・・テーマや話題の区切りを表す 「テキストレベルセマンティクス」 dfn・・・用語が使用されていることを示す abbr・・・略語や頭字語であることを表す data・・・さまざまなデータを表す var・・・変数であることを示す kbd・・・ユーザーが入力する内容であることを示す sub・・・下付き文字を表す sup・・・上付き文字を表す i・・・声や心の中で思ったことなど、他と区別したいテキストを表す b・・・文書内のキーワードや製品名など、他と区別したいテキストを表す u・・・テキストに下線（アンダーライン）を引く（※非推奨タグ） mark・・・文書内の該当テキストを目立たせる bdi・・・隔離されたテキストを表します bdo・・・文字表記の方向を指定する 「編集」 ins・・・追加された部分であることを示す del・・・削除された部分であることを示す 「埋め込み型コンテンツ」 embed・・・プラグインデータを埋め込む object・・・文書に外部リソースを埋め込む param・・・プラグインのパラメータを指定する track・・・テキストトラックを表す math・・・MathML における最上位の要素 「フォーム」 datalist・・・入力候補となるデータリストを定義する optgroup・・・選択肢をグループ化する keygen・・・ォーム送信時にキーを発行する output・・・計算結果を示す progress・・・タスク完了までの進行状況を示す meter・・・規定範囲内の測定値を表す fieldset・・・フォームの入力項目をグループ化する legend・・・フォームの入力項目グループにタイトルを付ける 「インタラクティブ」 details・・・備考や操作手段などの詳細情報を示す summary・・・detailsの内容の要約を示す dialog・・・閲覧者が操作することが可能なダイアログを表す 「スクリプティング」 noscript・・・スクリプトが動作しない環境用の表示内容を指定する template・・・スクリプトによる文書への挿入・複製が可能なHTMLの断片を定義 まとめ 個人的に使っていないだけで「これはよく使うよ」っていうタグもあるかもしれませんが、重要度★★★のものは間違いなく必要になるところなので、最初に覚えていきたいタグになります。 解説テキストの引用元： http://www.htmq.com/ https://dekiru.net/ https://weblan3.com/ https://developer.mozilla.org/ja/ https://web-designer.cman.jp/ おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
Flexboxを使って国旗を作る ジョージア国旗 目標：Flexboxの基礎を理解するため テキストエディターはVSCode. ↓下記のFlexboxチートシートを参考 Css Flexboxのチートシート ～codeを書き始める前の準備～ ・構成を考える！ 何をどんな風に、どうやって作るのか？ 最初にある程度決めておくと後が楽になります。 例 ジョージア国旗を調べる <div>は何個必要なのか？ class属性名はどうしようか？ ここまで出来たらcodeを書いていきます♪ ※head部分は省略 <div class="georgia"> <div class="gia"> <div class="georgia1"></div> <div class="georgia2"></div> <div class="georgia1"></div> </div> <div class="gia"> <div class="georgia1"></div> <div class="georgia2"></div> <div class="georgia1"></div> </div> <div class="gia"> <div class="georgia1"></div> <div class="georgia2"></div> <div class="georgia1"></div> </div> <div class="gia"> <div class="georgia1"></div> <div class="georgia2"></div> <div class="georgia1"></div> </div> </div> .georgia { width: 500px; height: 300px; background-color: red; border: 1px solid black; margin: 200px auto; } .gia { width: 220px; height: 125px; background-color: pink; } この状態で一旦ブラウザで確認 ↓ .georgia { width: 500px; height: 300px; background-color: red; border: 1px solid black; margin: 200px auto; display: flex; ※追加 flex-wrap: wrap; ※追加 justify-content: space-between; ※追加 align-content: space-between; ※ 追加 } display: flex;を使って、４個の<div>を上下左右に納めました。 .georgia1 { width: 40px; height: 20px; background-color: orange; } .georgia2 { width: 20px; height: 80px; background-color: aquamarine; } ピンク部分に 赤い十字を作っていきます ↓ .georgia1 { ※追加 width: 40px; height: 20px; background-color: orange; } .georgia2 { ※追加 width: 20px; height: 80px; background-color: aquamarine; } ピンクのボックスに３個の<div>の箱を作ります。 解りやすいように色を付けています 上記の３個にdisplay: flex;を付けます .gia { width: 220px; height: 125px; background-color: pink; display: flex; ※追加 justify-content: center; ※追加 align-items: center; ※追加 } 最後に、色を整えてあげたら完成です。 まとめ 大きい『赤十字』を作成するのに、最初は赤い十字を作りましたが 「小さい赤十字」を上手に作成できなかったので、 赤をベースに白い箱を作り、そこにFlexboxをつけました。 今回は以上です！ ありがとうございました
マークアップ言語 HTML(HyperText Markup Language) HTMLは、Webに特化したマークアップ言語（文字データになんらかの情報や構造を持たせるもの）である。 HTML文書は、タグによって囲まれた文章によって構成される。タグは「開始タグ」と「終了タグ」からなる。開始タグ、文章、終了タグの塊を要素と呼ぶ。 HTMLの先頭におくDOCTYPE宣言は、バージョン形式を伝える。 開発当初は文書とリンクを表すだけのものであったが、バージョンアップにより機能が追加されていった。現在は2017年に勧告されたHTML5.2が最新版である。 XML(Extensible Markup Language) XMLはHTMLと同じマークアップ言語であるが、HTMLに比べ、さまざまな用途に汎用的に利用できる。 XMLもHTMLも元はSGML（Standard Generalized Markup Language）を改良した言語である。HTMLはWeb文書（ハイパーテキスト）の記述に特化したのに対し、XMLは個別の目的に応じてタグを独自に定義することで汎用的に利用できる。 XHTML(Extensible HyperText Markup Language) XHTMLは、HTMLをXMLの文法で再定義したものである。HTMLより書式が厳密になり、タグの省略や大文字の混在が許されなくなるなどの違いがある。 XHTMLはXMLの一種であるため、別のXMLで定義された文書をXHTML文書内に埋め込むことができる。埋め込み利用されるものとして、MathML(XMLで記述された数式)やSVG(XMLで記述された画像)などがある。 CSS(Cascading Style Sheets) CSSはHTMLやXMLの体裁を表現する記述で、スタイルシートとも呼ばれる。 CSSが登場する以前は、HTML内で体裁を整えていたが、文書の構造の記述と体裁の記述が入り混じってしまっていた。CSS登場後は文書構造と体裁の棲み分けが可能になった。 よって、共通のCSSを適用させたり、クライアントの種類ごとに表示を切り替えるといったこともできるようになった。 画像データ Webで扱われる画像データは、ネットワーク転送量を減らすため、基本的にデータサイズが小さくなる。 JPEG(Joint Photographic Experts Group) Jpeg(ジェイペグ)形式は１６６７万色を扱えるため、写真の画像形式としてよく使われる。人間が気づかないデータを削ることで圧縮しているので、画質が劣化しやすい。 GIF(Graphics Interchange Format) GIF(ジフ)形式は２５６食しか扱えないが、データの圧縮方法がJpegと異なるため画像の劣化が発生しない。 特定の色を透過色にしたり、複数のGIF画像を使ってアニメーションにしたりできる。 PNG(Portable Network Graphics) PNG(ピング)形式はGIFの特許問題（GIFの圧縮技術の特許を持っていたUNISYS社の利用料請求）により開発されたもので、１６７７万色以上を扱える。 透明色が扱え画質の劣化が起きず、同じ内容でもGIFよりデータサイズが小さくなる。 音声・動画配信 インターネットでの転送時間短縮のため、音声・動画ファイルも画像ファイル同様にデータを圧縮する。 データ圧縮にはコーデックというソフトが用いられ、圧縮をエンコード、再生のために伸長することをデコードという。 音声ファイルではMP3やACC、動画ファイルではMPEG-4やWMVがある。 コーデック 拡張子 説明・用途 AAC .aac .m4aなど iPod 着うた WMA .wma PC向け音源 MPEG-4 .m4v mp4など スマホ向け動画 WMV .wmv PC向け動画 MPEG-2 .mpg m2p DVD 地デジ ダウンロード配信 音声・動画の配信方法は大きく分けて２種類ある。１つは「Webサーバーからダウンロードしてもらい、それを再生する」というダウンロード配信である。 ユーザーがファイル全体をダウンロードしてから再生する方法と、ファイルをダウンロードしながら再生する方法（プログレッシブダウンロード配信）がある（YouTubeやニコニコ動画など）。 しかし、配信したファイルはユーザーに残るため著作権のあるデータ配信には向いていない。 ２つめは、この問題を解決するストリーミング配信である（AbemaTVやニコニコ生放送など）。この方法では、ファイルを細かく分割し、細切れにしたデータを配信する。再生したデータは都度削除されるので著作権問題は解決するが、細切れにして転送するためのストリーミングサーバーを用意する必要がある。 参考 イラスト図解式 この一冊で全部わかるWeb技術の基本
内容 Railsの学習の予定を立てた。 メモ Rails（Ruby on Rails）を段階的に学んでいくための予定を以下でまとめる。 目標 簡単なWebアプリケーションを作れるレベルになる 自分のブログを構築する 現状 HTMLやCSSを読むことはできるが、実際に書いたことはほとんどない Rubyも雰囲気はわかるが、実際に書いたことはほとんどない JavaScriptは全くわからない Railsはチュートリアルの初めの方だけやったことがある 段階 HTML、CSS、Ruby、JavaScript、Railsに慣れる Progateを数回やる 段階的にそれぞれの技術のレベルを上げる Rails Girlsを進める Railsチュートリアルを進める 目標となる物を作る （目標の通り）
テーブルタグ ① tableタグ １つのテーブル全体をまとめるタグ ②trタグ table rowの略です。テーブルの横の列を作ります。 ③thタグ 見出しタグセルを作るタグを作るタグです。 ④tdタグ 通常セルを作るタグです。 コード index.html <table> <caption>登場人物</caption> <tr> <th class="col-1"> </th> <th class="col-2">年齢</th> <th class="col-3">性別</th> <th class="col-4">性格</th> </tr> <tr> <th>太郎</th> <td>22</td> <td>男</td> <td>優しい</td> </tr> <tr> <th>花子</th> <td>18</td> <td>女</td> <td>お人好し</td> </tr> <tr> <th>一郎</th> <td>24</td> <td>男</td> <td>ロールキャベツ系男子</td> </tr> </table> ①:nbsp セルが空の場合に入れます。 trタグが横列になります。trタグに挟まれる形で、太郎君、22,男、優しいが１行になります。 HTMLでの実装は以上になりますが、このままでは表のようにボーダーが無いのでCSSで整えていきます。 CSS style.css table,th,td { border: 3px solid gray; border-spacing: 0; border-collapse: collapse; margin: auto; } .col-1,.col-2,.col-3 { width: 20%; } th{ background-color: pink; } デフォルトでは、ボーダーがつかないためcssで指定します。 ①border-spacingでは、ボーダー同士の隙間をなくします。 ②border-collapaseでは、ボーダー同士を重ねます。 ③セル同士の幅設定 それぞれのthタグに幅を設定することでより見やすくなります。 完成
