CSS 入門 書き方 作り方 開き方

CSSはCsacading Style Sheetの略で、スタイルシート言語の一種です。

 

HTMLのページでも紹介しましたが、HTMLファイルで入力した文字などのコンテンツに対して、色を変えたり、サイズを変えたりといった様々な装飾をするためのものです。

 

ホームページなどのWebページ作成ではHTMLと組み合わせて必ずと言って良いほどよく使われます。

 

CSSファイルを作成するためにはテキストエディタ（メモ帳、TeraPadなど）が必要です。

 

Wordでも作成できますが、HTMLのページでも紹介した理由と同様の理由でおススメしません。

メモ帳を使ったCSSファイルの作成方法

それでは、CSSの具体的な使い方について紹介します。

 

まずは、CSSファイルの作り方についてです。

 

HTMLのページではメモ帳で作成する方法を紹介しましたが、今回も私はメモ帳を使います。

 

ウィンドウズボタン（パソコンの画面下の四角形が４個くっついているボタン）をクリック。

 

表示された画面の上にある「アプリ、設定、ドキュメントの検索」という部分に「メモ帳」と入力。

 

「もっとも一致する検索結果」の中の「メモ帳」をクリック。

 

あるいは右の「開く、管理者として実行・・・」といった一覧の中から「管理者として実行」をクリック。

 

「このアプリがデバイスに変更を加えることを許可しますか？」という画面が表示されるので、「はい」をクリック。

 

メモ帳が表示されました。

 

次に、下記の内容を入力します。

 

余分な空白が含まれていると表示がおかしくなる場合があるので、余分な空白は含めずに入力してください。

 

p{
color:red;
}

 

HTMLのページでも紹介しましたが、red;の部分を#FF0000と入力しても同じ結果（p要素の文字が赤色）になります。

 

メモ帳の画面の左上の「ファイル」をクリック。

 

名前を付けて保存をクリック。

 

画面が表示されますので、下の「エンコード」の部分が「UTF-8」になっているかを確認してください。

 

なっていなければクリックして「エンコード:」の横の項目をクリックして選択肢が表示されるので「UTF-8」をクリック。
（UTF-8(BOM付き)ではありません。）

 

「名前を付けて保存」画面の左側にデスクトップ、ダウンロード、ドキュメント・・・といった感じで一覧がありますので、その中から「デスクトップ」をクリック。
（他の保存場所が良い方は任意の場所を選択してください）

 

画面下の「ファイル名(N):」の部分に「Sample.css」と入力して「保存」をクリック。
（私は「Sample.css」という名前にしましたが、他の名前がいい方は任意の名前を入力してください）

 

「.（ドット）」は半角で入力してください。
半角入力の状態で「.、>、る、。」のボタンを押すと入力できます。

 

※注意点
・「Sample.css.text」といった感じで表示されている場合は、それを「BackSpace」や「Delete」ボタンで消してから入力してください）

 

・名前を入力する時も、前後に余分な空白や文字を入力しないように注意して下さい。

 

・任意の名前にした方はファイル名を「任意の名前.html」という表記にして下さい。

 

・ファイル名の付け方ですが、基本的には自分にとってわかりやすい名前なら何でもいいのですが、一部名前に使用できない文字がありますのでご注意ください。

 

・私としてはひらがな、カタカナ、漢字、英数字の中からどれかを使うといいと思います。

 

・CSSファイルなので、「.css」の部分を消したり、別の名前にすると上手く表示されなくなります。

 

これでCSSファイルが作成できました。

 

そうすると、「Sample.css」というHTMLファイルがデスクトップ画面（あるいは任意の場所）に作成されました。

CSSファイルの開き方の具体的な手順

作成したCSSファイルを開くには、デスクトップ画面（あるいは任意の場所）を表示させ、その中に先ほど作成した「Sample.css」の上にマウスカーソルを載せて、右クリック。

 

表示された一覧の中から「プログラムから開く」という項目の上にカーソルを載せると、右にメモ帳（使っているパソコンによってはその他のものも）が表示されます。

 

その中から「メモ帳」をクリック。

 

一覧にメモ帳が表示されない方は、「別のプログラムを選択(C)」をクリック。

 

「アプリを選択して.cssファイルを開く」という画面が表示されるので、「おススメのアプリ」や「その他のオプション」といった項目があると思います。

 

画面をスクロールしてその中から「メモ帳」をクリックします。

 

画面下の「一度だけ」というボタンをクリックします。

 

そうするとメモ帳が開けます。

 

「常に使う」ボタンをクリックしても開けますが、他のファイルを開く時に自動で選択されるファイルが変わる場合がありますので、私としては「一度だけ」の方をおススメします。
（私は「メモ帳」を選択しましたが、他のテキストエディタがいいという方は任意のものを選択してください。）

 

そうすると、メモ帳の画面が表示され、先ほど入力した内容が表示されていると思います。

 

CSSファイルを作成したり、内容を編集したい時はこの手順でするといいでしょう。

HTMLファイルに反映されているかを確認する方法

次に、設定したCSSファイルの内容が正しくHTMLファイル（Webページ）に反映されているかを確かめる方法を見ていきましょう。

 

HTMLファイルを開くには、デスクトップ画面（パソコンの電源を入れて最初に表示される画面、色んなソフトやファイルの一覧が表示されている画面）に作成した「Sample.html」の上にマウスカーソルを載せて、右クリック。

 

表示された一覧の中から「プログラムから開く」という項目の上にカーソルを載せると、右に「Google Chrome」「Microsoft Edge」・・・といった感じで一覧が表示されるので、その中から「Google Chrome」をクリック。
（私は「Google Chrome」を選択しましたが、「Microsoft Edge」などの他のブラウザがいいという方は任意のブラウザを選択してください。）

 

一覧にメモ帳が表示されない方は、「別のプログラムを選択(C)」をクリック。

 

「アプリを選択して.htmlファイルを開く」という画面が表示されるので、「おススメのアプリ」や「その他のオプション」といった項目があると思います。

 

画面をスクロールし、その中から「Google Chrome」をクリックします。

 

画面下の「一度だけ」というボタンをクリックします。

 

そうするとメモ帳が開けます。

 

Google Chromeの画面が表示されて画面左上に「タイトル」、その少し下に「Hello,World」と表示されていると思います。

 

「Hello,World」の部分が赤色で表示されていれば、CSSファイルに入力した内容が正しく書けているということです。

 

表示されていない場合は、再度、CSSファイルをメモ帳を開き、誤字脱字や余分な空白が含まれていないか確認してください。

 

正しく表示されていれば、Google Chromeとメモ帳の画面のそれぞれ右上にあるバツボタン（ウィンドウを閉じるボタン）をクリックして閉じます。

 

手順としては上記の通りとなります。