@blog.justoneplanet.info

日々勉強

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

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

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

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タグ

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

■コントローラ

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

■ビュー

<body class="<?php print($this->controller); ?>" id="<?php print($this->controller); ?>_<?php print($this->action); ?>">

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

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

出力例

<body class="category" id="category_register">

参考

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

<body class="<?php print($this->module); ?> <?php print($this->controller); ?> <?php print($this->action); ?>">
出力例
<body class="category" id="category_register">

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

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

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

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

以下を先頭に書く。

javascript:

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

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

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

Modernizr

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

■参考

http://www.modernizr.com/

Firefoxでフッター(footer)の下に隙間ができる

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

clearfixハック

■解決策(CSSソース)

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

とする

■解説

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

■追記

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

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

透過PNGとIE6用CSS

■問題点

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

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

■解決策

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

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

■どうやら

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

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

■サンプルソース

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<style type="text/css">
#test {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    background-color: #00FFCC;
    width: 200px;
    padding: 50px;
}
</style>
</head>
<body>
<div id="test">
この丸角はFirefoxやSafari3では表示されるが、Internet ExplorerやOperaでは従来どおりの角ばった表示しかされない。
</div>
</body>

■実際の表示

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

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

■注意

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

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

-moz-border-radius

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

-webkit-border-radius

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

border-radius

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

■結論

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

background-position: -100px -35px;

■理由

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

background-position: -100px bottom;

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

■結論

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独自のプロパティ)

■結論

overflow:autoを使うべし

■要点

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

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

■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: "メイリオ", "MS Pゴシック", 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: "メイリオ", "MS ゴシック", "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が読み込まれる。

  1. →include1.css
  2. →include2.css
    • →base.css
    • →typeface.css
    • →link.css
    • →main.css

HTMLファイル内での記述

<link href="css/part1.css" rel="stylesheet" type="text/css" media="all" /><!--外部CSSファイルの適用(NN4xをはじく)-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
<script type="text/javascript">
//macの場合はlinkタグが書き出される
if(navigator.userAgent.indexOf("Mac") >= 0){
    document.write('<link href="css/mac.css" rel="stylesheet" type="text/css" media="all" />');
}
</script>