今からWebを作ってみたい初心者さんへ。今からWebを作ってみたい初心者さんへ。HTMLとCSSのお話2012年2月1日Webデザイン.Webを独学しようと思った時にまず始めにいやになるのが、新しい用語が多く、しかも英語やカタカナばかり...という事。今回はWeb制作の初心者さんの為に用語の意味をおさえながらHTMLとCSSを解説します目次1.「HTML」ってなに??1-1.簡単なHTMLファイルとブラウザでの表示1-2.HTMLファイルの基本構成を知る1-3.基本的なタグを知る2.「CSS」ってなに??2-1.「CSS」と「HTML」の関係2-2.「CSS」を使う3つのいいところ1「HTML」ってなに??HTMLとは、Webページを記述するためのマークアップ言語です。Language」の略です。文書の一部を「タグ」と呼ばれる特別な文字列で囲うことにより、見出しなどをわかりやすく表示したり、文字の大きさなども追加できます。1-1.簡単なHTMLファイルとブラウザでの表示まずは簡単なHTMLファイルと、それをブラウザで確認した時の画面表示をみてみましょう。黄緑の点線に囲われた部分をDOCTYPE宣言といいます。HTMLにも何種類かバージョンがありますが、今回はHTML5でのDOCTYPE宣言の書き方です。html要素DOCTYPE宣言の次の行からHTMLの内容がはじまります。「lang=”ja”」は「日本語のファイルです」という意味です。<html>〜</html>までがHTMLの範囲です。head部分ピンクの点線で囲われた部分はhead部分。<head>〜</head>までの範囲です。ここに文書情報を書いていきますよ、という意味です。charset=”UTF-8′′>こちらは文字コードの指定です。”UTF-8′′という文字コードで書きますという宣言です。”UTF-8′′の他には”Shift_JIS”などがあります。青の点線で囲まれた部分はbody部分。<body>〜</body>の範囲です。ここが実際にブラウザ上で表示される部分です。1-3.基本的なタグを知る<body>〜</body>や、<title>〜</title>などを“タグ”といいます。ここでは基本的なタグの例をあげてみます。ハイパーリンクその他、HTML5から新たに追加されたタグもあります。図形を描く↑Topに戻る「CSS」ってなに??HTMLと一緒によくでてくるのが「CSS」。CSSってなに??という方へCSSについて説明していきたいと思います。Sheets(カスケーディング・スタイルシート)の略で、HTMLというWeb言語の装飾部分を指定できる機能のことをいいます。「CSS」は「HTML」と併せて使います。一般的に「HTML」ファイルに基本要素を記述、「CSS」にデザインなどの装飾部分を記述します。HTML(要素)+CSS(装飾)でひとつのWebページを作ります。図にするとこんなイメージです。ひとつのWebページを作るのに、ファイルをわけるとなんだか面倒だと思う人もいるかもしれません。CSSを使うとたくさんのメリットがあります。2-2.「CSS」を使う3つのいいところデザインの指定を全てHTMLファイルに書き込むこともできますが、それをCSSに分けておくと便利なことがあります。編集の効率アップCSSにデザイン部分を記述しておくことで追々の修正作業がずいぶんと楽になります。「見出しの色を変更したい!」という時、HTMLファイルで見出しの色を指定していると、見出しの数だけ修正していかなければいけません。見出しが100個あれば、100個の修正作業が発生してしまいます。ところが、CSSで見出しの色の設定しておけば、CSSの見出しの色の指定のある1カ所だけ変更するだけで、全ての見出しの色を変更してくれます。これは便利!デザイン性がアップCSSでデザインを決めることによって、HTMLだけで記述するよりも、はるかに多くのことが可能です。多彩なWebデザインを作る時にもとても役立ちます。読み込みの速度がアップHTMLの記述と、デザイン部分をわけておくことで、読み込みの速度がアップします。データの容量も軽くなる所もいいところのひとつです。ここまでがWebの言語の「HTML」。装飾部分の「CSS」の基本的な構造です。新しい言葉ばかりがでてくるので初めは億劫かもしれませんが、少しずつ慣れていってもらえればと思います。これからも少しずつステップアップしていけるような記事をアップしていきたいと思いますので参考にしてもらえるとうれしいです。1Webクリエイターに便利なジェネレータ22選3Dタイポグラフィのチュートリアル色数を抑えたシンプルで洗練されたWebサイトのまとめ今からDreamweaverを習得する方へ。コメントをキャンセルメールアドレスが公開されることはありません。