CSSを使ってみよう 基礎の基礎編

htmlに慣れてきたらcssを使ってみよう

準備

  1. プロジェクトフォルダにcssフォルダを作成
  2. cssフォルダの中に任意の名前.cssファイルを作成(ここでは例としてstyles.cssとする)
  3. htmlのhead内に<link rel = “stylesheet” href = “css/styles.css”>と記述
  4. styles.cssに

body{

background: #00ffff;
font-family:sans-serif; //font-familyを使用しページ内で使用するフォントをあらかじめ指定しておくのが通常 

}

などと書いて更新。

 

htmlをブラウザで開いてページの背景色が水色になってたら読み込み成功。

 

 

cssを使った簡単な配置をしてみよう

以下のようなhtmlを用意する


<!DOCTYPE html>

<html lang = "ja">

&nbsp;

<head>

<meta charset = "utf-8">

<link  rel = "stylesheet" href = "css/styles.css">

</head>

&nbsp;

<body>

HelloWorld

</body>

&nbsp;

</html>

“HelloWorld”のテキストをデザインしていく。

 

まずはHelloWorldをdivで囲う

<body>

      <div id = "hello">

      HelloWorld

      </div>

</body>

 

次にcssでデザインを施す

 

 


#hello{

text-align: center;

}

ちなみに、cssでの要素指定には

・#id名

・.class名

・要素名(htmlのタグ名)

使用するがこれらを「セレクタ」と呼ぶ

また、text-alignなど値を設定するものは「プロパティ」

centerなどの値はそのまま、「値もしくは設定値」と呼ぶ。

要するに


セレクタ{

プロパティ: 値;

}

のように記述してく。

 

cssの基本はこれだけ。

今回は

text-alignプロパティを用いて中央ぞろえのみだった。

基本的には文字をhtmlで書き見た目をcssで整えるという作業になる。

その他のプロパティを用いることで様々な見た目にできるので次回いろいろ説明するが、自分で探してみるのも面白いだろう。

あわせて読みたい

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です