見出し画像

HTMLが形になると嬉しい

結果が見えると嬉しいよね

練習開始

「Visual Studio Code」をインストールしてHTMLを書き始めた。
いやぁ、このツールは便利だ。行数は表示されるし、コード類は予測変換されるし、自動でダークモードになるし。初心者でもHTMLを書くだけであれば、何も不自由はない。ドラッグアンドドロップでブラウザに移動させれば、結果も表示される。結果がすぐに見られればデバッグが早い。これはありがたい。

CSSは少し引っかかった

前回紹介した本は例題、結果、例題、結果、とスモールステップで進めてくれる。モチベーションを維持するうえで、この方法は効果的であり、学ぶものとしては嬉しい。
CSSで装飾しようとしたのだけれど、これは少し先の項目で説明があるらしく、最初の方では詳しい説明はない。でも、CSSは記載されている。HTMLのどこに書けばよいのかわからなかった。
書籍の発行元、ナツメ社のWebサイトにサンプルがあったので、サンプルを確認するとどこに記述すればよいか、少しわかった。
<head>にCSSを書けば反映されるのか。

理解を深める

インプット(読む)、アウトプット(書く)

インプットとアウトプット、両方を複合することで効果的に学習できる。
学習については種々の書籍が発行されているので、そちらを参照して頂きたい。
私も同じような考えで、まずは読むことで未知の情報を得る。それを身につけるためにはインプットを反復するだけでは定着速度は遅い。アウトプットを多く行うことが大事だ。とにかく実践する。実践の中で分からないことが生じたら本に戻る。インプットしてからアウトプットする。

おー、書けてきたぞ

これをしておけば大丈夫。

  • DOCTYPE宣言

  • <html lang="ja">で日本語と定義

  • 文字コード設定のため、<meta charset="utf-8">と書く。
    私にとってはおまじないみたいなもの。詳細は知らなくてもいい。

  • <head>で情報記述エリアを作成

  • <body>に書きたいことを書く。

  • フッターが必要なら<footer>を書く。

  • CSSはとりあえず<head>に書く。違う場合もあるだろうけど。

あとは要素や属性を使って書いていく。原理を知るのも大事だが、今は原理よりも結果だ。なぜ?はあとからでもよい。

来週も書いていこう

HTMLは理解が深まったので、つまづかずに済みそうだ。問題はCSSだ。CSSの理解が深まれば、たいていのことはできそうだが、ここがデザインの肝であり、より複雑になるのだろう。
深追いしない程度に頑張ろう。

いいなと思ったら応援しよう!