ういろ Pages

Appearance

HTML 備忘録集 ​

随時更新される HTML 備忘録集です
初めてWebサイトを作ってみようと考えている人ははじめてのWebサイト制作も合わせてご覧ください

これは、私が普段どうしているかという備忘録です。
違う使い方をしているという人もいるし、私が正しいという保証はどこにもありません。

概念 ​

htmlは、<タグ>の形で書く文章自体のファイルを表します

html
<tag></tag>

HTML言語によってデザインを変更したり、サイトに動きをつけたりすることは基本的にはないし、あったとしても非推奨のものが多いのでJavaScript,CSSなどを使ってください。

基本の書き方 ​

html
<!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="/core/Data/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>

こんな感じのテンプレートを使っています。

5行目の

html
 <meta name="viewport" content="width=device-width, initial-scale=1">

は外してもいいと思います、今どきIE使って見る人がどれぐらいいるのか……って話ですし、IEだとそもそも動かないCSSやJavaScriptのコードもあるので、サイトがわざわざ対応する必要もないのかなと。
外して困ったことは一度もありません、みんなSafari,Chrome,Firefox使うでしょっていう思考です。

body内タグの種類 ​

よく使うタグ ​

説明用途例
divブロックブロックを作る箱みたいな感じ
h1~h6見出しタイトルとか、文章の途中で目立たせたいとき
p文章本文、説明のテキスト
aリンクリンク、アプリのボタン<a href=”https://~~”>こちら</a>をクリック
span文の要素文の途中に置いて、JavaScriptなどで制御したりここだけスタイルを変えたり>明日は<span style="color: cyan;">晴れ</span>です
styleCSS を埋め込むそのページでしか使わないCSSを埋め込む
scriptJavaScript を埋め込むそのページでしか使わないJavaScriptを埋め込む

まあまあ使うタグ ​

説明用途例
headerヘッダーここはヘッダーと明示するため
navナビゲーションバーヘッダーのボタン入れ
footerフッターここはフッターと明示するため

Webサイトを作ってみたい人へ ​

近々別の記事にするかもしれませんが、一応書いておきます。
自分の成果や活動をアピールするために、Webサイトは動きや画像を用いて効果的にアピールするためのとても良い手段です。
難しいこともあるかもしれませんが、基本的に無料、自分のペースで勉強して、１，２週間もあれば覚えられるぐらいの内容だと思います。

わからないことがあれば、誰かに連絡を取って相談するか、自分で調べるのも手段の一つです。
敷居を高く考えすぎずに、気楽にやっていれば自然とできるようになると思います。
(逆に言えば、コードを暗記して勉強のようにノートを取るよりも、楽しんで作りたいものを作るのが一番だと思います。こんなこと楽しくなかったら長続きしないので。鋼の意志を持ってやるというならそれも一つですが。)

最後に、いちばん大切なことは「分からないことは調べる」ということです。
Google先生に聞いてみれば大体の答えはありますし、英語で書かれていても頑張って読めばいいのです。 Google翻訳大先生も味方です。

どうしても出てこないときは知ってそうな人に聞くか、まったく別の方向からやるのが一番です。
私もたまにどうしたらいいか分からないことはあります。いろいろ調べて出来たときが一番楽しいです。

それでは、楽しいhtmlライフを！

2024 © famisics