ホーム > HTML & CSS 学習 > 学びました!

学びました!

教科書

ウェブサイト制作についてたまにはがっつり学習すると良いですね。たいへん勉強になりました。

教科書の感想

コーディングの詳しい手順とその理由がひとつひとつ解説されているのでとても理解しやすかったです。

さらに、一般的なコーディングだけでなく、より良く見せるための特別なコーディングのテクニックが素晴らしい!

リスト記号を画像データにする、list-style-image は位置がずれても微調整ができないが、教科書テクニックなら1px単位の正確な位置調整ができて、よりシャープな印象にかわるのが分かりました。

リスト記号の違い
普通のリスト list-style-image 教科書のテクニック
  • リスト
  • リスト
  • リスト
  • リスト
  • リスト
  • リスト
  • リスト
  • リスト
  • リスト

画像を使わずにCSSだけで作るボタンもすごいテクニック!CSSの表現の組み合わせが絶妙。こういう複雑なコーディングも一行ごとに説明があり難なく理解できました。

すごいボタン

そのほかの(私の)驚きの声…

  • 過去の学習を振り返ってみると、数年に一度しか勉強していませんでした。なので、ベンダープレフィックス記述のまま放置しているものがすでに実装されているのをいくつか発見。書き直さないと!
  • 理由と対策がよく分からないままになっていた「フロートしたら高さがなくなる問題」の解決策がわかりました。
  • line-heightの説明がとても分かりやすく、よく理解できました。いままでは単純に行の幅という認識だった。
  • ウェブフォント、jQuery、Googleフォームを初めて使いました。
  • ほかにもいろいろ、えっ、これそうだったの!という説明多し。とにかく、著者の方のどこまでも詳しく誰よりもわかりやすく説明してくれる説明力がすごい!!!

私の疑問と、いただいた回答

「作りながら学ぶ HTML/CSSデザインの教科書」の著者の高橋さんにこのサイトをみていただき、これらの疑問にたいする回答をいただきました。とても分かりやすくたいへんありがとうございました。

【p.31】セクションタグでアウトラインを明示するなら、見出しタグh1〜h6の意味がなくなってしまうのではないか?

sectionで明示するなら、基本的には見出しレベルはどれでもよくなります。 ですが、これまではh1〜h6の見出しレベルが非常に大切でしたので、急に見出しタグのレベルがなくなると、実用的には不都合な面も多いので、見出しレベルがなくなることはおそらくないでしょう。

HTML5の仕様策定は、このような過去の仕様でも困ることがないように・・ということも考慮して進んでいます。

このあたりは、やっぱり微妙ですが、現在も探りながらHTML5の仕様策定が進んでいて、 実際のユーザーの動向に合わせて変わって行く場合もあるかもしれません。

<section>タグで入れ子にしてあるとぱっと見、分かりにくいです。<section class="h1">とかどうだろうとか考えてしまいます…。

ついつい囲み忘れてしまうので、見出しタグは当分手放せません。

【p.123】2.id属性を追加する.には「ページのヘッダー・フッターはページ内に1度しか登場しない固有の要素」とあるが、【p.30】ではひとつのページ内にそれぞれ2つのヘッダーとフッターがマークアップされているのはどうしてだろう?

<header><footer>タグ自体は、ページ内に何度登場してもかまいません。

このページで固有と言っているのは、タグではなく、ページ全体のヘッダーフッターのことを指しています。

ページ全体のヘッダーフッターはページ内に1度しか登場しないので、ここはid属性でマークアップしましょう。
id属性を付与すれば、他のheader・footerタグとは異なり、 ここのページヘッダー・ページフッターは一度しか登場しない固有の要素であることがわかりやすくなるというニュアンスです。

そもそも<header><footer>タグがなぜ生まれたかを考えると、いままでも(機能的に)よく使われていたので初めから定義しておこうということなのかな?と思いました。

<div id="header">だったのを<header>にしたのかな、と。元はdivタグだから何個あってもOK、と思う反面、id="header"が複数あるとNGな気も。⇚ダメって言われました(>_<)

id属性でマークアップすれば良いということですが、なるべくシンプルな構成でできるように考えます。

HTML5から使われるようになったセクションタグ、構造を示すタグの理解がイマイチ。なくても、いい加減にしてもウェブページ自体は表示できてしまうのでより難しいと感じた。これはもう少し研究します…。

なるべく構造に沿ったマークアップをすることが望ましいですが、 そこにこだわるあまり、面白いことができなくなったりするのであればあきらめても良い部分もあると思います。

HTML5/CSS3もこの先どんどん進化して行くはずですし、Webの未来を正しく予想するのはなかなか難しいことです。 現在のところは、自分の意図が明確なマークアップをすることができれば問題ないと、個人的には考えています。

私も「自分の意図が明確なマークアップ」を心がけます。

参考サイトを教えていただきました

ページの先頭へ戻る