ホームページの種

FONTサイズの統一

2009-07-08 (水)
CSS
CSS | FONT

Fontサイズを統一させたいときにemを使うとIEと他のブラウザでサイズがずれて正しく表示されないことがあったり編集時に相対の計算が面倒だったりするのでYUIのFonts CSSを使って見ようと思う。



body {

	font-size: 13px;

	*font-size: small;

	*font: x-small;

}

サイズ一覧表

px	%	px	%
10px	77%	19px	146.5%
11px	85%	20px	153.9%
12px	93%	21px	161.6%
13px	100%	22px	167%
14px	108%	23px	174%
15px	116%	24px	182%
16px	123.1%	25px	189%
17px	131%	26px	197%
18px	138.5%

参考サイト
Yahoo! UI Library: Fonts CSS

Comments: 0
Trackbacks: 0

Base.css

2009-04-03 (金)
CSS

実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips~

という本の著者が使用しているbase.cssが参考になりそうなので記述しておきます。

もっと詳しく見たい方はlh3.jpで確認してください。



@charset "UTF-8";



/*--------------------------------------

	Default Reset & Base Style Sheet

	Last Update 2007-01-17

	

	1-1.Yahoo UI Library Fonts CSS

	1-2.Universal selector

	1-3.Structure Module

	1-4.Text Module

	1-5.Hypertext Module

	1-6.List Module

	1-7.Edit Module

	1-8.Forms Module

	1-9.Tables Module

	1-10.Image Module

	1-11.Object Module



---------------------------------------*/



/*--------------------------------------

	1-1.Yahoo! UI Library: Fonts CSS

	

	Copyright (c) 2006, Yahoo! Inc. All rights reserved.

	http://developer.yahoo.com/yui/license.txt



---------------------------------------*/



body {

	font-size: 13px;

	*font-size: small;

	*font: x-small;

}



table {

	font-size: inherit;

	font: 100%;

}



select,

input,

textarea {

	font-size: 99%;

}



/*--------------------------------------

	1-2.Universal selector

---------------------------------------*/



* {

	margin: 0;

	padding: 0;

	line-height: 1.6;

	color: #333;

	font-size: 100%;

	font-weight: normal;

	font-style: normal;

}



/*--------------------------------------

	1-3.Structure Module

---------------------------------------*/



body {

	background-color: #fff;

	font-family: Arial, Helvetica, sans-serif;

}



/*--------------------------------------

	1-4.Text Module

---------------------------------------*/



p,

pre,

address,

cite {

	margin: 0.5em 20px;

}



h1,

h2,

h3,

h4,

h5,

h6 {

	margin: 0.5em 20px;

}



h1 {

	font-size: 189%;

}



h2 {

	font-size: 159%;

}



h3 {

	font-size: 144%;

}



h4 {

	font-size: 122%;

}



h5 {

	font-size: 107%;

}



h6 {

	font-size: 107%;

}



pre {

	padding: 0.5em 10px;

	border: 3px solid #eee;

	width: auto;

	_width: 95%;

	overflow: scroll;

	color: #3d4263;

	font-family: "Osaka －等幅", monospace;

}



pre[title]:before {

	margin-bottom: 0.4em;

	padding: 0 10px;

	display: block;

	content: attr(title);

	color: black;

	background-color: #eee;

}



blockquote {

	margin: 1.5em 20px 1.5em 40px;

	padding: 1px;

	background-color: #eee;

}



blockquote * {

	color: #888;

}



blockquote[title]:before {

	margin: 2px;

	padding: 0.1em 16px;

	display: block;

	content: attr(title);

	background-color: #fff;

}



blockquote[cite]:after {

	padding: 0.1em 20px;

	display: block;

	content: attr(cite);

	color: #333;

	text-align: right;

}



cite {

	display: block;

	color: #333;

	text-align: right;

}



em {

	font-style: normal;

	font-weight: bold;

}



strong {

	color: #ff4500;

}



code {

	font-family: "Osaka －等幅", monospace;

}



abbr,

acronym {

	border-bottom: 1px dotted #aaa;

	cursor: help;

}



kbd {

	border: 1px solid #ccc;

	padding: 0 0.3em;

	background-color: #f5f5f5;

	font-family: "Osaka －等幅", monospace;

	text-transform: uppercase;

}



/*--------------------------------------

	1-5.Hypertext Module

---------------------------------------*/



a:link {

	color: #005585;

}



a:visited {

	color: #485270;

}



a:hover {

	color: #b83800;

}



/*--------------------------------------

	1-6.List Module

---------------------------------------*/



ul,

ol,

dl {

	margin: 1em 20px;

	padding: 1px 10px;

	list-style-position: inside;

}



li,

dt,

dd {

	font-size: 100%;

}



dt {



}



dd {

	color: #666;

}



li li,

li p,

li pre,

li dt,

li dd,

dd li,

dd p,

dd pre,

dd dt,

dd dd {

	font-size: 100%;

}



li ul,

li ol,

li dl,

li p,

dd ul,

dd ol,

dd dl,

dd p {

	margin: 0 10px;

}



/*--------------------------------------

	1-7.Edit Module

---------------------------------------*/



del {

	color: #666;

	text-decoration: line-through;

}



del[datetime]:before {

	content: "\00ff08"attr(datetime)"\00524a\009664\00ff09";

}



ins {

	border-bottom: 1px dotted #ccc;

	text-decoration: none;

}



ins[datetime]:before {

	content: "\00ff08"attr(datetime)"\004fee\006b63\00ff09";

}



/*--------------------------------------

	1-8.Forms Module

---------------------------------------*/



form {

	margin: 0.5em 20px;

	padding: 1px 0;

}



form dl,

form p {

	margin: 0.5em 10px;

}



fieldset {

	border: 1px solid #ddd;

}



legend {

	margin: 0 1em;

	padding: 0 10px;

}



input,

textarea {

	padding: 0.1em 10px;

	border: 1px solid #ddd;

	font-family: Arial, Helvetica, "ヒラギノ角ゴPro W3", sans-serif;

	background-color: #f5f5f5;

}



input {

	line-height: 1.2;

}



input:hover,

textarea:hover {

	border: 1px solid #aaa;

}



input:focus,

textarea:focus {

	border: 1px solid #000;

}



textarea {

	padding: 0.4em 8px;

}



/*--------------------------------------

	1-9.Tables Module

---------------------------------------*/



table {

	margin: 0 20px 0.5em 20px;

	border: 1px solid #aaa;

	background-color: #eee;

}



th,

td {

	padding: 0 10px;

}



th {

	color: #fff;

	background-color: #999;

}



td {

	border: 1px solid #ddd;

	background-color: #fff;

}



/*--------------------------------------

	1-10.Image Module

---------------------------------------*/



a img {

	border: 3px solid #ccc;

}



a:hover img {

	border: 3px solid #bccd56;

}



/*--------------------------------------

	1-11.Object Module

---------------------------------------*/



object,

embed {

	margin: 1em 20px;

}

参考記事

lh3.jp - P.118

Comments: 0
Trackbacks: 0

親要素でfloatを解除する(クリアフィックス)

2009-04-03 (金)
CSS
CSS

よく忘れるので備忘録で書いておきます。



/* (1)モダンブラウザ用の記述（生成内容でfloatをclear） */

div#container:after {

  height: 0;

  visibility: hidden;

  content: ".";

  display: block;

  clear: both;

}

/* (1)ここまで */



div#container {

  /* (2)IE 6, 7用の記述（幅を明示的に指定） */

  width: 100%;

  /* (2)ここまで */

  /* (3)Mac版のIE 5.x用の記述（overflow: hiddenを指定） */

  /*\*//*/

  overflow: hidden;

  /**/

  /* (3)ここまで */

}

参考記事

Comments: 0
Trackbacks: 0

Macで便利なソフトのまとめ

2009-04-01 (水)
まとめ
Mac

Macでフリーのソフトを探す時に役立ちそうなサイト

実際に自分で使用しているソフト

MacPorts (パッケージ管理)
MultiClutch (マウスジェスチャソフト)
NeoOffice (WordやExcelの互換ソフト)
BathyScaphe (2chブラウザ)
Chicken of the VNC (VNCクライアント)
Skitch (スクリーンショット)
Paparazzi! (スクリーンショット&簡単な編集)
svnX (svnクライアント)
Cyberduck (SFTPクライアント)
Fugu (SFTPクライアント)
mi (テキストエディタ)
Smultron (テキストエディタ)
XMLEditor (XMLエディタ)
CSSEdit (css編集ソフト)
GIMP (photoshopに近い画像編集ソフト)
Leeshore (GIMPをベースに改良された画像編集ソフト)
Inkscape (illustratorに近い画像編集ソフト)
Dropbox (オンラインストレージ)
Growl (情報通知ソフト)
Flip4Mac (動画再生ソフト)

Comments: 0
Trackbacks: 0

symfonyのダウングレード方法

2009-02-27 (金)
symfony
downgrade | symfony

間違えてsymfonyをアップグレードしてしまったときにダウングレードするには一度アンインストールして再度インストールする。

pear uninstall symfony/symfony

pear install symfony/symfony-1.**.**

これでok

Comments: 0
Trackbacks: 0

DropBoxについての記事まとめ

2009-01-21 (水)
まとめ
Dropbox | ファイル同期

Dropboxとはファイル同期、共有が出来るサービス。

パソコンのOSに関わらず利用できる事とバージョン管理を
してくれること、なにより同期が早いことが人気の秘訣だと思う。

rsyncで差分だけをアップするので転送量が少なくて済み、
subversionで過去のファイルも残るためバックアップにも使える。

Dropboxについてはいろいろなサイトで記事が書かれているから
今回は後で読むものを備忘録的に残しておく。

Comments: 0
Trackbacks: 0

SEOに関わる適切な画像の指定方法

2009-01-08 (木)
SEO
SEO | 画像

画像のaltやtitleというのは何を入れて良いのか迷ってしまう事があるので
メモとして記録しておきます。

画像の詳細や参考になるファイル名を伝える

画像の題材がわかるようなファイル名を付けるようにしてください。
たとえば、我が家の黒い子猫.jpg は IMG00023.JPG よりずっとわかりやすい名前です。

alt 属性は、画像ファイルのコンテンツを説明するために使用する。

不適切な例:

<img src="puppy.jpg" alt=""/>

適切な例:

<img src="puppy.jpg" alt="子犬"/>

最適な例:

<img src="puppy.jpg" alt="持ってこいをするダルメシアンの子犬">

＊alt 属性に多数のキーワードを指定すると、サイトがスパムと見なされる可能性があります。

アンカーテキスト

自分のサイトで使用するアンカーテキストを便利でわかりやすい、適切なものにする。

たとえば、休暇の写真のページに「2008 年 6 月のアイルランド旅行の写真」のようなアンカーテキストを指定してリンクします。

画像の内容を適切に記述する

ページ上の画像の周りに内容 (キャプションや画像のタイトルなど) を記述すると、画像の題材についての情報が検索エンジンに伝わります。

可能な限り、画像のそばに適切なテキストを配置するようにしてください。また、わかりやすいタイトルやキャプションを画像に付けることもお勧めします。

優れたユーザーエクスペリエンスを提供する

高品質の写真は、ピンボケで不鮮明な画像よりユーザーを引き付けます。鮮明ではっきりした画像は、Google の検索結果に表示されるサムネイルでもきれいに表示されるため、ユーザーがクリックしやすくなります。

サイト内の複数のページに同じ画像がある場合でも、画像ごとに個別のランディングページを作成するようにしてください。ランディングページを作成する場合は、説明タイトルやキャプションなど、ページごとに異なる情報を指定するようにしてください。

すべてのユーザーがページの下までスクロールするわけではないので、すぐに表示されるページの上部に画像を配置するようにしてください。

また、他の人たちと画像を共有することも検討してください。サイトの画像へのリンクを認めないと、サイトの負荷は減りますが、画像を見にきてくれる人の数や検索エンジンでの検索率は減少します。同様に、著作権などの情報を画像に追加している人もいます。これは画像の検索結果での掲載結果には影響しません。ただし、ここでもまた、ユーザーに与える影響について考える必要があります。

類似した画像をまとめて保存するようなディレクトリ構成にします。たとえば、サムネイル用のディレクトリとフルサイズの画像用のディレクトリがそれぞれ 1 つだけの場合、画像のカテゴリ別にディレクトリを作成します (例: Travel ディレクトリの下に Hawaii、Ghana、Ireland などのディレクトリを作成する)。成人向けの画像がサイトにある場合、他の画像とは別のディレクトリに保存することをお勧めします。

以上、元記事はこちら
ウェブマスター向けヘルプセンター