こんにちは、すぐるです
入門１では、Webの基礎知識とhtml＆cssの概要を学びます
ーーーーーーーーーーーーーーーーー
HTML&CSS入門１で学べること
♢Webの基礎知識がわかる
♢HTMLの概要がわかる
♢CSSの概要がわかる
♢環境の構築ができる
ーーーーーーーーーーーーーーーーー
Webの基礎知識
ハードウェアとは・・・パソコン本体のこと。目に見える機械。モニター、マウス、キーボードなど
ソフトウェアとは・・・パソコンを動かすためのプログラム。目には見えない。パソコンにダウンロードされることで機能する
ハードディスクとは・・・パソコンの記憶装置。パソコンの本体の中にある部品。手で触れる
OSとは・・・Operating Systemのこと、パソコンを機能させるための基本ソフトウェア。パソコンにダウンロードされている。キーボード、マウス操作、ファイル管理ができるのはOSのおかげ
OSには次のようなものがある・・・Windows OS、Mac OS、iOS、Linux、Android
ブラウザとは・・・Webブラウザのこと、HTML文書でかかれたhtmlファイルを表示するためのソフト。インターネット上にあるサイトを見るためのアプリケーションのようなもの
ブラウザには次のようなものがある・・・ Internet Explorer、Google Chrome、safari、Microsoft Edge、Firefox
サーバーとは・・・簡単にいうと、仲介業者のようなもの。僕たちの要望に応じて必要な情報を提供してくれる。データベースとブラウザの仲介をする
データベースとは・・・ブラウザに表示されるすべての情報はデータベースにある。表でデータを管理している
ブラウザにWebページが表示されるしくみ・・・すべてのwebページは、htmlファイルでできている。データベースにある情報をサーバーが取り出し、htmlファイル上に転送することで情報が表示される
図にすると下のようなイメージ
HTMLとはなにか
HTMLとは、webページをブラウザ上に表示させるための言語。マークアップ言語と呼ばれている。プログラミング言語とは大きく違う
HTMLは、文字や画像などの情報をタグで囲むことで、文字や画像に特定の役割をもたせることができる
HTMLで書かれたファイルのことをhtmlファイルといい、拡張子は.htmlとなる
たとえば、次の画像をご覧ください。一枚のウェブページは次のようになっています
上の図のように、htmlタグを使うことで、文字にタイトルや見出し、フッターのような役割をもたせることができます
htmlにできること
・文字をタグで囲うことで、役割をもたせることができる
・タグを入れ子にすることで、階層をつくることができる
・webページの骨格をつくることができる
例えば、HTMLのタグには次のようなものがあります
<title></title>・・・タイトルタグ
<h1></h1>・・・見出しタグ
<footer></footer>・・・フッタータグ
上のようなタグで、文字を囲むことでhtmlは力を発揮します
CSSとはなにか
CSSとは、webページをきれいにデザインするための言語です。
htmlだけで書かれたwebページは味気ないものになりますが、cssを書くことでデザインせいのあるwebページになります
たとえば次の画像をご覧ください。HTMLのみで書かれたウェブページは、文字と画像が単調に並ぶ、地味なウェブページになってしまいます
これではデザイン性がなくとても寂しいウェブページになります
しかしCSSを使うことによって、文字に色をつけたり背景をつけたり、タイトルを真ん中に移動できたり、メインコンテンツとサイドバーを横に並べたりなど
いろいろなデザインをほどこすことができます
次の画像をご覧ください。上のhtmlのみで書かれたWebページを、cssでデザインしたものです
このように、CSSを書けば単調なwebページを、きれいに整ったwebページに変身させることができます
HTMLの書き方やCSSの書き方は後ほど詳しく話していきます
環境を整える
次回から、実際にHTML&CSSを書いていきます。そのためにHTML&CSSを書いていくための環境を整えます
今回はAtomというテキストエディタを使います。Atomのダウンロードはこちらからできます
ページに行くと次のような画面が出てきます。DownloadをクリックすることでAtomをダウンロードすることができます
他に、自分がすでに使っているテキストエディタがある場合は、そちらを使っていただいてOKです
Atomのダウンロードの方法と初期設定のやり方は、こちらのサイトがわかりやすかったです
次に、今回はGoogle Chromeブラウザを使います。Google Chromeのダウンロードはこちらからできます
ページに行くと次のような画面が出てきます。ダウンロードをクリックすることでGoogle Chromeをダウンドードすることができます
Google Chromeのダウンロード方法と初期設定は、こちらのサイトがわかりやすかったです
以上２つが準備できたので、次回からはどんどんHTML&CSSを書いていきます
HTML&CSS入門１はここで終わりです。おつかれさまでした
本気でWebデザインを学ぶなら
本気でウェブデザインを学ぶなら、Udemyのオンライン講座 
が超おすすめです
ぼくは１９歳のときUdemyでWebデザインの勉強をはじめて、
その半年後にフロントエンジニアとして仕事を取ることができました
こうなることができたのは、完全にUdemyのおかげだと思っています
Udemyのコースはどれも質が高くて、すごい分かりやすいです
しかし、量が豊富なので、勉強するにはかなり骨が入りましたが（笑）
ちなみに、ぼくは今でも複数のコースで学んでいます
もし、キャリアアップしたい。Webスキルをつけて収入を上げたい。という人がいたら、Udemyで学ぶ価値は大いにあると思います
最後に、ぼくが一番はじめに受けていたコースは、「 未経験からプロのWebデザイナーになる！ 」っていうコースです
かなり丁寧に解説されていて、１９歳のポンコツな頭でも理解することができました
ついでにPhotoShopも応用的なところまでこのコースで学べます
他にもたくさんのWeb系のコースがあるので、ぜひ自分にあったコースを探してみてください
Udemy はこちらから！
