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について

HTMLは、一般的にソースやタグなどと呼ばれるものでホームページの基本的な構成要素を決めるものです。
この言葉、ホームページの制作を経験したことがあるなら一度は聞いたことがあるでしょう。

 

CSS(Cascading Style Sheet)、一般的にスタイルシートを使うには基本的な HTML を知らなければ理解するのが、ちょっと難しくなるかもしれません。
聞いたことがない人は基本的なHTMLについて、「ホームページを作ろう!」を参照ください。

 

CSSとは、HTMLの基本的な構成要素に具体的な要素を追加するものです。
簡単にいえば、元の表示にCSSでデザインの幅を大きく広げるということですね。

 

例えば、次のソースをみてください。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>CSSについて - CSSガイドEX</title>
</head>
<body>
<hr>
<h1>果物一覧</h1>
<p>みかん</p>
<p>りんご</p>
<p>いちご</p>
<p>ぶどう</p>
</body>
</html>

 

これを通常で表示すると 【サンプル1】 のとおりになります。

このサンプルでは、シンプルにHTMLタグを読み込んでいるだけなのでデザイン性は感じれれませんね。
DOCTYPEを定義したものでも表示比較をしてみましょう。

DOCTYPEについての解説は、「Htmlタグ辞典EX」を参照ください。

では実際、どのように違うのかサンプルを表示して確認してみてください。

見た目、殆どかわり映えしませんね。
余り気にすることではないのでしょうが、時々この設定の影響でボーダの位置がずれたり、Java Scriptなどが正常に動作しないなどの問題が発生するこがあります。
どうも、上手く表示できないな~と思ったら、DTDの設定を変更して表示確認をするとよいかもしれません。

 

では前回のソースに次のようにスタイルを追加してみましょう。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>CSSについて - CSSガイドEX</title>
<style type="text/css">
<!--
h1{
  font-size:12pt;
  color:red; margin:0;
}
p{
  margin:0;
  margin-left:6px;
  font-size:12pt;
}
-->
</style>
</head>
<body>
<hr>
<h1>果物一覧</h1>
<p>みかん</p>
<p>りんご</p>
<p>いちご</p>
<p>ぶどう</p>
</body>
</html>

 

スタイルを設定した【サンプル2】の表示をみてください。
どうでしょうか?
先ほどより、文字の大きさや行間、文字の書き出し位置などが設定されただけあって体裁がよくなりましたよね。
ここでは、<h1>と<p>タグに文字のサイズやマージン、行間を設定してみました。

 

スタイルを設定するとページの修正が容易であったり、SEO対策にもなります。
しかしデメリットもあります。
古いブラウザや種類の違うもので表示するとスタイルが崩れたりすることも多々あります。
その為、スタイルシートを使う時には、Internet Explorer(IE) や Chrome、Firefox等の複数のブラウザで表示テストするように心がけたほうがいいかもしれません。
最新のブラウザでは、HTML5.0に対応しているので余り気にする必要はないようです。

 

 

 

 


 

忍者AdMax

 

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

▲UP

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