うぃろぅ.log

140字で綴りきれない日々の徒然備忘録

【FjordBootCamp】4日目 HTMLの基礎に触れる

うぃろぅです。

HTMLについて学んでいきます。

3日目もHTMLに取り掛かっていたのでタイトルは4日目です。

HTMLとはなんぞや

以前私が論文の書き方についてレクチャーを受けた時、

○○とは何か。辞書で調べてみた。

という書き出しはしないように、とアドバイスを受けた。

HTMLとは何か。Wikipediaで調べてみた。

HyperText Markup Language - Wikipedia

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ、HTML(エイチティーエムエル))は、ハイパーテキストを記述するためのマークアップ言語の1つである。

トートロジーかよ。

白鳥とは、白い鳥のことである。

みたいなものでは…?

書いてみる

ともあれ、HTMLとはWebページ用に文章を修飾する記法のことらしい。

例えば、

<h1>見出し1</h1>
    <h2>見出し2</h2>

と書くと

見出し1

見出し2

と表示される。

基本的なことは以下のページを読めばわかる。

HTMLとは?-HTMLの基本

ちなみにこのサイトには実際に手を動かしてサンプルページを作るページ、

ウェブ制作チュートリアル-HTMLクイックリファレンス

があり、これを進めていけばCSSも理解できるようになっている。
私はこれを撤退が決まって時間ができたプロジェクトの業務時間中に1週間ほどで終わらせたが、
わかりやすくまとまっており、オススメ。

ここで学んだことを下地にして課題やればなんとかなるだろうと思っていたら、
そんなことはなかった。

注意すべき点

自分しかいじらないページだからなんでもいいかーってゆるふわと書くことはもちろん可能だが、
サイトが公開されていればHTMLは誰でも参照できる。

例えばはてなブログのトップページで右クリックして、
[ページのソースを表示]を選択すると、こう見えるはず。

f:id:vviilloovv:20181117161553p:plain

上部の怒涛の空行はなんなんだろう…?

あんまりない(と思う)が、例えば電車などで知らない人に
「あのサイトHTMLの書き方汚いよねーwwww」
なんて言われたくないでしょう??
ちなみに私はそんな話題を振る人とお話ししたくない

ということで、できれば以下の点を意識したい。

改行ルールの統一

hsectionの閉じタグ後には空行を入れるなど。
入れるにせよいれないにせよ混在が一番キモチワルイ。

brタグをむやみやたらに使わない

使うなという話ではなく、同じ段落だけれど確実に行頭に持っていきたいという場合以外はpタグの方がいいという話。
最近のサイトはだいたいどこもレスポンシブ対応していて、サイトを見る端末やブラウザの横幅によって改行される場所が勝手に変わる。

なので、PCで見るう場合にはわ
かりやすくても、
スマホから同じサイトを見た場
合、
改行される箇所がPC表示用のた
め、
非常に見づらい。

↑このようなことが起きる。
ガラケーでよく見た風景だ…。

まあ、そもそも1文を短くすれば良い話である。
目指せ要約名人。

インデントを綺麗にする

HTMLに限らず、プログラミングをする場合でも必須。
これができていないとめちゃくちゃ見づらいコードが誕生する。

ソースは他人の見やすいように書く。
他人とは1ヶ月後の自分も含む。これ大事。

見た目を変えたい場合

CSSを使おう。
私もこれからマスターしていく。

短いけれど今回はここらで。
目指せ社会的マッチョ、ということでこれからも精進していきます。

ではまた