【第1回】ウェブデザイン技能検定3級勉強法~HTMLの基本~

どうも瀬戸です。

先日お知らせいたしました「ウェブデザイン技能検定3級の勉強法」の記念すべき第1回です!

アップの仕方は悩んだ結果、私の使ったガチノートを振り返りながら内容について解説していくことにしました!

これからウェブデザイン技能検定3級を受験予定の皆様!ぜひ参考になさってください!

はじめに

まずはじめに、今回は「第1章 HTMLの基本」となっていますがテキスト自体は知人に譲ってしまったため、

  • なんの第1章なのか…
  • 2章はあるのか…
  • どういう分け方になっているのか…

さっぱりわかりません!爆

私のノートだよりの勉強振り返りになっております。

ご了承くださいませ!

第1章 HTMLの基本

【第1回】ウェブデザイン技能検定3級勉強法~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ファイルが完成します。

メモを作成して…

 

【第1回】ウェブデザイン技能検定3級勉強法~HTMLの基本~

memoという名(ファイルの種類:テキスト文章、拡張子:.txt)で保存すると…

【第1回】ウェブデザイン技能検定3級勉強法~HTMLの基本~

テキストファイルとして保存されます!

【第1回】ウェブデザイン技能検定3級勉強法~HTMLの基本~

拡張子を「.html」にして保存すると…

【第1回】ウェブデザイン技能検定3級勉強法~HTMLの基本~

ブラウザのアイコンになってhtmlファイルとして保存されます!

【第1回】ウェブデザイン技能検定3級勉強法~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の記述の方法」をお送りします!

それでは~♪

 

WEBデザイナーを目指す方へ朗報!

WEBデザイン講座「テックアカデミー」では、無料の説明会動画を閲覧できます。

  • 独学は難しい…
  • ひとりで勉強できない…
  • プロに質問したい…

という方は、ぜひ一度ご覧になってはいかがでしょうか?

>>テックアカデミーの詳細はこちら!

 

【第1回】ウェブデザイン技能検定3級勉強法~HTMLの基本~” に対して1件のコメントがあります。

  1. SEO Service より:

    Awesome post! Keep up the great work! 🙂

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です