ViewsTweetCheckPocketHTMLやCSSという言葉を聞いたことありますか?Webサイトを作るにあたり知っておかなければいけない知識です。それぞれどのような意味があり役割を担っているのでしょうか。ついて、紹介いたします。プログラミングに興味がある方や、HTMLやCSSについて知りたい方は、参考にご覧ください。スポンサーリンク目次1.HTMLの役割とCSSの役割1.HTMLとは?HTMLの役割2.CSSとは?CSSの役割2.HTMLやCSSを学習する1.初心者でも学習しやすい2.ウェブサイトの仕組みが分かる3.ウェブデザインができる3.HTMLとCSSを体験する1.メモ帳でも作れる2.サイトに動きを付けられる「JavaScript」4.HTMLとCSSのおすすめ入門書1.スラスラわかるHTML&CSSのきほん2.作りながら学ぶHTML/CSSデザインの教科書1.HTMLの役割とCSSの役割ここでは、HTMLとCSSの基礎知識・役割について紹介いたします。Language(ハイパーテキストマークアップランゲージ)の略で、ホームページなどを作成する際に用いられます。コンピュータに画像やテキスト、ロゴなどを認識させるための役割を担います。内をh1で大見出しを示し、h3で小見出し、pで段落であることを認識させます。HTMLタグと呼ばれ、認識させたいテキストなどの前後をタグで囲むことで、コンピュータがその通りに表示します。タグは他にもbでテキストを太字にする、buttonでボタンを作成する、dirでリストを表示するなどさまざまです。HTMLで画面に表示する文書構造などを定義し、CSSで表示方法や装飾などを定義します。CSSはデザインであり、テキストに下線を引いたり、枠で囲ったり、文字の大きさを変えたりします。HTMLで作ったものを装飾して見やすくする役割を担います。例えられるのは、HTMLがすっぴんの似顔絵であれば、CSSは(その似顔絵の)化粧後の姿を作れます。HTML+CSSを使うことで、そのWEBページが見やすくなります。2.HTMLやCSSを学習するウェブサイトを作成するための方法はいくつかありますが、いずれの方法もHTMLに関する知識は持っておく必要があります。ブログなどでは、HTMLコードを書けなくても運営できるようなシステムが構築されていますが、自分で好きなように機能を追加したりはできませんよね。1.初心者でも学習しやすいHTMLは厳密には、マークアップ言語と言われるもので、プログラミング言語ではありません。このような特徴から、プログラミングの導入として学ぶ方も多い傾向にあります。HTMLと合わせて使うことになるCSSも学習しやすい特徴があります。HTMLを装飾するためのプロパティは無数に存在するのですが、それを利用するための書式さえ理解してしまえば後は自由に使いこなすことができるんです。2.ウェブサイトの仕組みが分かる皆さんが普段見ているウェブサイトは、HTMLやCSSによって作成されています。本サイトもHTMLコードを利用したものです。HTMLに関する知識がないとどのような作りになっているか完全に不透明ですが、自分で学習してみるとウェブサイトの仕組みをある程度理解できるように。3.ウェブデザインができる自分でHTMLやCSSを使ってウェブページを作成できるようになれば、ウェブデザインをできるということにも繋がります。自分のウェブサイトはもちろん、ブログなどのデザインを変更する時にも役立つ知識となります。自分自身のホームページを持たない場合でも、何かと役に立つHTML&CSSです。学習のハードルも低いので、時間がある時にでも勉強してみてはいかがでしょうか。3.HTMLとCSSを体験する実際にHTMLやCSSを勉強するにはどうすれば良いのか。何から手を付けたらいいのか分からないという方もいると思います。ウェブ上の情報をたよりにするのも良いですし、入門書を参考にしながら勉強を進めるのもおすすめです。入門書の多くはHTMLの基本や開発環境の整え方を紹介していますので、一冊購入すれば困ることはないでしょう。いった行動を起こす前に、とりあえずHTMLやCSSに触れてみたいという方もいるのではないでしょうか。1.メモ帳でも作れるメモ帳のファイル形式をhtmlで保存する事とhtmlファイルとして認識され、ファイルをダブルクリックするとブラウザが開かれます。これだけの手順で、HTMLの記述とその反映結果を確認する環境が出来上がりました。使ったHTMLタグも正しく認識されますからできないことはほとんどありません。CSSも適用できるHTMLコードの記述だけではなく、CSSを適用させることもできます。ここではHTMLファイル内に記述する方法をご紹介します。styleタグの中にCSSの記述をするだけです。<style>*{color:#FF0000;}<style>上記の例ですと、全体の文字色を赤色に指定したことになります。試しに何かしら文字を記述してからブラウザを開いてみてください。文字の色が赤色になっているのが分かると思います。複数指定することもできます。//ゴシック体}<style>以上のようにいくつでも追加することができます。例では全体指定にしていますが、基本的には、pタグなどを指定することが多くなります。2.サイトに動きを付けられる「JavaScript」HTMLとCSSを使いこなすことができれば思うようにサイトを作成することができます。動的な動きを付けたい場合は「JavaScript」を必要とする場面も多いでしょう。JavaScriptはプログラミング言語となり、本格的な学習が必要なってくるのですが、実はメモ帳でも記述することができます。した入門程度ならメモ帳でも十分体験することができるので試してみましょう。メモ帳で「JavaScript」を体験する記述方法は簡単です。<script>alert(“おはよう”);<script>上記のように記述してから保存してブラウザを開いてみてください。おはようというアラートが表示されるのが分かると思います。これは至って簡単な動作ですが、本格的なコーディングもできますので色々検索して試してみるのも面白いかと思います。4.HTMLとCSSのおすすめ入門書ここでは、HTMLとCSSの初心者向けのおすすめ入門書について紹介いたします。1.スラスラわかるHTML&CSSのきほんスラスラわかるHTML&CSSのきほんは、フリー素材をインストールして実際に作業しながら学べる本です。分かりやすく学べます。飽きやすい人にもおすすめです。Webサイト作成の知識がたくさん掲載されていますので、勉強した後も使える一冊です。