INDEX
最終更新日：2020年03月04日 （初回投稿日：2010年08月31日）
とにかくHTMLを書いてみよう
テキストを書いてみよう
ファイルの場所を表す「URL」について＿これが正しくないとファイルが行方不明に
リンクさせてみよう （簡単なリンクボタンも作ってみよう）
CSSといっしょに使おう
サイトの背景に色や画像をつけてみよう
ちょっと豆知識
リストを作ろう
テーブル（表組）を作ろう
- [16-1] table（表）を作ろう（まずは基本の <table> <tr> <th> <td> ）
- [16-2] table にタイトルをつけよう <caption>
- [16-3] table のセルを連結しよう（colspan属性・rowspan属性）
- [16-4] tableのセルの枠線を非表示にしよう（empty-cellsプロパティ）
- [16-5] table横列グループ化 <thead><tbody><tfoot>
- [16-6] table縦列グループ化 <colgroup><col>
- [16-7] テーブルセルで使う scope属性と headers属性について
- （ちょっとメモ）テーブルをレスポンシブ対応させるCSS
セクショニング要素とグルーピング要素で 全体を組み立てよう
- [17-1] HTML5 の新要素でページ全体を組もう
- [17-2] セクショニングの article要素、aside要素、section要素 ＊HTML5の新要素！
- [17-3] セクショニング要素と見出し要素のルール
- [17-4] ナビゲーションのセクションを表す nav要素 ＊HTML5の新要素！
- [17-5] ヘッダーの header、フッターの footer、連絡先の address要素 ＊HTML5の新要素！
- [17-6] メインコンテンツを表す main要素 ＊HTML5の新要素！
CSS の新プロパティでレイアウトしてみよう
テキストに関する要素を利用しよう
- [19] テキストにルビをつけてみよう（ruby, rt, rb, rp, rtc）
- [20] 上付き文字と下付き文字を使おう <sup><sub>
- [21] 重要度を示す<strong>と強調を示す<em>を使い分けよう
- [22] HTML5の新要素<mark>を使ってみよう ＊HTML5の新要素！
- [23] <b><i><small>もまだ使えます
- （ちょっとメモ）HTML5で廃止される要素一覧
- [24] 追加を示す<ins>と、削除されたことを示す<del>を使おう
- [25] 新しい要素<time>で正確な日時を記述しよう ＊HTML5の新要素！
- [26] 参照先のタイトルを表す<cite>を使おう
- （ちょっとメモ）u要素と s要素は復活（HTML5で廃止ではありません）
- [27] <q>で引用文を示そう
- [28] <blockquote>で「引用されたブロック」を示そう
- [29] <abbr>で略語を示そう
- [30] 定義語を示す<dfn>を、<abbr>や<dt>と一緒に使おう
- [31-1] <code> と <pre> でソースを表示しよう
- [31-2] <pre>要素と同じ効果のCSS「white-space : pre」（CSS使用）
- [32] その他のプログラム関連を示す samp、kbd、var、data要素
- [33-1] 改行可能位置を示す wbr要素 を使ってみよう
- [33-2] 単語の途中でも改行させるCSS「word-wrap: break-word」
- [34] 書字方向を指定する bdo要素と 書字方向を隔離する bdi要素
グルーピングのための要素で、もれていたモノ
HTML5での要素の分類とルールを知っておこう（カテゴリーとコンテンツ・モデル）
HTMLの文書情報を指定する「メタデータ・コンテンツ」を書いてみよう
- [40] メタデータ・コンテンツって何？
- [41] <base>でベースのURLを示そう（「target属性」についても解説しています）
- （ちょっとメモ）MIMEタイプ
- [42-1] link要素で 外部CSSファイルの読み込み・グループ化をしよう
- [42-2] link要素の media属性で 外部CSSをメディア別に切り替えよう
- （ちょっとメモ）CSSの @import と @media（メディアクエリ）
- [42-3] link要素の「rel属性」の値（リンクタイプ）
- [42-4] link要素で ショートカットアイコン（favicon）を表示させよう
- [43] style要素で CSS を HTML文書内に書こう
- [44] script要素で HTMLにスクリプトを読み込む or 直接書く
- [45-1] meta要素で基本情報（メタデータ）を指定しよう
- [45-2] meta要素の charset属性で文字コードを指定しよう
- （ちょっとメモ）文字コード、文字集合、エンコードについて（1）_2進法と単位、JIS
- （ちょっとメモ）文字コード、文字集合、エンコードについて（2）_Shift_JIS、Unicode
- [45-3] meta要素の name属性でサイトの情報を指定しよう
- [45-4] meta要素の http-equiv属性で動作を指示しよう
- [45-5] meta要素で OGPを設定しよう
- [46] template要素でテンプレートを作ろう
フォームでユーザにデータ送信してもらおう
- [47] form要素で「送信先」と「送信方法」を指定しよう
- [48] フォーム部品のグループ化のための fieldset要素と legend要素
- [49-1] input要素の属性一覧 ・type属性の値一覧
- [49-2] input要素でテキストを入力してもらおう ( text, search, tel, url, email, password )
- [49-3] input要素で ラジオボタン や チェックボックスを作ろう (radio, checkbox)
- [49-4] input要素で時間を入力してもらおう (datetime-local, date, month, week, time)
- [49-5] input要素で「数」を入力してもらおう (number)
- [49-6] input要素で「レンジ（割合）」を選んでもらおう (range)
- [49-7] input要素で「色」を選んでもらおう (color)
- [49-8] input要素でファイルを送ってもらおう (file)
- [49-9] input要素で非表示のデータを送ろう ( hidden )
- [49-10] input要素で 送信ボタンなどを作ろう (submit, reset, button)
- [49-10-2] input要素で作るボタン(submit, reset, button)の見た目を CSSで変えよう
- [49-11] input要素で画像の送信ボタンを作ろう (image)
- [50] button要素で送信・リセット・汎用ボタンを自由に作ろう
- （ちょっとメモ）整理しよう。フォームのプッシュボタン比較
- [51] セレクトメニューを作ろう（select・option・optgroup要素）
- [52] 入力候補のリストを作ろう datalist要素 ＊HTML5の新要素！
- [53] 文章 (複数行のテキスト) を入力してもらおう textarea要素
- [54] ラベルを付けて使いやすくしよう label要素
- [55] 計算結果の出力欄を作ろう output要素 ＊HTML5の新要素！
- [56] 数量や割合のゲージを表示しよう meter要素 ＊HTML5の新要素！
- [57] プログレスバー（進捗状況）を出そう progress要素 ＊HTML5の新要素！
- [58] 暗号鍵を作ろう keygen要素（HTML5.2で削除されました）
- [59] フォームの属性 逆引き一覧（どの属性がどの部品に使えるか）
- [60] フォームを美しく整えよう（CSS使用）
HTML要素のタグは省略できる場合もあります。また、属性の引用符なども省略可能です
他のコンテンツ（画像・動画・音声・グラフィックスなど）を組み込もう
- [61] イメージマップ（リンク領域）を作ろう map要素・area要素
- [62] 外部コンテンツを組み込もう <object> <param>
- [63] インライン・フレームで 他のHTMLファイルを組み込もう <iframe>
- [64] プラグインで再生されるコンテンツを組み込もう <embed>
- [65] 動画をプラグイン無しで組み込もう <video> <source> ＊HTML5の新要素！
- [66] 音声をプラグイン無しで組み込もう <audio><source> ＊HTML5の新要素！
- [67]「mediagroup属性」でメディア要素を同期させよう
- [68] 動画や音声に字幕やキャプションを表示しよう <track> ＊HTML5の新要素！
- [69-1] canvas要素でグラフィックスを表示する領域を作ろう ＊HTML5の新要素！
- [69-2] Canvasに基本的な図形を描こう
- [69-3] Canvasに曲線を描こう（線のスタイルも）
- [69-4] Canvasに画像を描画しよう（トリミングやクリッピングも）
- [69-5] Canvasにグラデーションやパターン、シャドウを指定しよう
- [69-6] Canvasにマウスの動きに合わせて描画しよう （クリックやマウスムーブとの組み合わせと Math.random）
- [69-7] Canvas上の重なった描画領域を指定しよう （globalCompositeOperationプロパティ）
- [69-8] Canvasでテキストを描画しよう
- （ちょっとメモ）Canvasで便利な javaScriptライブラリ
- [69-9] Canvasでグラフィックスの変形をしよう（拡大・回転・移動・反転など）
- [69-10] Canvasの描画の状態を保存・復元する save() と restore()
- [69-11] Canvasでビットマップを操作しよう（ビットマップの明度や色調の変更）
- [69-12] Canvasをサイトの背景に使おう
- （ちょっとメモ）CanvasサイズをCSS3のvw, vhで取得してみたけど...
- [69-13] Canvasで画像データをURLとして取得しよう
- （ちょっとメモ）Canvasでグラフを自動生成する「flotr2」が便利
- [69-14] Canvasのアニメーションの基本を見てみよう
- （ちょっとメモ）API って何だ？（HTML5 の API について）
- [70-1] svg要素でベクターグラフィクスを埋め込もう
- [70-2] SVGフィルターを使ってみた
- [70-3] CSSだけで作る SVGのドローイングアニメーション
- [70-4] JavaScriptライブラリで作るSVGモーフィングアニメーション
- [70-5] 複数のSVGを1つにまとめて個別に呼び出す SVGスプライト
- [71] img要素の srcset属性で画像を切り替えよう ＊HTML5.1からの新属性srcset
- [72] デバイスに合わせた画像を表示できる picture要素 ＊HTML5.1の新要素！
ユーザが任意で使える「詳細情報」などを表示するインタラクティブ要素
- [73] 開閉できる詳細情報を表示する details要素 summary要素 ＊HTML5.1の新要素！
- [74] ユーザーが操作できるダイアログを表示する dialog要素 ＊HTML5.2の新要素！
- 関連記事
-
- はじめに
- はじめてのCSS INDEX
- HTML要素 索引
- PROFILE
- INDEX
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
