Web制作の基本 「 マークアップ 」
2014年 01月 23日
こんにちは、Webデザイン学科1年生の高橋です。
今までもマークアップの練習をしていたのですが、
1月に入ってからいつも以上にマークアップの課題が増えました。
マークアップは、機械が内容を理解するための重要なことです。
マークアップを適切にすることによって、
Googleなどの検索エンジンでヒットしやすく、
アクセスしてもらえる機会を増やすことができます。
HTML5が出る前までは、"div"というタグで
マークアップが一般的だったのですが、
"header" , "section" , "article" , "aside" , "footer"などの意味をもったタグで
マークアップをしていきます。
今までのHTML4.01なら、意味を考えずに、
"div"で囲めばよかったので簡単でしたが、
HTML5になってからは一通り内容を見て、
重要度を考え、文書として必要な部分をsection、
内容として必要な部分をarticle、なくても問題がない部分をasideで囲みます。
この画像は、エキサイトブログのCSSを適用させていないときの状態です。
これでは、サイトとして見たくないですよね。
ですので、CSSで装飾していきます。
CSSでは、Internet Explorerのバージョンによっては
適切に表示されないプロパティもあるので、
そこを考えながら装飾していきます。
そして、スマートフォンにも対応させるために、
CSSファイルを分岐して実機で動作確認もします。
Webはいろいろと覚えることがありますが、敷居は低い方だと思います。
一度、タグやプロパティを覚えるとやりたいことができるようになり、
楽しさを実感できるようになりますよ!
実際自分はゲームとか、遊ぶよりも大好きですw
Javascriptを使わずに、画像を使わずにこんなものを作ってみたりもしてました。
http://idolnfo.com/created/ios7/
最後に、CSSは娯楽です!!!
今までもマークアップの練習をしていたのですが、
1月に入ってからいつも以上にマークアップの課題が増えました。
マークアップは、機械が内容を理解するための重要なことです。
マークアップを適切にすることによって、
Googleなどの検索エンジンでヒットしやすく、
アクセスしてもらえる機会を増やすことができます。
HTML5が出る前までは、"div"というタグで
マークアップが一般的だったのですが、
"header" , "section" , "article" , "aside" , "footer"などの意味をもったタグで
マークアップをしていきます。
今までのHTML4.01なら、意味を考えずに、
"div"で囲めばよかったので簡単でしたが、
HTML5になってからは一通り内容を見て、
重要度を考え、文書として必要な部分をsection、
内容として必要な部分をarticle、なくても問題がない部分をasideで囲みます。
この画像は、エキサイトブログのCSSを適用させていないときの状態です。
これでは、サイトとして見たくないですよね。
ですので、CSSで装飾していきます。
CSSでは、Internet Explorerのバージョンによっては
適切に表示されないプロパティもあるので、
そこを考えながら装飾していきます。
そして、スマートフォンにも対応させるために、
CSSファイルを分岐して実機で動作確認もします。
Webはいろいろと覚えることがありますが、敷居は低い方だと思います。
一度、タグやプロパティを覚えるとやりたいことができるようになり、
楽しさを実感できるようになりますよ!
実際自分はゲームとか、遊ぶよりも大好きですw
Javascriptを使わずに、画像を使わずにこんなものを作ってみたりもしてました。
http://idolnfo.com/created/ios7/
最後に、CSSは娯楽です!!!
by gakuseiblog
| 2014-01-23 18:23
| Webデザイン学科