ホームページ管理者お役立ち情報
html
| html | 意味 |
|---|---|
| <head></head> | htmlドキュメントのメタデータを書く. |
| <body></body> | ブラウザウィンドウに表示されるhtmlを書く. |
| <html lang="言語"></html> | コンテンツの主要な言語を指定する. |
| <meta charset="utf-8"> | 文字コードを指定する. |
| <title></title> | ページのタイトルを設定する. |
| <meta naem="description" content="ページの概要"> | ページの概要を書く. |
| <meta name="keywords" content="キーワード1, キーワード2, キーワード3"> | ページのキーワードを書く. |
| <link rel="stylesheet" href="cssのパス"> | cssファイルを読み込む. |
| @charset "utf-8"; | cssの文字コードを指定する. |
| <style></style> | htmlドキュメントに直接cssを記述する. |
| <script src="javaスクリプトのパス"></script> | javascriptファイルを読み込む. |
| <!----> | htmlのコメントアウト. |
| /*コメント*/ | cssのコメントアウト. |
| <p></p> | 段落をマークアップする. |
| <strong></strong> | 太字. |
| <em></em> | 斜体. |
| <b></b> | 太字. |
| <i></i> | 斜体. |
| <u></u> | 下線. |
| <pre></pre> | 改行タブなどを入力されたそのままの形で表示する. |
| <address></address> | 連絡先を表示する. |
| <sup></sup> | 上付文字. |
| <sub></sub> | 下付文字. |
| <hr> | 区切り線 |
| <blockquote cite="引用元URL">引用するコンテンツ</blockquote> | |
| <cite>引用元のタイトルや作者</cite> | |
| <q cite="引用元URL">引用するテキスト</q> | |
| <tiem datetime="フォーマットされた日時">日時・時刻</tiem> | 検索エンジンのクローラーがこの日時を解析する. |
| <mark></mark> | マーカーを引く. |
| <ruby><rb>感じ</rb><rp>(</rp><rt>ルビ</rt><rp>)</rp></ruby> | ルビをふる |
| <abbr title="正式名称">略語</abbr> | 略語であることを示す. マウスがホバーした時にtitleの内容が表示される. |
| <del datetime="2020-10-10"></del> | テキスト一部が修正されたことを明示する. |
| <ins datetime="挿入した日時"></ins> | テキストが新たに挿入されたことを明示する. |
| <code></code> | 短いプログラムのソースコードを表示する. |
| <a href="index.html" title="テキスト"></a> | title属性をつけるとリンクにホバーするとツールチップが表示される. |
| <small>©hoge</small> | コピーライトが小さなフォントサイズで表示される. |
| & | アンパサンド |
| < | < |
| > | > |
| " | ダブルクォート |
| | 半角スペース |
| ‘ | 左シングルクォート |
| ” | 右シングルクォート |
| “ | 左ダブルクォート |
| « | 左ギュメ |
| » | 右ギュメ |
| © | 著作権記号 |
| ® | 登録商標記号 |
| ™ | 商標記号 |
| ¥ | 円マーク |
| ° | 角度 |
css
| html | 意味 |
|---|---|
| color:#RRGGBB; | cssで16進数で色を指定する. |
| color: rgb(255,255,255); | |
| color: rgba(255,255,255,0.8); | 4つ目は透明度. 0〜1.0の間で小さい方が薄い. |
| rem | <html>のフォントサイズ(デフォルト16px)を基準として, 相対的にフォントサイズを相対的に決めることができる. |
| line-height: | 行間を変更する. |
| font-weight: | フォントの太さ(normal, bold, bolder, lighter). |
| font-style:normal; | <address>タグなどイタリックで表示される要素を通常のテキストに戻す. |
| text-align: | テキストの行揃え(left, center, right, justify). |
| letter-spacing: | 文字の間隔を調節する. |
| text-decoratin: | <del>のような訂正線をcssで書く. |
| mark{background:#RRGGBB;} | <mark></mark>でつけるマーカーの色を変える. |
| margin:0; | <p></p>で囲む段落の上下スペースをなくす. |
| text-indent: 1em; | <p></p>タグなどで字下げする. |
| text-indent: -2em; | マイナスの値を設定すると「注:」の部分を1行目だけ左にずらして揃えることができる. |
直前直後のスタイル
| html | 意味 |
|---|---|
| ::first-line | 1行目だけ見た目を変える. |
| ::before | 要素のテキストの直前にスタイルを適用. |
| ::after | 要素の直後にスタイル適用. |
| content | テキストの直前や直後に挿入するコンテンツ. ::beforeや::afterと併用する. |
箇条書き
| html | 意味 |
|---|---|
| <ul><li></li></ul> | 箇条書き |
| list-style:square; | 箇条書きの・を■に変更する. |
| <ol><li></li></ol> | 番号箇条書き |
| list-style: decimal-leading-zero; | 番号に0をつけて桁合わせする. |
| lower-alpha | 小文字のアルファベット |
| upper-alpha | 大文字のアルファベット |
| lowr-roman | 小文字のローマ字 |
| upper-roman | 大文字のローマ字 |
| <ol start="4"><li></li></ol> | 番号箇条書きを途中から始める. |
| <dl><dt>キーワード</dt><dd>説明</dd></dl> | キーワードと説明の箇条書き |
| overflow: hidden; | フロートの解除. |
| float: left; | 左フロートを適用する. |
| margin: 0 0 1 em 0; | マージンを設定する. |
ハイパーリンク
| html | 意味 |
|---|---|
| <a href="リンク先のURL" target="_blank"></a> | リンク先を別タブで開く. |
| <a href="#hoge"></a> <h2 id="hoge"></h2> | ページ内リンク |
| :target{background:#ffa2a4;} | リンクで移動した際, 移動先の要素を選択する. ページ内リンクをクリックしたら一瞬で移動するのでどこに移動したか分かりづらいため. |
| <a href="mailto:hoge@hoge.com"></a> | メールアドレスをリンクにする. |
| <a href="リンクのファイルパス" download="ダウンロードしたファイルのファイル名"></a> | ファイルをダウンロードさせたい. |
| a:link | リンク先が未訪問の<a>タグ |
| a:visited | リンク先が訪問済みの<a>タグ |
| a:hover | リンクにマウスがホバーした状態の時のスタイル |
| a:active | リンクをクリックした時のスタイル |
| a:hover{outline: 1px solid #ea6357;} | マウスがホバーした時に枠線をつける. |
キーボード
kbd{margin:0 0.5em;
padding: 2px 0.625em;
border: 1px solid #d1d1d1;
border-radius:5px;
background-color;#dbe4e7;
}
ボックス
| html | 意味 |
|---|---|
| <div></div> | 複数の要素をグループ化する. それ自身は何の意味も持っていない. cssで作ったclass属性をつけて使う. |
| border:太さ 形状 色; | ボーダーを引く |
| border-top:太さ 形状 色; | |
| border-right:太さ 形状 色; | |
| border-bottom:太さ 形状 色; | |
| border-left:太さ 形状 色; | |
| padding:上右下左; | ボックス周囲にパディング(隙間)を設定する. |
| padding-top:上右下左; | |
| padding-right:上右下左; | |
| padding-bottom:上右下左; | |
| padding-left:上右下左; | |
| width:幅; | ボックスの幅を指定する. |
| <article></article> | それだけで独立するコンテンツ |
| <section></section> | ページ全体の一部分 |
| <figure></figure> | 図 |
| <figcaption></figcaption> | 図のキャプション |
テーブル
| html | 意味 |
|---|---|
| <th colspan="2"></th> | セルを横方向に結合 |
| <td rowspan="結合するセルの数"></td> | セルを縦方向に結合 |
| <thead></thead> | テーブルのヘッダー |
| <tfoot></tfoot> | テーブルのフッター |
| text-align:right; | 右揃え |
| vertical-align:top; | セルを縦方向に結合した際 上に揃える. |
| th:nth-child(3) { width: 300px;} | 3列目の幅を固定 |
| table-layout:fixed; | セルの幅を均等にする. |
| tbody tr:nth-child(2n) {background:#ecfafc;} | 偶数行だけ色をつける. 2n+1にすると奇数行だけ. |
| tr:hover{background:#ecfafc;} | カーソルが置かれた行の色を変える. |
フォーム
| html | 意味 |
|---|---|
| <form action="送信先UEL" method="送信メソッド"></form> | フォームの親要素 |
| <input type="text" name="変数名"> | テキストフィールド |
| <input type="submit" value="送信ボタンの名前"> | 送信ボタン |
| <label><input ...></input></label> | inputを囲んでラベルをつける |
| <input type="email" name="変数名"> | メールアドレスフィールドはメールアドレスかどうかチェックしてくれる. |
| <input type="tel" name="変数名"> | 電話番号を入力するフィールド |
| <input type="password" name="変数名"> | どんな文字を入力しても「・」で表示される. |
| <input type="email" name="mail" id="mail" placeholder="例) hoge@hoge.com"> | テキストフィールドに入力のヒントを表示させる. |
| <input type="text" autofocus> | ページが表示された際に自動でこのフォームを入力可能にする. |
| <input type="text" required> | フォーム部品を入力必須にする. |
| <input value="フォーム部品の初期値" readonly> | 入力はできないが先tなくはできるテキストフィールド |
| <input type="file" name="変数名"> | ファイルをアップロードする. |
| <input type="radio" name="変数名" value="送信される値"> | ラジオボタンはグループ化しておく必要がある. 変数名は全てのラジオボタンで統一する. <label></label>を使う. |
| <input type="checkbox" name="変数名" value="送信される値"> | チェックボックス |
| <select name="変数名"></select> | プルダウンメニュー, multiplを入れると複数選択可能となる. |
| <optin value="送信される値" selected>選択してください</optin> | |
| <optin value="送信される値">北海道</optin> | |
| <optgroup label="グループ名"></optgroup> | 選択肢をグループ化して見やすくする. |
| <textarea name="変数名"></textarea> | 途中で改行できるテキストボックス |
| <button>ボタンテキスト</button> | ボタン |
| border: 太さ 形状 色; | 要素のボックスにボーダーを引く. |
| background:背景色; | 要素の背景色を設定する. |
| :focus | フォーム部品がフォーカスした時にスタイルを適用する. |
| :required | 入力必須項目に入力がない時のスタイル. |
| :invalid | 入力が間違っている時のスタイル. |
| :valid | 入力が正しい時のスタイル. |
CSS属性セレクタ
| html | 意味 |
|---|---|
| a[target="_blank"]{...} | <a target="_blank">にスタイルを適用する. |
| input[required]{...} | <input required>にスタイルを適用する. |
| a[href^="https://"]{...} | <a href="https//...">にスタイルを適用する. |
| a[href$="zip"]{...} | <a href="...zip">にスタイルを適用する. |
その他
| html | 意味 |
|---|---|
| <link rel="shortcut icon" href="hoge.ico" type="image/vnd.microsoft.icon"> | アイコンを設定する. |
| accesskey="G" | ショートカットキーを設定する. alt+shift+キー |
| <span></span> | CSSを適用するためなどの用途で, テキストの一部分を囲む. |
ボックスを横に並べる
- <div calss="box1"></div>と<div class="box2"></div>を作る.
- その二つの要素を囲む<div class="course"></div>を作成する.
overflow:hidden;
}
.box1 {
float: left;
margin-right:20px;
padding:20px;
width:300px;
}
.box2 {
float: left;
margin-right:20px;
padding:20px;
width:300px;
}