初心者の私がHTML,CSSを一通り勉強し振り返って気づいたことなどメモ感覚で書いていきます。
HTML,CSSとは
HTMLとは
Hyper Text Markup Languageの略でマークアップ言語の一つ。普段目にするwebのほとんどはHTMLで作られていたりする。
CSSとは
Cascading Style Sheetsの略でウェブページのスタイルを指定するための言語である。HTMLと組み合わせて使うことができる。
HTMLだけでもウェブページのスタイルは作れるがそれだと使用用途が違うためにコードがぐちゃぐちゃになってしまう。そのためにHTMLは情報構造を指定、CSSはスタイルを指定と使い分けることになる。
HTML決まり文句
決まり文句とはコードを書いていく上で絶対に必要になる部分のこと、足りない部分があればコメントで指摘して欲しい。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
</body>
</html>
ものすごく簡単に書いたものになる。webサイトを作っていくとさらに書く要素が増えていくが最低限必要なものを書いた。
それぞれ説明していくと!DOCTYPE htmlはこれから書くものはHTMLですよ〜と指定してあります。
html lang="ja"はこれから書いていくHTMLは日本語ですよ〜と指定してます。
headの部分にはwebページに表示はさせないけどこの情報は書いておかないといけない！ってものを書いていきます。
meta charset="utf-8"は文字コードを指定していてこの記載がないと文字化けが発生してしまう可能性を防いでいる。utf-8以外にもあるので細かい部分は検索して欲しい。
titleはウェブページを開いた際にタブに表示される名前のこと。
便利なコード
ここからは自分がこれを使うと便利になると思ったもののメモをしていく
<ol>
<li>すごい</li>
<li>つよい</li>
<li>はやい</li>
</ol>
olタグ
1. すごい
2. つよい
3. はやい
<ul>
<li>すごい</li>
<li>つよい</li>
<li>はやい</li>
</ul>
ulタグ
・ すごい
・ つよい
・ はやい
<dl>
<dt>質問A</dt>
<dd>回答A</dd>
<dt>質問B</dt>
<dd>回答B</dd>
</dl>
dlタグ
質問A
回答A
質問B
回答B
<ul>
<li><a href="#about">このサービスについて</a></li>
</ul>
<h1 id="about">このサービスについて</h1>
ページ内リンク
これはとても便利です。例を上げるならば目次などです。
ページの上の方に書く目次にaタグをつけてhrefをこのようにつけてあげます、そしてその目次が表している部分にidを書いてあげます。そうするとこのサービスについてという文字をクリックしてあげるとページ内で指定した部分まで自動でスクロールしてくれます。注意点としてはこの方法でスクロールした際にurlにこの場合だとaboutと追記されてしまいそのままページリンクを他の人に共有した場合に自動スクロールした後のビューが表示されてしまいます。