「ググっても痒いところに手が届く情報がない」という初心者向けに、初心者のぼくが知りたかった情報をまとめました。HTMLとCSSの関係かなり噛み砕いて説明します。HTMLは、Webサイトの「部品」をつくるための言語、CSSは、その部品の配置を決めたり、飾りつけをする言語です。プラモデルでいえば、部品ひとつひとつの抜き型がHTML、設計図や色付けの指定をするのがCSSといった感じです。「こんなWebサイトをつくりたいな」と思い描いたとき、どんな部品が必要なのかを定義するのがHTML、それをどう並べるなか、どんなフォントや色使いで魅せるのかを決めていくのがCSSといえばわかりやすいでしょうか。Webサイトが表示される仕組みコンピュータの画面上に、Webサイトが表示される仕組みを理解すると共に、HTML・CSSそれぞれの役割を見ていきましょう。部品のひとつひとつはWebサーバと呼ばれる場所に納められています。コンピュータ(ブラウザ)がWebサーバに「このページを見たい」という風にリクエストを送ると、Webサーバが該当する部品(とCSS)をブラウザに受け渡します。ブラウザはそのファイルを読み込んで「ふむふむ、こんな構造のページをこんな風に配置して表示すればよいのだな」という風に解釈をしてWebサイトを表示します。HTMLもCSSもコンピュータ(ブラウザ)に「こんな風に表示してね」というお願いをしたり、検索エンジンに「弊サイトはこんな構造でっせ!」と伝えるためのものです。Webページをつくるときに使われる言語です。ちなみに「ハイパテキスト」というのは、「テキストを超えたテキスト」といった意味をもちます。テキスト同士を紐付けて管理することで、テキスト複合体のような、情報の塊をつくることができます。言葉と言葉、文書と文書、WebサイトとWebサイトが繋がるといいますか。Yahooニュースを眺めてて、気になるニュースをクリックして詳細ページに飛んだとします。これができるのは、トップページと詳細ページがつながっているからなんですね。こんな風に、情報同士をつなげるための仕組みがハイパテキストです。「これはハイパテキストですよ」とコンピュータに知らせるためにはどうしたらよいのでしょうか。他の言葉と違うことをわからせるために”目立たせる”必要があります。その方法のことをマークアップといい、マークアップに使われるものがHTMLタグ(h2とかtitleとか、みたことありますよね)というわけです。「これはハイパテキストですよ」とコンピュータに知らせるための言葉がHTMLです。Sheetsの頭文字をとったもの。cascadeは、「滝」や「流れ落ちる」といった意味をもちます。この「流れ落ちる」というのは、部品の配置や装飾が適用される順番をイメージしています。プラモデル(ガンダムにしましょうか)づくりの話に喩えてみます。最初は「部品の全体を白塗りで」という風に、ベースの色を決めるでしょう。そのあとは、足部分は赤、腕は青、という風に全体→細部という順番で決めていくのが一般的かと思います。Webサイトでいえば、背景色・文字サイズ・文字色といった具合です。こんな風に、メニューやメインカラムなどのパーツを用意したとすると、メニューはここ、サイドバーはここに配置するという決めごともCSSによって決めていきます。そのためHTMLは部品づくり、配置や装飾の決めごとはCSSという風に解釈しています。まとめHTMLもCSSも、人間のイメージしたものをコンピュータに知らせるための言語です。・HTMLは部品づくり・CSSは配置・装飾こんな風に担当を分けているとい解釈すると勉強しやすいかと思います。未分類ツイートシェアはてブGoogle+Pocketfeedlyデータベースのレコードとカラム【プログラミング初心者の備忘録】フリーランスが未払いをひとりで回収したプロセス【経験談】RECOMMENDこちらの記事も人気です。B...未分類2016.11.29理屈は感性の乗り物だ。未分類2015.3.5乾燥肌の対策はコイツで決まり!生まれて初めて、余すことなく使い切りました。未分類2018.12.31アドラー心理学の実践において押さえたい4つのこと未分類2018.3.10雑談って、むずかしい。