HTML 備忘録
随時更新される HTML 備忘録集です
初めてWebサイトを作ってみようと考えている人ははじめてのWebサイト制作も合わせてご覧ください
これは、私が普段どうしているかという備忘録です。
違う使い方をしているという人もいるし、私が正しいという保証はどこにもありません。
概念
htmlは、<タグ>の形で書く文章自体のファイルを表します
<tag></tag>
HTML言語によってデザインを変更したり、サイトに動きをつけたりすることは基本的にはないし、あったとしても非推奨のものが多いのでJavaScript,CSSなどを使ってください。
基本の書き方
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<!-- 文字化け防止 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- IEで見たときに (そろそろいらないかも…) -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- スマホで見たときにくずれないように -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<!-- サイトのアイコンを指定する場合に必要 -->
<title>Title</title>
<!-- サイトタイトル -->
<link rel="stylesheet" href="main.css" />
<!-- 外部のCSSを指定する場合に必要 -->
<script src="main.js"></script>
<!-- 外部のJavaScriptを指定する場合に必要 -->
</head>
<body>
<!-- ここに本文を書きます -->
</body>
</html>
こんな感じのテンプレートを使っています。
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
は外してもいいと思います、今どきIE使って見る人がどれぐらいいるのか……って話ですし、IEだとそもそも動かないCSSやJavaScriptのコードもあるので、サイトがわざわざ対応する必要もないのかなと。
外して困ったことは一度もありません、みんなSafari,Chrome,Firefox使うでしょっていう思考です。
body内タグの種類
| 説明 | 用途 | 例 | |
|---|---|---|---|
| div | ブロック | ブロックを作る箱みたいな感じ | |
| h1~h6 | 見出し | タイトルとか、文章の途中で目立たせたいとき | |
| p | 文章 | 本文、説明のテキスト | |
| a | リンク | リンク、アプリのボタン | <a>こちら</a>をクリック |
| span | 文の要素 | 文の途中に置いて、JavaScriptなどで制御したりここだけスタイルを変えたり | 明日は<span style="color: cyan;">晴れ</span>です |
| style | CSS を埋め込む | そのページでしか使わないCSSを埋め込む | |
| script | JavaScript を埋め込む | そのページでしか使わないJavaScriptを埋め込む |
| 説明 | 用途 | |
|---|---|---|
| header | ヘッダー | ここはヘッダーと明示するため |
| nav | ナビゲーションバー | ヘッダーのボタン入れ |
| footer | フッター | ここはフッターと明示するため |
Webサイトを作ってみたい人へ
近々別の記事にするかもしれませんが、一応書いておきます。
自分の成果や活動をアピールするために、Webサイトは動きや画像を用いて効果的にアピールするためのとても良い手段です。
難しいこともあるかもしれませんが、基本的に無料、自分のペースで勉強して、１，２週間もあれば覚えられるぐらいの内容だと思います。
わからないことがあれば、誰かに連絡を取って相談するか、自分で調べるのも手段の一つです。
敷居を高く考えすぎずに、気楽にやっていれば自然とできるようになると思います。
(逆に言えば、コードを暗記して勉強のようにノートを取るよりも、楽しんで作りたいものを作るのが一番だと思います。こんなこと楽しくなかったら長続きしないので。鋼の意志を持ってやるというならそれも一つですが。)
最後に、いちばん大切なことは「分からないことは調べる」ということです。
Google先生に聞いてみれば大体の答えはありますし、英語で書かれていても頑張って読めばいいのです。 Google翻訳大先生も味方です。
どうしても出てこないときは知ってそうな人に聞くか、まったく別の方向からやるのが一番です。
私もたまにどうしたらいいか分からないことはあります。いろいろ調べて出来たときが一番楽しいです。
それでは、楽しいhtmlライフを！
このページの情報は以上です