HTML
概要
HTML = Hyper Text Markup Languageの略。
作法
| 内容 | 例 | ソース | 補足 |
|---|---|---|---|
| None | None | None | None |
| html要素はlang属性をつける | <html lang="en-US"> | https://www.w3schools.com/html/html_attributes.asp | とほほに使う理由が書いてあるから見るべし。(基本的にはブラウザの翻訳が動作するため) |
| 属性は小文字でかく | None | https://www.w3schools.com/html/html_attributes.asp | None |
| 属性の値には必ずクォーテーションで囲む | <a href="https://www.w3schools.com/html/"> | https://www.w3schools.com/html/html_attributes.asp | なくても動作はする |
| 基本的には二重引用符を用いる、ただ値内にそれがある場合は引用符で囲む。逆もしかり | <p title='こんな感じで"を使うときは単引用符で囲もう'> | https://www.w3schools.com/html/html_attributes.asp | None |
| H要素は正しく使おう(文字が大きくなるからとかの用途で使うな) | None | https://www.w3schools.com/html/html_headings.asp | None |
| 文章の見た目の変更には直接空白や改行を使わないようにする。 | タグの間にある改行や空白はブラウザによって自動で削除される。 | ||
| blockquoteではciteで引用先のリンクを入れる | |||
| abbrではtitleで省略なしの言葉を入れてあげるといいらしい | WHOにWorld Health Organization | ||
| 複数行のコメントをするときは開始タグで一行、終了タグだけで一行使ってあげる | |||
| CSSは外部CSSを使うようにする | １つのファイルを変更するだけでサイト全体の見た目を変えれる。 | ||
| imgにはalt属性を入れる | |||
| 画像の幅と高さは常に指定してください。幅と高さが指定されていない場合、画像の読み込み中にWebページがちらつくことがあります。 | |||
| 画像の大きさはcssもしくはstyle属性で設定するheight,width属性を使わない | |||
| Webサイトにファビコンを追加するには、ファビコンイメージをWebサーバーのルートディレクトリに保存するか、ルートディレクトリにimagesという名前のフォルダを作成して、ファビコンイメージをこのフォルダに保存します。ファビコン画像の一般名は「favicon.ico」です。 | |||
| titleの後にファビコンを読み込む | |||
| <iframe>のtitle属性を常に含める。これは、スクリーンリーダーがiframeのコンテンツを読み取るために使用します。 | |||
| ファイルパスには相対パスを使用する | httpなどの部分がどうでもいい。つまりurlドメインが変わろうがローカルだろうが動く | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0">このタグは常に使用する(head内) | |||
| baseは設定する |
最上段はコピペ用
Style guide And Coding rule
- タグ名はlowercaseを使用
- 終了タグはしっかり記載する。
- 属性名にはlowercaseを使用
- しっかりクォーテーションをつける
- 画像には必ずalt、width、heightをつける(widthとheightはcssで設定する)
- 属性と値を繋ぐイコールにはスペースを入れてはならない(属性X = "Value"、動くけどバッドプラクティス)
- 一行あたりの文字数は短くする(エディターで見れる長さにする。)
- 特別な理由(テーブル、リスト)がない限り。空白行、インデント、改行はいらない(例えば終了のpタグとかはそのまま文末につけて良い)
- title要素は必ず記載する
- lang属性は必ず記載する
- head内で一番最初に記載するのは<meta charset="UTF-8">
- ファイル名は小文字にする。
仕様
- タグの間にある改行や空白はブラウザによって自動で削除される。
HTMLエンテティ
例えば<などを使いたいときにそのまま書くと開始の文字として認識されるのでエスケープする必要がある。そのために使うのがHTMLエンテティ。
これには文字と数字が使える。
違いは文字だとわかりやすいがブラウザがサポートしてない場合がある。数字はその逆。
よく使われるエンテティ
ノンブレークスペース : 改行なしのスペース。リストなどで使われる。
blockとinline
-
ブロック
ブロック要素は新しい行となる。
幅は取れるだけとる
上下にはマージンが挿入される。 -
インライン
前のタグから改行せずに挿入される
必要最低限の幅しか取らない。
上下にmarginは挿入されない。
classとid
-
クラス
CSSなどで識別するための目印。
複数の要素に対して同じクラスを使用可能
空白をはさむことによって１つの要素に複数のクラスを割り当て可能 -
id
CSSなどで識別するための目印
１つのhtmlで一回しか使えない。uniqueなクラスと思えばいい
ツール
タグ
| タグ | 属性 | 説明 |
|---|---|---|
| ヘッディングタグ | ||
| h* | 見出しに使う*の部分には1~6までの数字が入る。上位の見出しには小さい数字を使う。 | |
| パラグラフタグ | ||
| p | パラグラフ。１段落分の文章。この要素を使うと改行が入り、要素の前後の段落との間にスペース（マージン)が挿入される | |
| hr(終了タグ無) | 文章の区切りを示す。内容の区切りを表すもの。 | |
| br(終了タグ無) | 段落を分けずに改行がしたい | |
| pre | この要素は、事前にフォーマットされたテキストを定義します。pre要素内のテキストは固定幅フォントで表示され、スペースと改行の両方が保持されます。例えばポエムを載せたいときなどに使うらしい | |
| フォーマッティングタグ | ||
| b | ボールド | |
| strong | 重要 | |
| em | 強調により伝えたいことが変わる(変わるということが重要) | |
| i | イタリック体 | |
| small | 小さくする | |
| mark | ハイライトする | |
| delete | 取り消し線。 | |
| insert | アンダーライン。新しく挿入したテキスト | |
| sub | 下付き文字 | |
| sup | 上付き文字 | |
| 引用 | ||
| blockquote | 引用に使用 | |
| q | 引用に使用。目安としては一文ぐらいの短文で使う。 | |
| abbr | abbreviationの略。略字や接頭語に使う（HTML,CSSなど)。これを使うとブラウザや翻訳システム、検索エンジンにとっていいらしい。 | |
| address | 記事や文書の筆者、持ち主の連絡先情報。メールアドレス, URL, 住所, 電話番号, SNSアカウント,などが使われる | |
| Cite | 創作物のタイトルに付けられる。(書籍、詩文、音楽、映画、絵、彫刻など) | |
| bdo | dir属性を使って文字の向きを設定する。rtl(right to left)右から左へ | |
| 複数行可、インライン可。 | ||
| a | リンクを作成する。メールアドレスも指定できる。ブックマークの作成(目次などの作成)。 | |
| target | 新しいURLを開く場所を指定する | |
| title | ||
| img | 画像を表示 | |
| map | イメージマップを作成 | |
| area | 画像ないの当たり判定を作成 | |
| picture | 画面のサイズに合わせて表示する画像を変更できる。sourceに関しては上から順に適用される。またpictureをサポートしていない場合やどのサイズにも当てはまらなかったときのために一番最後にimgタグを挿入する | |
| source | pictureで表示する画像の候補を指定する | |
| テーブル | ||
| table | テーブルを 作成 | |
| tr | 行を作成 | |
| th | 見出しのセルに使用 | |
| td | 実際のデータに使用 | |
| ul | unorder list順次なしのリストを作成 | |
| ol | order list順序ありのリストを作成 | |
| li | listのアイテムrを作成 | |
| dl | description list説明リスト | |
| dt | date term用語 | |
| dd | data description説明 | |
| グルーピング | ||
| div | ブロックを作成。スタイル、クラス、IDを設定するときに使う | |
| span | インラインを作成。スタイル、クラス、IDを設定するときに使う | |
| iframe | 他のhtmlの埋め込みが可能 | |
| base | root urlを設定できる(base href="https://www.w3schools.com/" target="_blank") |
フォーム
テンプレート
基本
basic.html
<!DOCTYPE html>
<html lang=ja>
<head>
<meta charset="UTF-8">
<title>This is title.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- fabicon -->
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<!-- import css -->
<link rel="stylesheet" href="/static/css/basic.css">
</head>
<body>
</body>
</html>
レイアウト
メインの選択肢は4つ
- css フレームワーク bootstrap
- floatを使う
- flexboxを使う
- css gridを使う
CSSフレームワーク
- メリット : 素早く、クォリティもある程度保証される
- デメリット : 学習コスト?
float
一番簡単だが柔軟性がない。なのでお勧めはできないらしい。
flexbox
フレックスボックスを使用すると、ページレイアウトがさまざまな画面サイズやさまざまなディスプレイデバイスに対応する必要がある場合に、要素が予測どおりに動作することが保証されます。
CSS Grid
CSSグリッドレイアウトモジュールは、行と列を備えたグリッドベースのレイアウトシステムを提供し、フロートや配置を使用せずにWebページを簡単に設計できるようにします。
参考になるサイト
- チュートリアル
- 仕様
- Mozila
- セキュリティ
- em、strong、boldの違い
- quotation and citation difference.
- カラー一覧
- ファビコン作成ができるwebアプリ
落書き
文章の意味を決める要素と、文もしくは単語の意味を決める要素がある。それとおまけで軽いフォーマット機能もある。
(section,header,h,p) (q, cite,strong,address) (insert,delete,i,b)
これらを組み合わせる
CSS
作法
- 単位と値の間に空白を入れてはいけない。
基本
1 CSSの基本構文
Selector { Property: Value; }
また { Property: Value; }の部分はDeclarationという名称
2
Declaration
仕様
- 同じ要素に対するスタイリングが2個あったとき最後に読み込まれた方が適用される。
- inline >>> 外部、内部(head内) >>> デフォルト の優先度でcssは適用される。
外部参照
SCSS
JavaScript
落書き
後で まとめなおす
- script type="text/javascript"は今は必要ない
- スクリプトをbodyの最下部で読み込むことによって表示が早くなる
- 外部ファイルを利用すると、キャッシングにより高速化、役割の分割による可読性、保守性の向上ができる。
- 主な出力形式は4つ
- 1 element.innerHtml=textを使用してタグ内に文字の挿入
- 2 document.write(text)を使って最後に文字の挿入
- writeは全てのhtmlを読み込んでから使う。出ないとhtmlがwriteで消される。
- なのでwirteはテストやデバッグときに使うといい。
- 3 alert(text)を使用 これにより ダイアログを作成できる。
- 4 console.log(text)ブラウザコンソールに出力
- (window.print())を使うことで一応印刷するかどうかのウィンドウが作成される。
TypeScript
JQuery
BootStrap
VS Code
Chrome
Web
Angler
Vue
Nuxt
React
Redux
これからの目標
CSS、JS、BootStrap、Angler or Vue or React、デザイン、セマンティクズ、ツール類。