デザイン&クリエイティブ

【簡単】htmlとcssでWebページを作成・ブラウザ上で確認してみよう

htmlとcssでWebページを作成してみたい!もしくはhtmlとcssを学習してみたいと考えているあなたに、この記事では簡単にhtmlとcssでWebページを作成する方法を紹介させて頂きます。お手持ちのテキストファイルでhtml/cssの作成、Webブラウザ上で簡単にページの確認をすることができます。htmlとcssの学習は終えたけど、ブラウザ上での確認方法がわからないという方にも役に立つ記事です。それでは、簡単なWebページの作り方を確認していきましょう!

【簡単】htmlとcssでWebページを作成・ブラウザ上で確認してみよう

テキストファイルで簡単に作成!Webページを作ってみよう。

html/cssはwindowsならメモ帳、mac OSならCotEditorのテキストファイルで気軽にコードの記入をすることができます。簡単に流れを説明させて頂くと、それぞれ別のテキストファイルでhtmlとcssを記入します。その後デスクトップ上にファイルを保存し、htmlファイルをダブルクリックします。するとWebブラウザが立ち上がり、htmlとcssでコーディングされたテキストやデザインを確認することができるのです。それでは細かいやり方を確認していきましょう!

テキストファイルで簡単に作成!Webページを作ってみよう。

テキストファイルにhtmlを記入してみる

まず、htmlの記入をしていきます。[].htmlでテキストファイルを保存しておきましょう。今回はindex.htmlを使ってみてください。簡単に解説をすると、htmlはheadとbodyで構成されており、headがページの情報やリソース、bodyが実際にwebページ上に反映される本文となります。では文字コードを宣言しています。この宣言がないと文字化けの原因となります。今回は、右の画像通りにテキストファイルにコードの記入を行ってみてください。

テキストファイルにhtmlを記入してみる

テキストファイルにcssを記入してみる

次にcssの記入をします。cssファイルもhtmlと同じように保存をしますが、cssの場合は[タイトル].cssで保存が必要です。今回はstyle.cssで保存してみましょう。cssはhtmlのhead上にの記入がされることで、htmlとリンクしてデザインを適応することができます。また、cssでも文字コードの宣言が必要です。「@charset “UTF-8”」で宣言を行い、他要素もテキストファイルに記入を進めていきましょう。

テキストファイルにcssを記入してみる

テキストファイルの保存場所

次に、テキスファイルの保存方法です。保存する場所はデスクトップ上で問題ないですが、htmlファイルとcssファイルが同じ”階層”にあるように保存する必要があります。例えば、htmlがデスクトップ上にあり、cssがドキュメントフォルダ内に保存されている場合は、cssが適応されなくなります。今回はでcssの適応がされているので、同じ位置関係での保存が必要となります。画像フォルダなどある場合も同じ階層で保存をしましょう。

テキストファイルの保存場所

ブラウザで確認してみる

最後に、Webブラウザ上でテキストとデザインを確認してみましょう。確認する方法は簡単で、先ほどデスクトップ上に保存したhtmlファイルをダブルクリックするだけで、Webブラウザ上で反映されたページを確認することができます。先ほど記入したhtmlファイルをダブルクッリクしてみましょう。左の図のようなページを確認できましたでしょうか?Webページの作成と確認、意外と簡単ですよね!

ブラウザで確認してみる

Written by ねねまる
現在フリーWebデザイナー・フリーライターとして活動しております。女性向け商品のLP制作/個人経営カフェのHP制作/女性向けのライフスタイル・デザイン・プログラミングの記事作成が得意です。

PICK UP NEWS