@blog.justoneplanet.info » CSS

Google font api(directory)を使ってみる

admin — Sat, 22 May 2010 09:40:39 +0000

ヘッダに以下を追加する。

cssに以下を追加する。

p {
    font-family: 'Lobster', arial, serif;
}

そうすると以下のように表示される。

Hello, world.

■探究

http://fonts.googleapis.com/css?family=Lobsterをブラウザ別で比較する。

Google Chrome

どうやらスクリーンに絞ってるらしい。

@media screen {
@font-face {
  font-family: 'Cantarell';
  font-style: normal;
  font-weight: normal;
  src: local('Cantarell'), url('http://themes.googleusercontent.com/font?kit=tGao7ZPoloMxQHxq-2oxNA') format('truetype');
}
}

いわゆるCSS3のWeb Fontsだ。

Firefox

@mediaが無い以外は大体chromeと同じだ。

@font-face {
  font-family: 'Cantarell';
  font-style: normal;
  font-weight: normal;
  src: local('Cantarell'), url('http://themes.googleusercontent.com/font?kit=tGao7ZPoloMxQHxq-2oxNA') format('truetype');
}

CSS3のWeb Fontsだ。

IE6～8（かわいそうなブラウザ）

なんか読み込んでるファイルが違う。

@font-face {
  font-family: 'Cantarell';
  src: url('http://themes.googleusercontent.com/font?kit=tGao7ZPoloMxQHxq-2oxNA');
}

http://ascii.jp/elem/000/000/465/465458/index-2.html

IEでWebフォントを使うには、一般的なTTF／OTF形式ではなく、独自のEOT（Embedded Open Type）形式のフォントを用意する必要がある。

ZendFrameworkビュースクリプトでのbodyタグ

admin — Mon, 11 Jan 2010 17:19:59 +0000

以下のように記述するとcssで装飾しやすい気がする。

■コントローラ

public function init(){
    $this->_view->module     = $this->_getParam('module');
    $this->_view->controller = $this->_getParam('controller');
    $this->_view->action     = $this->_getParam('action');
}

■ビュー

ちなみに以下のようになっている。

print($this->module);//モジュール名
print($this->controller);//コントローラ名
print($this->action);//アクション名

出力例

参考

以下の例の場合を考えてみる。

出力例

一見素晴らしいが、IEが以下のセレクタに対応していないため使用できない。

body.admin.category.register {
	background-color: red;
}
body.register {
	background-color: blue;
}

上述のように記述するとIE6のみbodyの背景色がblueになるはずだ。

Modernizrにjsを追記して簡単にHTML5やCSS3の対応を確認する

admin — Sun, 22 Nov 2009 14:54:08 +0000

以下を先頭に書く。

javascript:

Modernizrのソースを次にペーストしたら以下のソースを書く。

(function(obj){
	var txt = '';
	for(var i in obj){
		txt += i + ' : ' + obj[i] + '\n';
	}
	alert(txt);
})(window.Modernizr);

そうするとHTML5への対応やCSS3への対応がアラートされる。

頻繁に対応状況が変わるわけでないので無駄な作業な気がした。(´＿｀｡)

■参考

http://www.modernizr.com/

Firefoxでフッター（footer）の下に隙間ができる

admin — Sun, 25 May 2008 16:12:09 +0000

■原因として考えられるもの

clearfixハック

■解決策（CSSソース）

.clearfix:after {
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
    font-size: 0;/*これで解決させる*/
}

とする

■解説

afterでコンテンツ（上記の場合は『.』）を追加した分、（hight:0であるが）内部的に高さが増す。フッターにclearfixハックを使っている、もしくは他の要素でclearfixを使い内部的に高さが増した量よりフッターの高さが小さい時にフッタの下に隙間が出来るが、上記のafterで追加した要素のフォントサイズを0にすることにより、追加した要素の高さを完全に０にする。

■追記

但し、スパムとみなされる可能性もある気がするので、フォントサイズはかなり小さめの0以外の値を設定した方がイイかもしれない。

.clearfix:after {
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
    font-size: 0.1em;
}

透過PNGとIE6用CSS

admin — Thu, 27 Mar 2008 03:25:11 +0000

■問題点

透過PNGを使う為にIE6用のCSSを用意して、各ページから読み込むようにした。

しかし、トップページ以外の透過PNG以外が半透明にならなかった。

■解決策

以下のようにfilterのsrc指定を絶対パスで指定する。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/logo.png", sizingMethod="scale");

■どうやら

ここのsrc部分は読み込み元のHTMLファイルからのパスになるようだ。

画像を使わずCSSのみで丸角を表現しよう

admin — Sun, 13 Jan 2008 09:38:14 +0000

■サンプルソース



無題ドキュメント




この丸角はFirefoxやSafari3では表示されるが、Internet ExplorerやOperaでは従来どおりの角ばった表示しかされない。

■実際の表示

対応ブラウザ（Firefox、Safari3）でご覧ください。その他のブラウザでは従来どおりの角ばった表示しかされません。

この丸角はFirefoxやSafari3では表示されるが、Internet ExplorerやOperaでは従来どおりの角ばった表示しかされない。

■注意

現在のところ大多数が使用しているIEでは未対応の為、IEユーザーへの配慮が必要である。

■Firefoxにおけるプロパティ名

-moz-border-radius

■Safari3におけるプロパティ名

-webkit-border-radius

■CSS3におけるプロパティ名

border-radius

画像置換がうまく出来ない（Netscape7.1バグ）

admin — Fri, 07 Dec 2007 14:58:36 +0000

■結論

以下のように、バックグラウンドの指定はx軸指定、y軸指定ともにpxで指定しよう！

background-position: -100px -35px;

■理由

以下のような指定はNetscape7.1に認識されない為である。

background-position: -100px bottom;

CSSで手軽に字の先頭を揃えよう！

admin — Mon, 12 Nov 2007 07:07:20 +0000

■結論

h4 {
	padding-left:1em;
	text-indent:-1em;
}

とCSSに記述すればよい

サンプル

☆例えば、このように長い文章の頭に『●』や『■』や『☆』の記号がある場合でも2行目以降が1行目の文章開始位置の頭に揃うようになり見栄えも綺麗でスッキリする。

■駄作

dt {
	float:left;
	clear:left;
	width:1em;
}
dd {
	margin-left:1.5em;
}

のように記述しても同じ効果が得られるが無駄なタグが増える。それにfloatは使わないで済むならば、使わないにこしたことはない。

overflow-y（IE独自のプロパティ）

admin — Tue, 30 Oct 2007 03:36:18 +0000

■結論

overflow:autoを使うべし

■要点

overflow-yはIEの独自プロパティなのでボックスの高さを固定してもOperaなどではスクロールバーが出ない。

基本的なスタイルのみを定義したCSSファイルを作ろう

admin — Tue, 23 Oct 2007 08:37:59 +0000

■base.css

このCSSはファイル名の通り、基本設定となる。

サンプルソース

/********************************************************
 * body
 */
body {
	text-align: center;
}
#container {
	width: 870px;
	margin: 0 auto;
	text-align: left;
	background-color: #FFFFFF;
}
/********************************************************
 * fundamental preferences
 */
* {
	margin: 0;
	padding: 0;
}
img {
	border: none;
}
h3 {
	clear: both;
}
/********************************************************
 * class for layout
 */
.mb0em {
	margin-bottom: 0px;
}
.mb05em {
	margin-bottom: 0.5em;
}
.mb1em {
	margin-bottom: 1em;
}
.mb2em {
	margin-bottom: 2em;
}
.mb3em {
	margin-bottom: 3em;
}
.ta-center {
	text-align: center;
}
.ta-left {
	text-align: left;
}
.ta-right {
	text-align: right;
}
.fwb{
	font-weight:bold;
}
.fs08em {
	font-size: 0.8em;
}

■typeface.css

このCSSファイルはファイル名の通り、活字づら（フォント）設定を定義したファイルである。フォントに関する設定はこにファイルで一元管理する。

※但し、下記はWindows用の設定（Macは入っているフォントが違うので異なった記述が必要となる）

サンプルソース

@charset "UTF-8";/*CSSドキュメントの文字コードを記述（フォント名にはマルチバイト文字が含まれるため）*/
/********************************************************
 * color, type face, line height
 */
h1,h2,h3,h4,h5,h6,p,dt,dd,table,address {
	font-family: "メイリオ", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	line-height: 1.7;
	color: #444444;
}
h2 {
	font-size: 0.8em;
	line-height: 1.2;
}
h3 {
	font-size: 0.9em;
}
h4 {
	font-size: 0.8em;
	line-height: 1.2;
}
code {
	font-family: "メイリオ", "ＭＳ ゴシック", "Osaka－等幅";
}
em {
	font-weight: bold;
	padding: 3px 3px;
}
address {
	font-style: normal
}
p {
	text-align: justify;
	text-justify: inter-ideograph;
	margin-bottom: 0.5em;
}
ul {
	list-style-type: none;
}
li {
	line-height: 1.2;
	color: #666666;
}
/********************************************************
 * font-size
 */
p,dt,dd,address {
	font-size: 0.8em;
}
th,td {
	font-size: 0.8em;
}
li {
	font-size: 0.8em;
}
li li {
	font-size: 1em;/*liが複数回入れ子になってる場合フォントサイズが小さくなってしまうのを防ぐ*/
}

■mac.css（マッキントッシュ用フォント設定）

正直macは良く分からん。

/********************************************************
 * color, type face, line height
 */
h2,h3,h4,p,li,dt,dd,table,address {
　　　　font-family: "ヒラギノ角ゴ Pro W3", Helvetica, sans-serif;
}
code{
　　　　font-family: "Osaka－等幅";
}

■link.css

このファイルでリンクの設定を一元管理する。注意しなくてはいけないのは、疑似クラスを指定する順序だ。これを間違うと上手く反映されないことがある。

但し、定番といえる記述は少なくサイトに合わせたデザインに下記を変更する。

サンプルソース

/********************************************************
 * link
 */
a:link {
	color:#5aa5de;
	text-decoration:underline;
}
a:visited {
	color:#5aa5de;
	text-decoration:underline;
}
a:active {
	color:#f96400;
	text-decoration:underline;
}
a:hover {
	color:#f96400;
	text-decoration:underline;
}

■main.css

このファイルにはサイトごとに特色のあるソースコードが書きこまれる。

■ie6.css

アウトローなIE6用のCSSを記述する。

■上述の設定したファイルをまとめて読み込むCSSファイル

include1.css

CSSファイルを読み込むCSSファイルをを読み込む為のファイルである。

@importを使うとIE4には読み込まれないような処理となる。

サンプルソース

@import "include2.css";

include2.css

このCSSファイルはmac用以外を除く、上記CSSファイルを読み込む為のファイルである。

@import url(“/*ファイルのパス*/”);を使うとIE4.5には読み込まれないような処理となる。

サンプルソース

@import url("base.css");
@import url("typeface.css");
@import url("link.css");
@import url("base.css");

■読み込み経路について

以下のような順序で、HTMLファイルからCSSが読み込まれる。

→include1.css
→include2.css
- →base.css
- →typeface.css
- →link.css
- →main.css

HTMLファイル内での記述

CSSでレイアウトをする前に（CSSの基本）

admin — Tue, 23 Oct 2007 04:06:04 +0000

■作業フロー

1.ワイヤーフレーム（orカンプ）を用意する: ここで3カラムや2カラムレイアウトなど決定; ワイヤーフレームとは枠組みだけでデザインしたものは含まれない; カンプとはphotoshopやfiireworksなどで作った静止画像で完成イメージ画像
2.XHTML制作（意味上のタグを中心）: ページに掲載する文字情報に見出しや段落といった意味づけをする（ここは経験が出る部分でもあり侮ってはいけない）
3.div要素を1番で用意した画像にidやclassとセットで書き込む: いわゆる「まとまり（ヘッダー、フッター、メニューバー）」を画像上で括る
4.HTMLに3番の通りに反映: などとし、HTML上で括っていく
5.CSSを編集: ページ内の部品ごとにCSSを分けるといった構築方針も決める
6.必要環境でレンダリング: 文字の大きさを変えたりして入念にチェック
7.表示の不具合が発生した箇所についてCSSを調整: CSSハックはあくまでも最終手段とし、ハックの基準も決めておく; ※但し、クロスブラウザ対策は思ったより面倒なので見捨てるブラウザも考慮する

■CSSレイアウトのメリットとデメリット

メリット

・スタイル管理の効率化: HTMLファイル内でなく外部ファイル化されている場合、別個にファイルを開き修正しなくて良い; 場合によっては1箇所の修正で全HTMLファイルに適応できる
・広範なユーザーへの適合: ハンドヘルドディスプレイやテレビなどメディアに応じたcssを別個に指定できる
・デザインクォリティの向上: 各要素に背景が別個に指定できる; line-heightで行間を調整し読みやすくできる

デメリット

・コーディングにかかる作業時間の増加: ターゲットブラウザの個数による（web標準に準拠しているIE7、Safari、Firefoxなどは大きく問題にならないが、IE6などブラウザごとの表示の違いを吸収する時間は意外にかかる）

■文章構造の整理について

・構造化の重要性: 機械処理が可能になり、大量の情報の選別、ユーザーに恩恵がある
・div等による要素のグループ化（ヘッダー、フッター等）: 構造をより詳細に定義できる; 段組レイアウトへの補助

絶対的な位置にメニューなどを固定配置しよう

admin — Mon, 22 Oct 2007 15:16:38 +0000

■サンプル

サンプルファイルの表示

■解説-基本編

#menu {
    position:fixed;
    top:100px;
}

と記述すればブラウザの内枠上から100pxで表示される

但し、IE6では全く効果が無い

■解説-IE6ハック

とhead内へ追記する

■長所

expressionを使用するとCSS内にJavaScriptを記述できる（但し、IE5.0以降の独自拡張）
IE6で未対応であったCSSプロパティを補完できる

■短所

当然ながら独自拡張であるのでIEのみ対応
IEを互換モードで動かさない場合は固定配置部分がちらつく
上記理由によりIEを互換モードで動かす場合、レイアウト用に全く別のCSSを用意しなければならない（BOXモデルの解釈が異なるため）
同じ画面のFirefoxよりもマシンパワーを必要とし重くなる可能性がある
expressionの使用は表示などを回数を重ね検証する必要がある
document.documentElement && document.documentElement.scrollTop || document.body && body.scrollTopの部分は互換モードと標準モード時での違いを吸収するための記述である

■おまけ

IE6を捨てるというのも立派な選択肢の一つとして取っておく事を勧める。

なぜならばクロスブラウザ対策は思ったよりもコストがかかり、それに見合った効果が得られるとは必ずしも言えないからである。

■参考サイト

ダイナミックプロパティ expression() のまとめ