HTMLの設定部分
最終更新日時 :
1人が閲覧中
HTMLの設定部分
日本語で書いた部分を英語にしたとき
| 設定 | <!DOCTYPE html> <html lang="jp"> | HTML開始 |
| <head> | 設定開始 | |
| <meta charset="UTF-8"> | 文字コード | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | 画面 | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | 古いブラウザ対応 | |
| * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } a { text-decoration: none; color: inherit; } ul, ol { list-style: none; } | リセットCSS | |
| <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> | JQUERYのCDN | |
| タイトル「〇〇」 | <title>〇〇</title> | |
| 概要文「〇〇」 | <meta name=“description” content=“〇〇”> | |
| アイコン「〇〇.png」 | <link rel="icon" href="./〇〇.png" sizes="16x16" type="image/png" /> <link rel="icon" href="./〇〇.png" sizes="32x32" type="image/png" /> <link rel="icon" href="./〇〇.png" sizes="48x48" type="image/png" /> <link rel="icon" href="./〇〇.png" sizes="64x64" type="image/png" /> <link rel="apple-touch-icon" href="./〇〇.png" sizes="180x180" /> | |
| CSSファイル「○○」 | <link rel="stylesheet" href="○○.css"> | |
| JavaScriptファイル「○○」 | <script src="〇〇.js"></script> |
○○の部分だけ書いてあとはコピーすればある程度のものができる。
VSコードにデスクトップの画像をスライドすれば画像を入れることができる。作ったHTMLと同じ階層に画像を入れないと./○○で呼び出せなくなる。１つ上のフィルダーは../○○。１つ下のフォルダーは./フォルダー名/○○になる。
このwikiではCSS内容をHTMLの中に入れて書くようにしている。別ファイルに分けてかく場合はCSSファイルを使う。CSSファイルで書く場合一番上に@charset "UTF-8";がいる。
コメント (HTMLの設定部分)
この記事を作った人
編集者紹介
未登録
