2020/06/26ツイートシェアはてブLINEPocket見ているWebサイトはどのように表示されているのでしょうか?またどのようにしたらサイトを作ることができるのでしょうか?「Webサイトを作るなんて難しそう...」と思われがちですがWebサイトはパソコンがあれば誰でもカンタンに表示させることができます。画像用フォルダHTMLとCSSを書いていこうHTMLCSSCSSをHTMLに読み込む記述を書こう表示を確認してみようWebサイトの仕組みを理解しようサイトの見た目は主にhtmlとcssでという言語で作られています。このHTMLとCSSで作ったファイルをサーバー(保管場所)からブラウザ(インターネットエクスプローラーやグーグルクロームなど)に表示してみることができます。Webサイトを作るためのテキストエディタを用意しようサイトの見た目を作っていくHTMLとCSSを書くにはテキストエディタが必要になります。メモ帳でも書くことはできますが、オススメできません。Webサイト制作の場合はテキストエディタを使うようにしましょう。オススメのテキストエディタは3つあります。どちらでも構いませんので、インストールしてみましょう!VScodeインストール時は英語ですが日本語拡張機能があります。日本語にして、自分の使いやすいようにカスタマイズできるデキストエディタです。周りのエンジニア仲間からも人気ですが慣れるまでは少し難しいので初心者向きがいい方は下のBracketsがいいです。BracketsBrackets(ブラケッツ)というテキストエディタです。こちらはリアルタイムで表示確認ができます。公式サイトからダウンロードできます。Text(サブライムテキスト)というテキストエディタ。便利な拡張機能がたくさんあるので自分が使いやすいようにカスタマイズできます。【完全ゼロから!】SublimeTextのインストールと使い方、便利な機能WEbサイトのフォルダを用意しようフォルダの作成テキストエディタが準備できたらデスクトップに作るサイトのフォルダを作りましょう。「はじめてのWeb制作」というタイトルでフォルダを作ってください。画像用フォルダ次に、「はじめてのWeb制作」フォルダの中に画像を入れるためのフォルダを作ります。フォルダの名前は「images」へ名称変更してください。この「images」の中に自分が持っている画像を入れてください。↑ここではこの画像を使って制作していきます。制作用でしたらこの画像使っていただいて構いませんので画像の名前を「first-image.png」へ変更、保存して「images」へ入れてください。HTMLとCSSを書いていこうそれでは実際にHTMLとCSSを書いてきます。HTMLとCSSはそれぞれ役割と書き方が違いますのでまずはHTMLから書いていきましょう。HTMLHTMLについてHTMLにはサイトに表示される文字を書いていきます。ブログタイトルの「かいぞくせん!」を漢字の「海賊船!」にHTMLを書き換えると表示もそのように変わります。他にもサイトの文章を書き換えたい場合はHTMLの該当箇所を書き換えたり追記したりできます。実際に書いていきましょう!HTMLの書き方には決まりがありますがまずはコードをコピーしてテキストエディタに貼り付けてください。alt=”first-image”></div></body></html>一見難しそうですが、一つ一つに意味があります。上記の基本のHTMLをコピペして必要に応じて追加してください。変更、追記していくところはオレンジの<body></body>内です。「.html」という拡張子をつけて先ほど作った「はじめてのWeb制作」フォルダへ保存します。.htmlで保存するのはhtmlとして保存しますよという意味です。今回は「index.html」という名前をつけて保存してください。トップページはよく「index.html」と名前がつけられることが多いです。商品を紹介するページは「product.html」などとページの内容に関連する名前をつけるようにしましょう。CSS次にCSSを書いていきます。CSSにも書き方の決まりがあるので順番に進めていきましょう。CSSについてCSSはHTMLで書いた文字などを、装飾するための言語です。HTMLで書いた文字の色を黒色から赤色にできたり、文字の大きさを変えることができます。使いこなしていくと、表示する場所を好きな場所に表示できるようになるのでとても面白くなります。先ほどと同じようにテキストエディタを使って書いていきますが、HTMLに追記せずに、新規ファイル(テキストエディタの新規作成)へ書いていきます。下記をコピーし、先ほどの新規ファイルへペーストしてください。yellow;}「.box-01」の中はこのように装飾しますよという記述です。font-sizeはそのまま、文字の大きさです。background-colorもそのまま、背景色ですね。保存方法HTMLでは「.html」という拡張子でしたが、CSSは「.css」という拡張子で保存します。それぞれそのままなので覚えやすいですね。名前は「style.css」にしてください。CSSの保存名も基本的には自由ですが、慣れるまでは「style.css」でOKです。こちらも同じように「はじめてのWeb制作」フォルダに入れてください。現時点で「はじめてのWeb制作」フォルダの中はこのようになっていますが大丈夫でしょうか?index.htmlとstyle.cssのファイルと画像が入ったimagesフォルダが表示されていたらOKです。CSSをHTMLに読み込む記述を書こうこの時点ではまたHTMLとCSSは独立した状態ですので、HTMLで書いた文字などにCSSで指定した装飾を反映させるためにHTMLに読み込むタグを書いていきます。href=”style.css”>これをHTMLの決められた場所へ挿入します。先ほど保存したHTMLをもう一度開いて、上記のタグを挿入してください。これでHTMLで書いた文字などがCSSの記述通りに装飾されるようになります!表示を確認してみようではこれまで作ってきたものをブラウザに表示させてみましょう。index.htmlの上で右クリック→このアプリケーションで開く→好きなブラウザを選択してくださいブラウザで表示していますが、インターネットには繋がっていないので、自分だけが見れている状態です。文字の大きさを28px→40pxに大きくしてみたり自由に変更してみてください。Webサイトを表示させてみた感想はいかがでしょうか。