図解でよくわかるネットワークの重要用語解説
☆オススメ本紹介☆
こんなにわかりやすいネットワーク入門書があったでしょうか。
図解入りでわかりやすく、なんとなくわかったつもりでいた用語もしっかりと学ぶ事ができました。
とにかくもう解説がものすごく優しくてわかりやすい!(インターネット関連の本は往々にして初心者に冷たいので…)
Web業界に関わらず、
インターネットに関わる仕事をしている人、ただ単にインターネットに興味がある人、
すべての人におすすめです!
[改訂3版] 図解でよくわかる ネットワークの重要用語解説
第6回:CSSとは?
大分更新が遅れてしまいました。
すいません。
今回は”CSS”というものについて話をしようと思います。
まずは前回のおさらい。
前回、WebサイトはHTMLというものを使って作られているという話をしました。
これはインターネットを使うPC同士の”約束事”のようなものですね。
日本人同士が日本語を使ってコミュニケーションがとれるのと一緒で、
HTMLを使用しているPCはWebサイトを視覚的に共有できます。
(厳密に言えば視覚的な共有だけではないですが)
日本から海外のホームページにアクセスしても正常にWebサイトを見ることができるのはこの為です。
もしも世界中の人が日本語を使っていれば誰とでも話せるようになりますよね?
まぁ感覚としてはそんなもんだと思います。
んで、ここからCSSの話に入るのですがその前に。
まず前提として、HTMLはWebサイトのテキストやコンテンツを扱うものだと覚えておいて下さい。
テキストというのはWebサイト上の文章です。
コンテンツというのはWebサイト上の内容です。
このサイトで言えば例えば上の方にあるタイトル(”23歳高卒ニートがWebディレクターになれるワケがない”)や、今みなさんが読まれているこの文章なんかはその辺に含まれます(まぁテキストもコンテンツなわけですが…)。
つまりざっくり言えば、
HTMLはWebサイトの骨組みを成すモノ
と覚えておいて下さい。
んで、ここでCSSというものが出てきます。
CSSは"Cascading Style Sheet"と呼ばれるスタイルシートの一種です。
スタイルシートというのは、HTMLのレイアウトを設定する仕組みです。
つまり、HTMLはWebサイトにどのような情報を記載するか、という骨組みを作り、
スタイルシートはWebサイトをどのようなレイアウトで表示するか、という肉付けを行うという事です。
ざっくり言えば、
人間でいう”骸骨”がHTML、”お肉”がCSSですね。
※ちなみにスタイルシートはCSS以外にもありますので、上の定義にはCSSではなくスタイルシートという言葉を入れた方が正確です。ただ、実際はほとんどCSSしか使われてないみたいなんで、このブログではとりあえずCSSという言葉を使っています(私も他にどんなスタイルシートがあるのか知りません)。
このCSSというものがヒジョ―――に便利なんです。
例えば、Webサイトが3ページあったとします。
これは単純にHTMLが3枚必要です。
もしHTML内でスタイルを指定したとすれば(推奨できませんが、そういう事もできます)、
スタイル指定をしたHTML×3枚が必要になります。
3ページすべてが違うレイアウトなら仕方ないのですが、もしもこのブログのように全てのページのレイアウトが同じだったら、同じレイアウト指定を3回に渡って繰り返し書かなければいけません。
100ページだったら100回、1000ページだったら1000回です。
しかしこのCSSをHTMLとは別に保存しておけば、HTMLからリンクを指定するだけで、Webサイトのレイアウトやカラーリングを一瞬で変えられるのです。
例え話で言えば、まず”A”というコーディネートがあったとします。
Aのコーディネートは、麦わら帽子とブラウスとスカートとサンダルの組み合わせです。
この"A"がWebサイトでいうCSSになります。
次に、裸の女の子を100人用意します(すいません、めちゃくちゃ卑猥です)。
この”女の子100人”が、WebサイトでいうHTMLになります。
そしてこの女の子100人が、
「私たちはAのコーディネートを選択します!」
と一斉に宣言することで(HTMLにリンクを組み込むことで)、
一瞬のうちに全員が、麦わら帽子とブラウスとスカートとサンダルでコーディネートされた女の子に変身するわけです(個人的には裸のままでいて欲しいけど…)。
つまりCSSを使えば、HTMLの一枚一枚にいちいちスタイルを指定しないで済むという事です。
逆に言えば、「あ、ここだけちょっとこういう風に変えたい」と思ったときに、
CSS一枚をちょっと書き換えるだけで、100枚分1000枚分のレイアウトを一斉に変更できるのです。
というわけで、CSSはヒジョーに便利なんです。
これもすぐに覚えられるので、HTMLとセットで覚えましょう。
ただ、使いこなすのがなかなか難しいわけですが……。
じゃあ今回はここまで!
寂しいから読んでる人いたらコメントください!泣
(続く)
すいません。
今回は”CSS”というものについて話をしようと思います。
まずは前回のおさらい。
前回、WebサイトはHTMLというものを使って作られているという話をしました。
これはインターネットを使うPC同士の”約束事”のようなものですね。
日本人同士が日本語を使ってコミュニケーションがとれるのと一緒で、
HTMLを使用しているPCはWebサイトを視覚的に共有できます。
(厳密に言えば視覚的な共有だけではないですが)
日本から海外のホームページにアクセスしても正常にWebサイトを見ることができるのはこの為です。
もしも世界中の人が日本語を使っていれば誰とでも話せるようになりますよね?
まぁ感覚としてはそんなもんだと思います。
んで、ここからCSSの話に入るのですがその前に。
まず前提として、HTMLはWebサイトのテキストやコンテンツを扱うものだと覚えておいて下さい。
テキストというのはWebサイト上の文章です。
コンテンツというのはWebサイト上の内容です。
このサイトで言えば例えば上の方にあるタイトル(”23歳高卒ニートがWebディレクターになれるワケがない”)や、今みなさんが読まれているこの文章なんかはその辺に含まれます(まぁテキストもコンテンツなわけですが…)。
つまりざっくり言えば、
HTMLはWebサイトの骨組みを成すモノ
と覚えておいて下さい。
んで、ここでCSSというものが出てきます。
CSSは"Cascading Style Sheet"と呼ばれるスタイルシートの一種です。
スタイルシートというのは、HTMLのレイアウトを設定する仕組みです。
つまり、HTMLはWebサイトにどのような情報を記載するか、という骨組みを作り、
スタイルシートはWebサイトをどのようなレイアウトで表示するか、という肉付けを行うという事です。
ざっくり言えば、
人間でいう”骸骨”がHTML、”お肉”がCSSですね。
※ちなみにスタイルシートはCSS以外にもありますので、上の定義にはCSSではなくスタイルシートという言葉を入れた方が正確です。ただ、実際はほとんどCSSしか使われてないみたいなんで、このブログではとりあえずCSSという言葉を使っています(私も他にどんなスタイルシートがあるのか知りません)。
このCSSというものがヒジョ―――に便利なんです。
例えば、Webサイトが3ページあったとします。
これは単純にHTMLが3枚必要です。
もしHTML内でスタイルを指定したとすれば(推奨できませんが、そういう事もできます)、
スタイル指定をしたHTML×3枚が必要になります。
3ページすべてが違うレイアウトなら仕方ないのですが、もしもこのブログのように全てのページのレイアウトが同じだったら、同じレイアウト指定を3回に渡って繰り返し書かなければいけません。
100ページだったら100回、1000ページだったら1000回です。
しかしこのCSSをHTMLとは別に保存しておけば、HTMLからリンクを指定するだけで、Webサイトのレイアウトやカラーリングを一瞬で変えられるのです。
例え話で言えば、まず”A”というコーディネートがあったとします。
Aのコーディネートは、麦わら帽子とブラウスとスカートとサンダルの組み合わせです。
この"A"がWebサイトでいうCSSになります。
次に、裸の女の子を100人用意します(すいません、めちゃくちゃ卑猥です)。
この”女の子100人”が、WebサイトでいうHTMLになります。
そしてこの女の子100人が、
「私たちはAのコーディネートを選択します!」
と一斉に宣言することで(HTMLにリンクを組み込むことで)、
一瞬のうちに全員が、麦わら帽子とブラウスとスカートとサンダルでコーディネートされた女の子に変身するわけです(個人的には裸のままでいて欲しいけど…)。
つまりCSSを使えば、HTMLの一枚一枚にいちいちスタイルを指定しないで済むという事です。
逆に言えば、「あ、ここだけちょっとこういう風に変えたい」と思ったときに、
CSS一枚をちょっと書き換えるだけで、100枚分1000枚分のレイアウトを一斉に変更できるのです。
というわけで、CSSはヒジョーに便利なんです。
これもすぐに覚えられるので、HTMLとセットで覚えましょう。
ただ、使いこなすのがなかなか難しいわけですが……。
じゃあ今回はここまで!
寂しいから読んでる人いたらコメントください!泣
(続く)
第5回:HTMLとは?
最近は就活が忙しくて適度に死にかけています。
未経験の無職なんて絶対通らないだろうと思って履歴書送りまくってたんですが、
これが意外にも通るんですね。
でも面接で落とされるっていう。
あ、噂の圧迫面接も体験しました。
開口一番、
「つまり、あなたは続かない人間なんですよね?」
これにはさすがにビビりましたね 笑
でも負けたくなかったんで頑張りました。
結果はダメでしたが、圧迫攻撃を冷静に切り返す度胸は身に付いたのでプラスにはなりました。
もうホント、ポジティブにやってかなきゃ続けられません。
不採用続きで心が折れた、とか言ってる場合じゃないです。
ニートなんて落とされるのが当たり前なんだから、落とされたらその反省を踏まえて次、
はい次、次、とペースよくやっていきましょう。
50社受けて1社受かれば奇跡です。
さぁ、全国のニート諸君、一緒に立ち上がろう!
とまぁ、就活の話が長くなってしまいましたが、
今回はHTMLの話をしたいと思います。
HTMLとは、Hyper Text Markup Language の略です。
つまり、”マークアップの施されたテキストを超えるテキスト”という事です。
と言われてもワケがわからないと思いますが、私もはじめはワケがわかりませんでした。
しかしHTMLは比較的簡単なのですぐに理解できると思います。
初心者の方はまずこのサイトをよく読んで勉強しましょう。
ごく簡単なHTMLの説明
さらっと紹介してしまいましたが、本当に素晴らしいサイトです。
HTMLというものをただの道具ではなく一つの思想として解説してくれます。
これを読むとWeb標準のサイト作りをする事の大切さがよくわかりますね。
ぜひ熟読しましょう。
というわけでHTMLの説明はリンク先サイト様にまかせてしまいました 笑
すいません時間がないんです。
まぁ簡単に説明すればWebサイトを形作っている基盤がHTMLというものです。
実際に「表示」から「ソースを表示」を開いてみて下さい。
たぶんワケのわからないごちゃごちゃした記号と文章の羅列が出てくると思います。
これがHTMLです(正確にはJavascriptとかも混じってますが)。
これを覚えないとWebの勉強はできません。
基礎中の基礎です。
でも簡単なのですぐ覚えられます。
本気出せば2日ぐらいでなんとかなります。
テキストエディットさえあれば作れるのでぜひやってみましょう。
結構楽しいですよ!
あ、あと辞書は買った方がいいですね。
私は一冊目に辞書を買って大失敗しましたが 笑
でも後々必要になるんで絶対買った方がいいです。
なんだか今回はほとんど他人まかせになってしまいました。
HTMLの魅力を伝えたいのですが、私にはその表現力がないのでリンク先サイト様を参考にして下さい。
きっとこのシステムの素晴らしさがわかるはずです。
では今回はここまで!
また次回に続きます。
未経験の無職なんて絶対通らないだろうと思って履歴書送りまくってたんですが、
これが意外にも通るんですね。
でも面接で落とされるっていう。
あ、噂の圧迫面接も体験しました。
開口一番、
「つまり、あなたは続かない人間なんですよね?」
これにはさすがにビビりましたね 笑
でも負けたくなかったんで頑張りました。
結果はダメでしたが、圧迫攻撃を冷静に切り返す度胸は身に付いたのでプラスにはなりました。
もうホント、ポジティブにやってかなきゃ続けられません。
不採用続きで心が折れた、とか言ってる場合じゃないです。
ニートなんて落とされるのが当たり前なんだから、落とされたらその反省を踏まえて次、
はい次、次、とペースよくやっていきましょう。
50社受けて1社受かれば奇跡です。
さぁ、全国のニート諸君、一緒に立ち上がろう!
とまぁ、就活の話が長くなってしまいましたが、
今回はHTMLの話をしたいと思います。
HTMLとは、Hyper Text Markup Language の略です。
つまり、”マークアップの施されたテキストを超えるテキスト”という事です。
と言われてもワケがわからないと思いますが、私もはじめはワケがわかりませんでした。
しかしHTMLは比較的簡単なのですぐに理解できると思います。
初心者の方はまずこのサイトをよく読んで勉強しましょう。
ごく簡単なHTMLの説明
さらっと紹介してしまいましたが、本当に素晴らしいサイトです。
HTMLというものをただの道具ではなく一つの思想として解説してくれます。
これを読むとWeb標準のサイト作りをする事の大切さがよくわかりますね。
ぜひ熟読しましょう。
というわけでHTMLの説明はリンク先サイト様にまかせてしまいました 笑
すいません時間がないんです。
まぁ簡単に説明すればWebサイトを形作っている基盤がHTMLというものです。
実際に「表示」から「ソースを表示」を開いてみて下さい。
たぶんワケのわからないごちゃごちゃした記号と文章の羅列が出てくると思います。
これがHTMLです(正確にはJavascriptとかも混じってますが)。
これを覚えないとWebの勉強はできません。
基礎中の基礎です。
でも簡単なのですぐ覚えられます。
本気出せば2日ぐらいでなんとかなります。
テキストエディットさえあれば作れるのでぜひやってみましょう。
結構楽しいですよ!
あ、あと辞書は買った方がいいですね。
私は一冊目に辞書を買って大失敗しましたが 笑
でも後々必要になるんで絶対買った方がいいです。
なんだか今回はほとんど他人まかせになってしまいました。
HTMLの魅力を伝えたいのですが、私にはその表現力がないのでリンク先サイト様を参考にして下さい。
きっとこのシステムの素晴らしさがわかるはずです。
では今回はここまで!
また次回に続きます。