Tag Archive for CSS

Zero Cool | 2011年09月28日
One comment

なるほど！HTML5 の基本中の基本！？


先日、本ブログで HTML5 をベースにした Theme を適用していることを知って愕然としたのですが、それでも勉強しなければと一念発起・・・って、いつも大袈裟ですがまずは HTML5 の第一歩。「HTML5でサイトをつくろう::はじめてのHTML5　第1回「HTML5の基本の書き方を覚える」」から・・・

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトのタイトル</title>
<link rel="stylesheet" type="text/css" href="css/html5reset.css"  />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>

//ここにサイトに表示するコンテンツ内容を記述

</body>
</html>

上記は、以下の点で記憶しておく必要がありそうですね！

  1. HTML5 での DOCTYPE 宣言の書き方
  2. html 要素と文字のエンコーディング
  3. HTML5 が IE など対応していないブラウザへ新要素への対応
  4. HTML5 に対応したリセット CSS の導入

上記の第1、2項はまずは記憶してしまうのが良いのでしょうね。第3、4項は一筋縄ではいかないようですね。まさか HTML5 に対応していないブラウザのために JavaScript を適用するとは考えてもいなかったのですが、将来的にはこうした面倒な対応は必要なくなるんでしょうね。

リセット CSS はついこの間、本ブログの投稿記事「リセット CSS って何だ！？」で確認していましたから驚きはなかったので、既に公開されているリセット CSS を読み込めば良い、とのことですからちょっと引用しておきましょう。

良いCSSリセット探していたところ、html5docto rのリセットCSS がよく使われているようなので、html5doctorのリセットCSSをダウンロードして読み込みます。上記のリセットは利用しているサイトも多いようなので、私もこのブログで使用させていただきました。

まずは上記が基本中の基本といったところでしょうか・・・

本投稿記事を印刷する・・・ 本投稿記事を印刷する・・・

Category: ウェブプログラミング | Tags: ,
Zero Cool | 2011年09月19日
No comments

リセット CSS って何だ！？


本ブログで採用している（2011年9月19日現在）Theme ファイルのスタイルシート、コメントが多く実に解り易い構成になっているのですが、最初に記述されているコメントで「RESET」というのがあって、以下のコードが記述されています。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;　}

以前、自分で HTML や CSS をコーディングしていたことがあって、ブラウザによってウェブページの見え方が違っていることは知っていましたし、最初にどのブラウザで見え方を統一にするために初期値を設定する・・・って感覚はあったんです。この「RESET」ってそんなことだろうと感じていて、ネットを調べてみると「リセット CSS」っていうのがあるらしい！

「3streamer blog::HTML初心者が知っておくべきリセットCSS と3つのポイント」に 3 つのポイントが・・・

  1. デフォルトCSSは各ブラウザ間に差異があることを理解しよう
  2. *ユニバーサルセレクタを使ったリセット方法とそのデメリットを把握しよう
  3. 良く使われるリセット手法を把握しよう

なるほど・・・「リセット CSS」に関しての理解は正しそうです。ブラウザによって見え方が違うのでまずは初期設定してしまえ、ということですよね。ユニバーサルセレクタを利用しない方が良い、というのが私の理解ですからこれはスキップ。

3 番目のポイントで示される 2 つの手法は理解する必要がありそうですね！どうやら玄人の皆さんには有名な方法のようです。

「リセット CSS」なんて必要なし、と主張されているプロの方画もいらっしゃるようですから、あまり神経質になる必要はないのかもしれませんが、自分が採用している Theme の基本は理解しておきたいですね。

本投稿記事を印刷する・・・ 本投稿記事を印刷する・・・

Category: ウェブデザイン | Tags: ,
Zero Cool | 2011年09月19日
No comments

フォントのサイズ、px、em、pt どれが良い！？ウェブサイト PXtoEM.com が凄い！


本ブログでは、Theme に「ThemeZee.com::zeeSynergie」を採用していますが、最近この Theme で気になっているのがフォントサイズ！海外で開発された Theme は当然ですが日本語フォントに関する検討はしていないでしょうから調整が必要と私は信じてるのですが、それよりもフォントサイズの単位に、px や em や % が使われているのです。

どうしてバラバラの単位！？？

これまで、私はフォントサイズには「pt（ポイント）」を使って固定していましたが、モダンブラウザが拡大や縮小ができるようになって、その調整が不可能な「pt」は利用すべきではなく・・・ということをどっかのウェブサイトで読んだので急遽「pt」に似ている「px（ピクセル）」を適用した記憶があります。しかし、「px」も十分ではなく・・・って、いったいどれを利用すれば良いのか全く理解できずにネットを調べてみるとどうやらまだまだ結論が出ていないようです。ただ、「pt」、「px」、「em」の関係は知っていて損はなさそうです。

すると・・・「PXtoEM.com」という凄いサイトを発見！（って、有名だったりして・・・）このサイト、自分のベースフォントサイズを決定すると、そのフォントサイズに合わせていろいろなフォントサイズの換算表を自動生成してくれる！しかも、「pt」、「px」、「em」の比較表を生成してくれて、更に CSS も自動生成してくれます。凄い！

ベースのフォントサイズを「12pt」とした時に生成される比較表も掲載しておきましょう。全て、上記のサイトやってくれます。

「12pt をベースフォントサイズにした時の「px」と「em」
Pixels EMs Percent Points
6px 0.375em 37.50% 5pt
7px 0.438em 44% 5pt
8px 0.5em 50.00% 6pt
9px 0.563em 56.30% 7pt
10px 0.625em 62.50% 8pt
11px 0.688em 69% 8pt
12px 0.75em 75.00% 9pt
13px 0.813em 81.30% 10pt
14px 0.875em 87.50% 11pt
15px 0.938em 94% 11pt
16px 1em 100.00% 12pt
17px 1.063em 106.30% 13pt
18px 1.125em 112.50% 14pt
19px 1.188em 119% 14pt
20px 1.25em 125.00% 15pt
21px 1.313em 131.30% 16pt
22px 1.375em 137.50% 17pt
23px 1.438em 144% 17pt
24px 1.5em 150% 18pt

本投稿記事を印刷する・・・ 本投稿記事を印刷する・・・

Category: ウェブサービス | Tags: , ,
Zero Cool | 2011年09月18日
No comments

スタイルシートでの「id」と「class」の使い分け


HTML と CSS に関しては多少の知識はあるのですが、いつも使い方に迷うのが「id」と「class」の利用方法の違い。HTML への出力では変化が解りませんから・・・って、いつも自分に言い訳をしていますが。これを機会に自分の備忘録として明確にしておきます。

参考にしたのは、「All About::スタイルシートの class と id の使い分け」というページです。まずは、「id」と「class」の違いを明確にしておきましょう。

  • id：ページ中に1度しか登場しない
  • class：ページ中に何度でも登場する

1ページ中に1度しか登場しないものには「id」を、1ページ中に何度でも登場できるものには「class」を使うのが基本です。

基本中の基本なんでしょうけど・・・いままで調べることもせず放置していたので自分の怠慢でしたが、上記で明確に理解できました！更に適用例を以下に示しておきましょう。

<p id="tomoyo">アイディーを使った例</p>
<p class="sakura">クラスを使った例</p>

上記に対しての CSS は以下の通りに記述します。

p#tomoyo { color: red; }　//アイディーを利用し場合
p.sakura { color: red; }　//クラスを利用した場合

「id」の場合の CSS では「#（シャープ）」を「class」の場合「.（ドット）」を利用します。

本投稿記事を印刷する・・・ 本投稿記事を印刷する・・・

Category: ウェブデザイン | Tags: , ,
Zero Cool | 2011年09月17日
No comments

ウェブ用のフォントは「MS Pゴシック」は時代遅れ！？「メイリオ」が常道！？


本ブログを起ち上げてからちょっと気になっていたウェブサイトのフォント。海外で開発された Theme を適用していると日本語のフォントの指定が無いので必ずといって良いほど自分で日本語用のフォントを加えています。

フォントは、当然ですが「Cascading Style Sheets (CSS)」で指定します。いわゆるスタイルシートで指定するわけですね！個人個人の好みもありますから一概には言えませんが私個人は常に「MS Pゴシック」が常道だと信じて、本ブログでも指定していたのですが、どうもいつも見慣れている他のサイトに比べるとフォントちょっと違っているような気がする・・・で調べてみると・・・「日経トレンディネット::Vista時代のWebページは新フォントの「メイリオ」に」というウェブページを発見！まじかよ！ちょっと古い記事ですが引用しておきましょう。

Windows Vista では、従来の Windows 標準フォント「MSゴシック」「MS Pゴシック」に代わるフォントとして、「メイリオ」が搭載されている。「メイリオ」は英語で「Meiryo」と表記されるように、日本語の「明瞭」に由来している。文字の見栄えが“明瞭”になるというのが新フォント開発の意図だ。

XP 時代のフォントと Vista 時代のフォントの違いは明白だ。例えばデジタル Arena の記事は、コラム本文を Windows Vista の「Internet Explorer 7」で見ると以前の XP 時代と同じように、本文は「MS Pゴシック」で表示される。ところが、日経BP総合のページからリンクでたどるニュースやコラムの本文の文字をよく見ると、「MS Pゴシック」ではなく、文字がくっきりと明瞭になった「メイリオ」が使われていることが分かる。

Windows XP だとか Vista だとか・・・以下に私がフォントに無頓着で意識していなかったかを納得する記事になっていますが、やっぱり対策を講じなければ！

そこで、「浅野晃の公的ウェブサイト::フォント設定について」を参考にさせて頂きました！CSS の「Font-Family」の設定を以下のように書き換えました。

font-family: メイリオ,Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳＰゴシック","MS P Gothic",Osaka,Verdana,Arial,Helvetica,sans-serif;

これまでの「MS Pゴシック」の優先順位を下げて「メイリオ」を最優先フォントへ。ブログでは気が付きにくいかもしれませんが、投稿記事を書くための HTML エディタもフォント変更したので明らかに良くなった！

本投稿記事を印刷する・・・ 本投稿記事を印刷する・・・

Category: ウェブデザイン | Tags: ,