HTML&CSS入門1〜ウェブの基礎知識とHTML&CSSの概要〜

 

 

こんにちは、すぐるです

 

 

入門1では、Webの基礎知識とhtml&cssの概要を学びます

 

 

ーーーーーーーーーーーーーーーーー

HTML&CSS入門1で学べること

 

♢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のダウンロード方法と初期設定は、こちらのサイトがわかりやすかったです

 

以上2つが準備できたので、次回からはどんどんHTML&CSSを書いていきます

 

HTML&CSS入門1はここで終わりです。おつかれさまでした

 

 

 

本気でWebデザインを学ぶなら

 

本気でウェブデザインを学ぶなら、Udemyのオンライン講座 が超おすすめです

ぼくは19歳のときUdemyでWebデザインの勉強をはじめて

その半年後にフロントエンジニアとして仕事を取ることができました

 

こうなることができたのは、完全にUdemyのおかげだと思っています

Udemyのコースはどれも質が高くてすごい分かりやすいです

しかし、量が豊富なので、勉強するにはかなり骨が入りましたが(笑)

 

ちなみに、ぼくは今でも複数のコースで学んでいます

 

もし、キャリアアップしたい。Webスキルをつけて収入を上げたい。という人がいたら、Udemyで学ぶ価値は大いにあると思います

 

最後に、ぼくが一番はじめに受けていたコースは、「 未経験からプロのWebデザイナーになる! 」っていうコースです

未経験からプロのWebデザイナーになる!

 

かなり丁寧に解説されていて、19歳のポンコツな頭でも理解することができました

ついでにPhotoShopも応用的なところまでこのコースで学べます

 

他にもたくさんのWeb系のコースがあるので、ぜひ自分にあったコースを探してみてください

 

Udemy  はこちらから!