コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

きっと何者にもなれない僕だから

シンタックスハイライト機能が使いたいがためにHTMLの書き方についての記事をかいたよ

やりたいことをやってる気持ち

HTMLってなんだろうという人がいて、僕自身がこのブログで使ってみたい機能があるからそれについて説明しながら記事をかく。
これってウィンウィンでしょう。うん、そうだね自己満足だよ。
だけど書きたいから書くよ。


まずは「シンタックスハイライトって何?」ってところからだね。

シンタックスハイライト

はてな記法では、スーパーpre記法でプログラムのソースコードなどを表示する際に、シンタックスハイライト(Syntax highlighting、言語ごとの構文に応じた色付け表示)が利用できます。

要するにコードを表示した時にわかりやすく色分けしてくれる機能だよ。深いことは説明しないよ。
僕が使ってみたいと思ってる機能だよ。

詳しくはこちらを見てね。
[はてな記法]ソースコードを色付けして表示する(シンタックスハイライト) - はてなブログ ヘルプ



さてここからが本題、HTMLについて語るよ。

HTMLって何?

ウェブ上で見るための文書の構造を決めた言語のことだよ。
HyperText Markup Language」の略だよ。

書き方は簡単。メモ帳を開いて、<>と</>のタグで囲って構造を決めていくだけだよ。
そんなわけで下に例を示すよ。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>タイトル</title>
</head>
<body>
	<p>ページの中身</p>
</body>
</html>

これを「test.html」で保存してブラウザで開くと下のように表示されるよ。
f:id:andron:20160712203401p:plain

誰も得しない説明とか

そうなんだ。僕がやりたいことはもうここで終わってしまったのでこれ以降は消化試合なんだ。
でも記事にするからにはちゃんと書くよ。

① <!DOCTYPE html>
 おまじない。DOCTYPE宣言とか呼ばれてるよ。
 これを最初につけないとブラウザごとでレイアウトが崩れたりするよ。

② <html>
 html文書であること示すタグだよ。
 中に<head>と<body>のタグが入ることでhtmlと呼ばれる文書になるよ。

③ <head>
 文書の情報を示すタグだよ。タイトルとか、メタデータとか、スタイルとかそんな情報が入るよ。
 表示した時に見えない情報がここに入る感じだよ。

④ <body>
 文書の本体を示すタグだよ。ここでは段落であることを指す<p>タグが入っているよ。

説明おしまい。あとは必要な情報をごちゃごちゃと<head>、<body>に書き込んでいけばもっと見栄えのするページができるようになるよ。

今回はこれでおしまい。また次回お楽しみに。