note 毎日更新してます

html初学者の時に欲しかった知識、勉強すべきことまとめ

最近学校のイベントで一枚ペラのサイト(芸情展2018)を作ったのですが、その時学んだことや思ったことをまとめておきます。

 

html初学者にありがちなこと

僕が最初htmlに触れたのは1年半ほど前、何となくホームページでも作りたいなと思った時でした。当時、学校でc言語を勉強していたのでパソコンでカタカタ英数字を入力するのは慣れていました。

ここではhtmlを書くことも、一括してプログラミングと定義しますが、実はc言語と違って厳密にはプログラミングをするとは言えません。マークアップ言語と呼ばれるもので、簡単にいうと文字や形を翻訳しているだけに過ぎないのです。タグで括ることによって「ここは見出しだね」とか「君と君は同じグループね」みたいにしています。
なので特に難しいアルゴリズムを考えたりだとか、計算式をこねくり回す必要は基本的にありません。それにchromeなどのブラウザを使うと書いたことがすぐに表示できるので、プログラミングを始めようという人が最初に勉強させられる言語の一つです。

そしてプログラミングを勉強しようと思い立つ人はだいたいプロゲートやら、ドットインストールやらを見つけると思います。
僕もホームページを作る前にはその2つでちょっと勉強しました。

html初学者にとってはそういう学習サービスの言っていることが正義だし、僕も正しいと思っています。しかしああいうところで勉強できるのはタグの種類だとか大まかなコーディングの仕方までです。<p>で文章を囲おう。<h2>は見出しだよ。<head>の中にいろんなことを宣言しよう。こんな感じです。

学習サービスにしたがって勉強をすればある程度タグも覚え、何となく書くことも面白くなってきます。そして全部のステージをクリアして思うのです。「あれ、結局自分のホームページはどう作れば良いのか」と。
「どんなデザインにするか」を勉強していないので当たり前です。学習サービスで勉強するのはあくまでコーディングであって、デザイニングではないのです。用意されたデザインに合わせたコードだけをつらつらと書いて満足しているのです。

webデザインについて勉強すべき

コードだけを書くのもまあ楽しいっちゃ楽しいですが、自分オリジナルのホームページを作りたい時、フリーランスなどでフロントエンジニアとして仕事を得たい時、そんな人は絶対にwebデザインも同時並行で勉強するべきです。

綺麗だと思ったサイトを真似するところから始めましょう。そのサイトはどうやって作られているか、学習サービスで学んだ知識を元にして予想、そしてブラウザの「検証」機能(知らない人は調べてみてください)を使って答え合わせをする。また実際にコードに落としてみる。そんなことをしてデザインを学びましょう。

デザインのほか、勉強すると良いことがもう一つあります。それは「bootstrap」と呼ばれるフレームワークです。今時パソコンとスマホで対応するレスポンシブでないwebサイトの方が珍しいぐらいです。bootstrapのグリッド機能を勉強して、画面サイズに合わせた表示をできるようになると表現の幅がグッと広がります。

要素のまとめ方について知りたかった

htmlを勉強していて特に知りたかったことはこれです。

<div>でどこをまとめて、ページ内をスッキリさせるのか。そんなことを解説しているブログなどは探し方が悪かったのかどこにも見つかりませんでした。
まとめかたは千差万別、人によって違うらしいのですがある程度の指標が欲しかったです。どこをまとめるとcssが単純になるのか、class名はどうつけたら良いのか。

今思えば慣れるしかなかったのかもしれませんが。

これに関してはいつか暇な時にでも僕の考え方をまとめようかとも思っています。

 

htmlを学ぶ時、レベルアップを考えているなら

  • デザインを同時に勉強する
  • bootstrapについて理解する

ということをしてみたら良いよって話でした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です