2013年5月16日木曜日

すべては正確に情報を伝えるために | HTML5,CSS編

こんにちは、allWeb受講生digidog(デジドック)です。基礎講座の「最も重要な基礎部分の勉強」として、歴史のセクションを前回までにご紹介しました。今回から、HTML5本体の内容に触れながら部分的に気になったところをご紹介します。

HTMLとCSSとJavaScriptの関係 (役割は明確に)

言わずと知れた、三角関係(笑)じゃなくて、、、。HTML5のマークアップを学ぶとHTMLとCSSの関係のはっきりさもうなづけます。そして、JavaScriptはその利便性を向上させる為にその技術を使うということです。

「JavaScript自身が注意を引くようなものであるべきではなく、無理やり使うべきでない。」

▽引用元▽
http://200design.com/2012/01/13/000108.html

とあるように、JavaScriptの役割を理解し、有効に使い分けるべきというところから、CSSに関しても、基本は、HTMLを基礎基盤として、すべては正確な情報を伝える為の手段を、有効的にどのように使うかという事につきますね。

講座では、スカイツリーに例えて、建物の基礎部分、構造骨格を「HTML」ライティングやカラーなど装飾部分を「CSS」エレベーターや、エスカレーターなど、より動的に便利に利用できるよう機能などを加えた部分を「JavaScript」と説明していました。なるほどですね。

ここからは、文法や要素とタグのルール、属性についてや文書構造文書構造、CSSや、実際にタイピングしてワークショップへと講座は進みましたが、知らなかった事や、新鮮だった内容だけピックアップ。

HTML5の基礎文法

まずは、pタグとかaタグって言うのは間違いなんですね。開始タグと終了タグに、「おはよう」というテキスト(コンテント)をはさみ、全部が揃って「要素」なんですね。これは新鮮でした。

要素とタグのルール

ここでは、HTMLの歴史でも紹介していた、「厳格なルールによるエラー回避」の考え方があります。だから簡易的に省略ことや、大文字や小文字もOKにするなどは柔軟性をもたせた書き方なんだと納得できました。

バリデーターを使おう

正直今まではバリデーターは使ってませんでした。今はHTML5アウトライナーも併用してますが、これは面倒でもちゃんとチェックした方がいいですね。ちょっとしたミスで原因究明に時間がかかる事ってあると思いますが、消去法としても、まず、この関門を通過していれば、単純に表示などの不具合があった場合、原因はHTMLではないことになります。HTML5 Markup Validation Service

セクショニングコンテンツ

ここでは今までなかったHTML5での要素の意味を勉強。HTML5マークアップ基礎講座で詳しく勉強する事ができますが、最近はhgroupが予定通り廃止され、mainが追加されました。headerとfooterは比較的わかりやすですが、article aside nav section などは、内容の意図により解釈が違うため、難しいというより、「悩ましい」感じです。そこは日本語がわからないロボットになったつもりでソースをみていくのも勉強になります。

CSS個別制の仕組み

講座ではこちらのページのビジュアルをもとに解説していました。
また、なれるまでは階層構造を意識してCSSを記述するということも学びました。これが頭にあると、アウトラインも把握しやすいです。

マージンコラプス

受講生ブログで紹介される予定なので、さらっと。topのマージンとbottomのマージンが隣接する場合、大きい値の方のみマージンとして作用される事ですね。今思えばあれがそうだったのか〜。って感じですね。基本はbottomのみマージンを入れるようにルール化しておくと、すっきりします。

フロート

こちらは既に受講生ブログで紹介されているので、こちらをどうぞ。なるべくシンプルに作る事を心がけています。「インライン要素だって横に並ぶ」でもいいんじゃない?というか面倒くさがりなので、出来るだけ記述を管理する内容を減らしたいだけです。。。

そして最後に

最初に紹介した通り、「今日の一日で今まで買った本が 読めるようになります。」でしめくくり。 本当に、「この講座を受けてから本を読んだりネットで調べたりしていれば」、と思うと、どれだけ遠回りしてきたことかと思います。というわけで、もちろん次のステップへの受講を決意し、次はHTML5マークアップ基礎講座へ。

2012年に受講した時はなかったのですが、allwebにコース制ができたので、今後勉強される方は利用するといいかもしれませんね。講座はどれをとっても勉強にはなりますが、この基礎講座の考え方を土台に、次のステップ、その上にまた次のステップ、と進むので、セットで勉強した方がより良いと思います。

また、ピックアップした部分を詳しく紹介したり、他の講座での勉強の様子なども更新します。ぜひ「allweb受講生ブログ」を今後もチェックしてくださいね。

このブログについて

まだまだ勉強中の受講生ですので、間違った解釈や記載などがありましたら、ぜひ投稿をお願いいたします。さらに勉強していきますので、よろしくお願いいたします。Facebookでも投稿お待ちしています。

0 件のコメント :

コメントを投稿