どうも瀬戸です。
先日お知らせいたしました「ウェブデザイン技能検定3級の勉強法」の記念すべき第1回です！
アップの仕方は悩んだ結果、私の使ったガチノートを振り返りながら内容について解説していくことにしました！
これからウェブデザイン技能検定3級を受験予定の皆様！ぜひ参考になさってください！
はじめに
まずはじめに、今回は「第1章 HTMLの基本」となっていますがテキスト自体は知人に譲ってしまったため、
- なんの第1章なのか…
- 2章はあるのか…
- どういう分け方になっているのか…
さっぱりわかりません！爆
私のノートだよりの勉強振り返りになっております。
ご了承くださいませ！
第1章 HTMLの基本
HTMLとは
HTMLとは、Hyper Text Markup Languageの頭文字をとったもの。
WEBページを作成するための言語
という意味です。
そう、HTMLって言葉のひとつなんですね。
そしてこの略す前のHyper Text Markup Languageですが、「なんの略でしょう？」という問題として出る場合があります。
4択問題なので、なんの略だったかさらっと覚えておいてくださいね。
HTMLファイルとは
HTMLファイルとは、HTMLが書かれたファイルのことです。
拡張子（ファイルの種類を識別する文字列）は、「.html」または「.htm」。
拡張子と聞くと聞きなれないかもしれませんが画像ファイルである「.jpg」は有名ですよね。
この拡張子があることで、パソコンはこのファイルがなんのファイルなのか認識することができます。
HTMLファイルは、テキストエディタで作成します。
テキストエディタは文字情報のみのファイルを作成するツールで、メモ帳がもっとも有名ですね！
ただ、ウェブデザイン技能検定3級を受けるのであれば、メモ帳以外のテキストエディタを使用した方がいいです。
私は、メモ帳しか使っていなかったので、実際に試験を受けたときに非常に困りました…
有名どころでいうと、
- Terapad
- サクラエディタ
- Atom
あたりでしょうか？
ぜひ使いやすいものを見つけて、使い慣れておいてください！
テキストエディタで作成したファイルを「.html」または「.htm」の拡張子をつけて保存するとHTMLファイルが完成します。
メモを作成して…
memoという名（ファイルの種類：テキスト文章、拡張子：.txt）で保存すると…
テキストファイルとして保存されます！
拡張子を「.html」にして保存すると…
ブラウザのアイコンになってhtmlファイルとして保存されます！
私はクローム使いなので、クロームのアイコンになってます。
このHTMLファイルを…
- ブラウザで開く…WEBページが表示される
- テキストエディタで開く…記述内容が表示される
となります。
CSSとは
CSSとはCascading Style Sheetsの頭文字をとったものです。
WEBページの見栄えを設定する言語
という意味で、これも言葉のひとつです。
過去問でCSSがなんの略か聞かれた記憶はありませんが、こちらもさらっと覚えておくとよいでしょう。
CSSファイルとは
CSSファイルとは、CSSが書かれたファイルのことです。
拡張子（ファイルの種類を識別する文字列）は、「.css」。
CSSファイルもHTMLと同じくテキストエディタで作成します。
ホームページの見た目を指定するのがCSSの役割です。
ブラウザで
- HTMLファイルのみを開く→htmlに書かれた文章のみが表示される
- HTMLファイル+CSSファイルを一緒に開く→CSSに書かれた見栄えも反映されて表示される
となります。
HTMLとCSSの切り分け
HTMLとCSSの役割はわかりましたでしょうか？
WEBサイトは、
- htmlで文章構造
- CSSで見栄え
この2つから成り立っているのです。
ちなみに…
今回のコンテンツ、過去に記事で書いておりました…
重複じゃないかい！！！
その記事はこちら
＞＞使い分けで変わるデザイン力！HTMLとCSSの使い分け方法
なぜか記述内容を画像でアップしている…はて、当時の私は何を考えているのか…
今回の方が文章で詳しく説明していますが、
- HTMLファイルをブラウザで開いたとき
- HTMLファイルにCSSファイルを反映させてブラウザで開いたとき
の見本が載っていますので、よかったら見てくださいね！
私のノート1ページ目はここまで！
次回、「HTMLの記述の方法」をお送りします！
それでは～♪