CSSガイド EX

▼基本的なCSS、要素等について紹介しています。


【IT業界の転職】

 

コンテンツメニュー

 ◆Chapter 1

 ◆Chapter 2

 ◆Template

 ◆Tip!

 

★サイト運営者がPHPを学んだ
お勧めの書籍です!
これ一冊で基本的なPHPの仕組み、簡単なプログラムの作成、SQLiteを使ったデータベースなどかなり学べる要素が詰まっています!

↓↓↓ ↓↓↓

PHPレッスンブック―PHP5対応

新品価格
¥2,520から
(2013/2/24 04:38時点)

 

PHPが動作するサーバー

 

はじめてのHP | 無料素材 | タグ辞典 | ツールEX | PHPを学ぼう!

 

◆Chapter 1 - CSSの使い方 ~ その2

スタイルを設置するには、次の3つの方法があります。

といっても初心者にはサッパリわからないですよね。
順番に説明していきましょう。

 

CSSを書いたファイルを読み込む

スタイルシートのみを記述した別のファイル(拡張子は通常「.CSS」)を用意してHTML文章に読み込んで適用させます。
この方法だと複数のHTML文章で共通するCSSファイルにしておけば、一度にHTML文章の表示方法を変更できます。

スタイルを導入する場合、この方法を利用していることが多いようです。

イメージにすると次のとおりです。

 

スタイルの読み込み

 

複数のスタイルシートをHTML文章へ

 

複数のスタイルシートをHTML文章へ

 

CSSファイルは、テキストエディッタ等で簡単に作成できます。
次のスタイルを記述した「style.css」のファイルを用意したとします。

 

【style.css】

body{
  margin:0;
  color:#000000;
  background-color:#DDDDDD;
}
h1{
  color:red;
  font-size:medium;
  margin:0;
  font-size:14pt;
}
p{
  margin:0;
  font-size:12pt;
  margin-left:10px;
}

 

HTML文章にCSSファイルを読み込む場合、link要素を使用します。
次のHTML文章では、link要素でCSSファイルを読み込む例を紹介しています。

 

【index1_3_1.html】

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSSを書いたファイルを読み込む - CSSガイドEX</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<hr>
<h1>果物一覧</h1>
<p>みかん</p>
<p>りんご</p>
<p>いちご</p>
<p>ぶどう</p>
</body>
</html>

 

link要素は、<head>~<head>の間に記述します。

<link rel="stylesheet" href="ファイル名.css" type="text/css">

ファイル名は任意のものを指定します。
複数のCSSファイルを読み込む場合は、次のとおりにします。

<link rel="stylesheet" href="style1.css" type="text/css">
<link rel="stylesheet" href="style2.css" type="text/css">
<link rel="stylesheet" href="style3.css" type="text/css">

この場合は、スタイルの重複に注意してください。

表示は、こちらのサンプルから確認できます。

 

スタイルの要素の内容を取り込む

HTML文章に直接、スタイルを記述する方法です。
スタイルを特定のページだけに設定したい場合などに利用します。
この方法は、「CSSを書いたファイルを読み込む」と違い複数のHTML文章にスタイルの適用ができません。

 

【index1_3_2.html】

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>スタイルの要素の内容を取り込む - CSSガイドEX</title>
<style type="text/css">
<!--
body{
  margin:0;
  color:#000000;
  background-color:#DDDDDD;
}
h1{
  color:red;
  font-size:medium;
  margin:0;
  font-size:14pt;
}
p{
  margin:0;
  font-size:12pt;
  margin-left:10px;
}
-->
</style>
</head>
<body>
<hr>
<h1>果物一覧</h1>
<p>みかん</p>
<p>りんご</p>
<p>いちご</p>
<p>ぶどう</p>
</body>
</html>

 

style要素は、<head>~<head>の間にスタイルを記述します。
その場合、<!-- ~ -->で囲むことを忘れないようにします。
これはスタイルシート未対応のブラウザでCSSをソースとして表示してしまうことを避けるためです。

表示は、こちらのサンプルから確認できます。

 

任意の要素にstyle属性の値として取り込む

HTML文章中の任意のタグにstyle属性を追加し、その要素だけに有効なCSSを記述する方法です。
このタグだけに利用したい時、わざわざCSSファイルを編集しなくとも使えるのが利点です。

 

【index1_3_3.html】

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>任意の要素にstyle属性の値として取り込む - CSSガイドEX</title>
</head>
<body style="margin:0;color:#000000;background-color:#DDDDDD;">
<hr>
<h1 style="color:red;font-size:medium;margin:0;font-size:14pt;">
果物一覧
</h1>
<p style="margin:0;font-size:12pt;margin-left:10px;">みかん</p>
<p style="margin:0;font-size:12pt;margin-left:10px;">りんご</p>
<p style="margin:0;font-size:12pt;margin-left:10px;">いちご</p>
<p style="margin:0;font-size:12pt;margin-left:10px;">ぶどう</p>
</body>
</html>

 

これを利用する時には、

<meta http-equiv="Content-Style-Type" content="text/css">

のmeta要素を<head>~<head>の間にスタイルシートの言語を特定するため記述するようにします。

表示確認は、こちらのサンプルから。
なお、この方法はHTMLの新しい標準仕様(XHTML1.1)では非推奨とされています。

 

各種の表示を確認をすると全く同じ表示になっているのがわかりましたね。
しかし、そのHTML文章のソースを表示してみると、外部からスタイルを読み込まない場合にはスタイルの定義がそのまま表示されていることが確認できます。
第三者にスタイルの定義を見られたくないときは、CSSを書いたファイルを読み込むようにするとよいでしょう。

 

 

 


 

忍者AdMax

 

ex-mode.net | ツールEX | 素材EX | アフィモール | 初級者向 初めてのホームページ作り | Htmlタグ辞典 | 初めてのプランター菜園 | リンク・ボード
気のみ気のままなブログ | PHPを学ぼう! | ホビ★コレ | 班長日記!

▲UP

Copyright (C) ex-mode.net 2017. All Rights Reserved.