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 2 - IDやクラスの要素に適用

#ID名{ ~ }
.クラス名{ ~ }
要素名#ID{ ~ }
要素名.クラス名{ ~ }

id属性やクラス属性に対してスタイルを適用したい場合に使用します。
「#ID名」と「.クラス名」は、それぞれ「*ID名」と「*.クラス名」の省略形で、そのID名またはクラス名が指定されている要素に適用されます。
id属性は、ある要素だけにつけるもので、class属性はその要素の種類名や分類名を表します。
ひとつのHTML文章で同じクラス名は複数箇所に指定できますが、ID名は一箇所(一度)にしか指定できません。

 

では、実際にスタイルシートとHTML文章での記述についてみていきましょう。
id属性(ID)を使う場合には、要素名とID名との間に「 # 」(シャープ)記号を記述します。

 

【スタイルシート】

p#classtest1{ color:red; }

【HTML文書】

<p id="classtest1">クラスを使った例 1</p>

 

class属性(クラス)を使う場合、要素名とclass名との間に「 . 」(ドット)記号を記述します。

 

【スタイルシート】

p.classtest2{ color:red; }

【HTML文書】

<p class="classtest2">クラスを使った例 2</p>

 

クラスとIDは、どちらでスタイルを設定しても同じ内容のものであれば、ブラウザ上での表示も全く同じものになります。

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

 

次のHTML文章は、実際にIDとクラスのスタイルを設定したものです。

 

【index2_4_2.html】

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>IDやクラスの要素に適用 2 - CSSガイドEX</title>
<style type="text/css">
<!--
#myid{
  padding: 0.2em;
  border: outset 8px #ff0000; /* 赤線を表示 */
}
p.myclass{
  padding: 0.2em;
  color: #ffffff;
  background: #ff0000;
}

-->
</style>
</head>
<body>
<hr>
<h1>h1の要素を表示</h1>
<p>pの要素を表示</p>
<p class="myclass">pの要素、「class="myclass"」と指定</p>
<p>pの要素を表示</p>
<p id="myid">pの要素、「id="myid"」と指定</p>
</body>
</html>

 

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

 

 

 


 

忍者AdMax

 

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

▲UP

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