ホームページを作りたいけど、HTML/CSSの基礎がわからない、こんな人にHTML/CSSの基礎について簡単なホームページを作成して、わかりやすく紹介します。Unityのオンライン講座で専門家から学んだわかりやすい情報をまとめて紹介します。
ホームページ作成したいんですけど、HTML/CSSなどの言葉がでてきてよくわかりません。。。
HTMLとはHyper Text Markup Languageの略称で、Webページを作るための最も基本的なマークアップ言語のひとつです。これらの書式や配置を決定するためにCSSというスタイルシートが使われています。HTMLが文書構造で、CSSがフォント・配置等の見栄えを作っているイメージだよ。
なんとなくイメージはわかりました。一応本は買ったんですけど、面白くなくて、途中で止まってしまいました。
いまだとUnityなどのオンライン講座で動画で勉強できるからおすすめだよ。今回は実際にHTML/CSS形式でホームページを作って、基礎を勉強してみましょう。
＜本記事の対象者＞
・ホームページを作ってみたいけど、HTML/CSSの基礎がわからない
・将来ホームページを作るための基礎知識をみにつけたい。
・Word pressでなく、自分の作ったテーマでホームページを作成したい
こんな人たちに紹介します。
HTML/CSSでホームページを実際に作成して基礎知識を学んでみる
事前準備
事前にこれらのソフトをインストールしてください。
・Visual studio Code
・Google Chrome
Visual Studio Codeの設定方法を紹介します
Visual Studio CodeはMicrosoft社が提供する無料のエディタの一つです。これがあると、プログラムの入力補助や、コードのエラーを見つけることができるため、効率的なコード作成を行うことができます。
下記サイトからVisual Studio Codeのインストールを行って下さい。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
インストールが完了したら、拡張機能を追加して設定を行っていきます。下記拡張機能の追加を行ってください。
＜拡張機能の追加＞
・Live Sass Compiler：CSSファイルを作成するためのツール
・Live Server：開発PC上で表示画面を確認するためのツール
・Prettier-Code formatter：コードを見やすく整形するためのツール
はじめに拡張機能のタブを選択して、検索欄に上記名称を入力してインストールして下さい。
下記のインストールを選択してください。
インストールが完了したら、一度ファイルを閉じて、再起動してください。
これで準備は完了です。
Visual studio editorを使ってHTML/CSSを使ってホームページを作ってみる
テストとして、コメントを記載してみる
では再度Visual Studio Codeを開いて、HTMLコードを記載してみましょう。まず、Desktopに“Test”というフォルダを作成してください
フォルダを作成したら、Visual Studio Codeに作成したフォルダをドラッグします。
“Test”というフォルダが記載されます。
次にTestフォルダで新規作成を選択し、”index.html”と入力します。これで、index.htmlファイルが作成されました。
この状態で、おはよう！、改行して朝ごはんはなにと記入します。この状態で、Go Liveを選択します。
すると、先ほど、拡張機能で導入したLive server上におはよう！朝ごはんはなに？と記載されます。これをサーバー上に公開したものがホームページとなります。（htmlでは通常改行は無視されるため、server上では改行されていません）
ショートカットキーを用いて、htmlを記述してみる
次に、html形式のフォーマットにのっとって、サーバー上で文章を表示してみます。その前に、簡単にhtml形式の記述を行うためにいくつか、ショートカットキーを紹介します。
| 操作内容 | ショートカットキー |
| htmlのテンプレートが自動で出力 | !を押して、Tabキー |
| コードの整形 | Shift+Alt+F |
| 行を下（上）へ移動 | Alt＋↓（↑） |
| 行を下（上）へコピー | Shift + Alt + ↓（↑） |
| 行の削除 | Ctrl + Shift + K |
| 行を下に挿入 | Ctrl + Enter |
上記のhtmlのテンプレートを入力するため、!を押して、Tabキーを入力してください。すると、このように、html形式のフォーマットが入力されます。
このフォーマット上の<body>と</body>のタグ間に入れたコメントが、サーバー上に表示されます。＜body＞を開始タグ、</body>を終了タグと呼びます。先ほどと同様におはよう朝ごはんはなにと記載してみます。この状態で、再度Live Serverを更新（Go Live)を押すと、Live Server上にこのように表示されます。
<body> おはよう朝ごはんはなに </body>
今回は<body> のタグを用いて、コメントを出力しましたが、通常は、<span> タグや<div>タグを使用します。spanはインライン要素（改行なし）、divはブロック要素（改行あり）と呼ばれる要素を使用します。これらは別途説明します。
このように、記入した内容をサーバーに出力することができました。次に、表示スタイルを変えたいと思います。
style(css)を指定して表示する形式を操作してみる
上記の表示スタイルを<style>を指定して変化させてみます。通常は、index.htmlとは別に、cssファイルにてスタイルシートを作りますが、今回は、htmlの中でstyleを指定してみます。
・表示する配置・フォントを変更するために<Style>タグを使用
このように＜Style> </Style>のタグ間にbody要素とspan要素のフォーマットを決定します。Styleを決めるためのコマンドは多数ありますが、今回は下記の表のものを用いました。
| text-align | right, center, left.. | 配置する位置 |
| display | inline, inline-block.. | 要素の種類 |
| margin | auto, px, em.. | 間隔 |
| width | auto, px, em.. | 幅 |
| height | auto, px, em.. | 高さ |
| background-color | red, aqua,blue.. | 色 |
このようにStyleをinline-block, width等の数値を変更すると、表示の形式が変化することがわかります。（これらが、ホームページで表示するスタイルを決めるための基礎となっております。
今回は、html内でstyleを変更しましたが、通常は、別にcssファイルを作成し、body要素、span要素、div要素、header要素、画像等に対して個別にスタイルを設定し、見栄えをよくすることをcssでは行っております。
以上で今回の内容は終わりです。ホームページを作成するために必要なhtml表記の基礎についてはなんとなくわかったでしょうか？今後さらにcssの指定等を行っていきます。
