あそびラボ

お問い合わせ

MENU

あそびラボ

お気軽にご相談ください

  • 03-6905-8103
  • 受付時間:平日10:00-18:00

ご相談・お問い合わせ

講座1 まずは何から学べばいいの?2019.9.9

ふくろう先生
ふくろう先生

はじめまして。
Web講座講師のふくろう先生と申します。

パンちゃん
パンちゃん

生徒のパンちゃんです。
Webサイトを作るのは全くはじめてのド素人です。

ふくろう先生
ふくろう先生

なるほど!
では、何から学べばよいかも含め
楽しみながら作ってみるかね。

パンちゃん
パンちゃん

はい!
基本の基本からよろしくお願いします。

まずはHTMLとCSSを学ぼう!

まずは、基本中の基本であるHTMLCSSを勉強しましょう。

ほとんどのWEBサイトは、HTMLとCSSという言語で見た目が作られています。
見た目以外、何があるの?と思うかと思いますが、動きや機能的なことは
JavaScriptなどで作ります。

では、HTMLとCSSって何なの?ってことですが
簡単に言うと下記になります。

HTML・・・文字
CSS・・・文字の色や大きさ、背景の色や配置などを指定するための言語

HTMLは文字?って思いますよね^^;

HTMLとは、HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の
略称で、その名の通りWebページにテキスト(文字)を書く言語になります。

では実際にHTMLファイルを作ってみましょう。

HTMLを書いてみよう!

HTMLを書くのは、思っているよりはるかに簡単。

① Windowsの場合、標準搭載されている「メモ帳」を開きます。

② そこに何でもいいので、文字を書いてみましょう。

③ 文字を書いたら、メモ帳のファイルをhtml形式で保存します。
  やり方は簡単。
  ファイル名を「sample.html」にします。
  ※拡張子が.htmlであれば、ファイル名は何でも大丈夫です。
  ※文字コードは「UTF-8」で保存してください。

すると↓下記のようなファイルが出来上がります。

④ これをダブルクリックすると自分のブラウザに先ほど書いた文字が表示されます!
  たったこれだけでHTMLが書けるんです。

でも、「HTMLってもっと難しく見えるよ」っていう方もいますよね。

それはタグという物をHTMLには書くからです。

タグって何?

タグって何なのでしょうか?

簡単に言うと、タグとは文字に「意味」を与えてあげる印みたいなものです。

下記の例のように、文字をタグで囲ってあげることにより、
ただの文字がp(段落)やh1(見出し)といった意味を持つようになります。

【例】

<P>まずは文字を表示してみよう</P>

<h1>h1は大見出し!</h1>

たったこれだけで、ブラウザでそのhtmlファイルを開くと下記のようになります。

もちろん、HTMLのタグは他にもいくつかありますが、
基本的にタグで囲ってあげるだけで、文字に意味を持たせることが
出来るようになります。

他にも<h2>タグや、<li>(リスト)タグ等、いろいろありますが
タグの種類はそこまで多くないので、1つずつ覚えていけば
比較的すぐマスター出来ます^^

CSSとは?

HTMLは、なんとなくわかって頂けたと思いますが、CSSが何かわかりませんよね。

CSSとは、(Cascading Style Sheets)とはカスケーディング・スタイル・シートの略称になり、
その名の通り、Webページのスタイルを指定するための言語です。

先ほどのHTMLで<p>(段落)タグなどを使いましたが、cssは<p>タグの
文字サイズはいくつ等、文字の大きさや色など、HTMLで書いた物を
見やすくしたりデザイン性を持たせることが出来ます!

詳しくは次回に説明させて頂きますね。

 

パンちゃん
パンちゃん

Web制作って難しそ~って思ってたけど、
もしかしたら私にも出来るかも!

ふくろう先生
ふくろう先生

ただ作るだけなら簡単じゃが、
イメージした物を形にするのが大変じゃ!
そのために少しずつ勉強しよう!

へっぽこ Web講座一覧へ

池袋・練馬近郊でホームページ制作のご相談をされたい方はこちら ▶