Jun05

Webkitがおもしろそう

webkit.jpg

Webkitが何かというと、アップルが開発したSafariやMacOSXのダッシュボードやWigetといったアプリケーションやiPhoneのOSのインターフェースの基盤を担っているフレームワークがWebkitです。Googleの携帯用OSであるアンドロイドのブラウザもSafariと同様にWebkitが採用されています。

続きを読む "Webkitがおもしろそう" »

投稿者: ユージック 日時: 00:25 | | コメント (1) | トラックバック (0) | ▲TOP

May30

イメージ画像をCSSで装飾するサンプル

cmsphoto.jpg

イメージの上にCSSでPNG画像を被せて装飾するサンプルの紹介サイトをご紹介します。これCMSを使っている場合、かなり便利ですよ。

続きを読む "イメージ画像をCSSで装飾するサンプル" »

投稿者: ユージック 日時: 12:47 | | コメント (0) | トラックバック (0) | ▲TOP

Mar25

IE6向けの便利なCSSハック

IE6でのロールオーバー時の背景画像のちらつきを解消するためのハックとIE6でmin-heightやmin-widthを効かせるためのCSSハックです。

続きを読む "IE6向けの便利なCSSハック" »

投稿者: ユージック 日時: 14:53 | | コメント (0) | トラックバック (1) | ▲TOP

Feb22

CMSで便利なCSSを使った画像をリサイズする方法

僕は仕事ではCMSを使用した案件がメインになっているのですが、CMSを使用した際に頭を悩ませる問題として、クライアントが縦横比率の違う画像を使用することによってレイアウト崩れを起こすことがあります。

その問題をスクリプトを使用せずにCSSだけで解決できそうな方法を見つけたのでご紹介しようと思います。

続きを読む "CMSで便利なCSSを使った画像をリサイズする方法" »

投稿者: ユージック 日時: 22:39 | | コメント (0) | トラックバック (0) | ▲TOP

Feb06

offspring.js

追記
指摘がありました。 offspring.jsがあっても、IE6とIE7でCSSの擬似クラスを使えないとの事です。 このライブラリはIEのcss実装の不備を補完するものじゃなく、最初の子要素に自動的に追加されます。クラスが追加されるだけで擬似クラスをjsで実装してるわけではないようです。offspring.jsを読み込んでも、cssファイルに書いた、:first-child{....}はie系では無視されます。offspring.jsの作者は、ブラウザ間で実装の有無がある:first-childのような擬似クラスは「使わない」ことを提案しているようです。

今現在、CSSの擬似クラスをサポートしているのはSafari 3だけらしいのですが、IEなどでもCSSの代替え策として最初の子要素に自動的にclassを追加してくれるoffspring.jsをご紹介いたします。

続きを読む "offspring.js" »

投稿者: ユージック 日時: 23:52 | | コメント (2) | トラックバック (0) | ▲TOP

Nov09

サーバーサイドでJSとCSSをバンドルする方法

How To Minimize Your Javascript and CSS Files for Faster Page Loadsという海外のブログでJSとCSSを最小限に抑えてページの読み込みを高速化する方法。具体的にはファイル自体を圧縮する方法と外部読み込みをバンドルする方法がある。今回はその中のサーバーサイドでバンドルする方法を紹介します。

続きを読む "サーバーサイドでJSとCSSをバンドルする方法" »

投稿者: ユージック 日時: 14:09 | | コメント (0) | トラックバック (0) | ▲TOP

Oct26

CSSのFramework　Blueprint

Blueprint

BlueprintというCSSのフレームワークを少し触ってみたのでご紹介します。

続きを読む "CSSのFramework　Blueprint" »

投稿者: ユージック 日時: 21:49 | | コメント (0) | トラックバック (0) | ▲TOP

Jun26

CSS3

現在、Safari3のパブリックベータ版が公開されていますが、このSafari3では18/19個のCSS3プロパティがサポートされているようです。 次のFireFoxでは9/19個のCSS3のプロパティがサポートされるようです。

近い将来はこんな感じで各ブラウザでCSS3がサポートされるらしいです。

  • Safari: 18/19
  • Firefox: 9/19
  • Opera: 5/19
  • IE7: 0/19 (?)

IEはまだCSS3のサポートはしていませんが、近い将来（IE次第でどうなるかわかりませんが）CSS3もを実務で扱う日もやってきそうな気がしますね。

そういうわけでCSS3でどういうことができるのかをちょっとだけ紹介します。

  • Box-shadow:ボックス要素にドロップシャドウをつけられる
  • Multi-column layout: CSSでマルチカラムレイアウトを実現できる
  • Resize: テキストエリアを拡張できる
  • Rounded corners:ボックス要素を角丸にできる
  • Colors with transparency: カラーに透明度を設定できる
  • Background image controls:背景画像の設定をもっとコントロールできる

もっと詳しく知りたい方は海外サイトになりますが、CSS3infoというサイトを辞書を片手に読み漁ってください。今のうちにCSS3の予習をしてもいい時期かもしれませんね。

参考元：Safari 3.0 Blazes a Rewarding Trail to CSS 3.0

投稿者: ユージック 日時: 22:31 | | コメント (0) | トラックバック (0) | ▲TOP

May18

PNGのフレームの上にJPEGやGIFの画像を被せれるCSS

PNGのフレームの上にJPEGやGIF等の画像を被せるPNG OverlayというCSSの技法をご紹介します。これはJPEGやGIFといった画像にマスクのような感じでPNGのフレームに乗せる事ができるCSSのTIPSです。

用途はギャラリーなどでわざわざ毎回PNGでドロップシャドウの効果などを作成しなくても、一枚のPNGの上にJPEGやGIFを被せてドロップシャドウなどの効果を作ることができます。ブログなどで写真をUPロードする際にドロップシャドウの効果をつけたい時などにも使えますね。もちろんIE6にも対応です。

(X)HTML

(X)HTMLは以下のようにdiv.pan_frameの上にJPEGやGIFなどの画像を乗せる感じ。

<div class="pan_wrap">
	<img src="img/pan_1.jpg" alt="panoramic" />
	<div class="pan_frame">&nbsp;</div>
</div>

CSS

CSSは以下のようにPNGのフレームがposition: absoluteで親要素のすぐ下に被ってくるように指定するのがミソですね。

.pan_wrap
{
	background: url(../img/pan_checks.gif) repeat;
	margin: 0 auto 15px;
	position: relative;
	width: 650px;
	height: 210px;
}

*html .pan_frame
{
	background: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/pan_frame.png', sizingMethod='crop');
}
.pan_frame
{
	background: url(../img/pan_frame.png) no-repeat;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 650px;
	height: 210px;
}

この程度の表現ならわざわざJavascriptに頼らなくてもCSSでできるんですね。CSSはやっぱり奥が深くておもしろいですね。とりあえず愛犬の写真で挑戦してみました。可愛いですね～。

サンプル
 

投稿者: ユージック 日時: 21:06 | | コメント (0) | トラックバック (0) | ▲TOP

Apr12

CSSのコンポーネント化

(X)HTML+CSSでコーディングを行っていると同じようなCSSを繰り返し書き込んでいることに気づくと思います。

普段よく使うグローバルナビゲーションや商品一覧や商品詳細などをコーディングしていると(X)HTMLはもちろんCSSも数値は違えど大体同じ記述を繰り返ししていますよね。

そういった普段よく使うCSSはコンポーネント化するほうが圧倒的に作業効率は高まります。

しかし、CSSをコンポーネント化する目的としては、このレイアウトにはこのCSSとかあのレイアウトにはこのCSSといったようなデザインの変化を考慮した目的でのコンポーネント作成になってしまいます。

しかし、CSSの正しい概念として、id、class付けはレイアウト(デザイン)を想定して設定するのではなく役割を想定して決めるほうが良いとされているのでコンポーネント化はダメなんじゃないの？と思ってしまいます。

しかし、僕個人の意見としてはルールというのは必ずしも守らなければいけない物だとは思いません。絶対ルールを守りたい人は守っていればいいとは思いますが。誰にも迷惑がかからないルールであれば必要であれば破ってしまえというのが僕の考えです。

実生活において僕達は社会が決めたルールに完全に乗っ取って生活してるでしょうか？交通規則やゴミの分別などといったルールにはかならずルール外での暗黙のグレーゾーンというのが存在するもんですよね。

僕も見通しの良い道路など、速度制限をプラス10キロで走っていますし、仕事帰りでしんどい日などゴミの分別もあいまいにしてしまうときがあります。(これはモラルの問題かもしれませんが)

ですので作業効率が格段にUPするCSSのコンポーネント化も僕は必要であればどんどん作っていってもいいんじゃないかと考えています。

しかし、明らかに文法に反するエラーがでるような(X)HTMLや、複数での作業が困難になるようなCSSは避けたいところですが、各組織に見合ったCSSコンポーネント化は協力し合えばそんな難しい作業ではないと思います。

たとえばグローバルナビゲーションであれば 
<ul id="global_nav" class="gn_con">
<li><a href="#">nav1</a></li>
<li><a href="#">nav2</a></li>
<li><a href="#">nav3</a></li>
</ul>

上記のような(X)HTMLにclassで下記CSSのコンポーネントを適用する。コンポーネント化したCSSはコンポーネントだけで一枚のCSSにまとめて読み込んでおくとします。

ul.gn_con {
display:inline;
}

ul.gn_con li {
float:left;
}

ul.gn_con li a {
display:block;
}

そして、コンポーネントで決めたCSS以外のデザインに関するCSS(width、heightやbackground等)はidなどでその都度指定するとします。

上記はあくまで一例であって、このようなコンポーネント化が効果的、もしくは効率的なのかどうかは案件の規模や組織のビジネスモデルによって異なってくるかとは思いますが、効率を考える場合CSSのコンポーネント化という考えは必要になってくるような気がします。

投稿者: ユージック 日時: 22:11 | | コメント (2) | トラックバック (0) | ▲TOP

Jan31

画像置換によるアクセシビリティーの低下

Fsikiさんのエントリー「text-indent: -xxxxemの弊害」で紹介されている内容ですが、現在のCSSテクニックの常套手段である画像置換をするとFirefoxではクリックした時に画面外に飛ばした範囲にまで点線が生じてしまうので、対策として

a {
   outline: none;
}

上記のような対策をしてきましたが、なんとこれに致命的なアクセシビリティーの欠如があることを知りました。

というのはリンクをタブキーでたどる際にフォーカスされないという問題です。

僕は日頃あまりノートPCを使わないので、タブキーでのリンクの移動などをしないという事もありまして、まったくもって気づきませんでした。

解決策は以下の通り

a {
   overflow: hidden;
}

MacIEではリンクが消失してしまうらしいのでMacIE用のハックも用意する。

a {
/*\*/
   overflow: hidden;
/**/
}

今後は、携帯電話やゲーム機なども含め、普段使わないデバイスでのチェックもするという事を意識していかなければならないのかもしれませんね。(仕事量増えて大変だ...)

投稿者: ユージック 日時: 19:43 | | コメント (0) | トラックバック (0) | ▲TOP

Jan19

CSS 回り込み解除の決定版

ここ最近コーディングをしていてDRY(Don’t Repeat Yourself)同じ作業を繰り返さないという考え方をCSSやマークアップにも取り入れていきたいと思うようになりました。そこで今回はfloatに関する便利なTIPSをご紹介します。

floatをかけた要素の後続要素は自動的に回り込んでしまいます。それを解除するためにclearを後続要素にかけてfloat解除しますが不自然さを感じます。というのも別の所でその後続要素を回り込ませたい場合などがあれば、floatの解除の解除といった同じ作業を繰り返してしまうからです。

そこでfloatの後続要素にclearをかけずにfloatした要素を含んだ親のブロック要素にclassをつけるだけで後続要素を回り込まなせないような方法があります。 classは2つでも3つでも付けることができますので、同じ記述を繰り返さないためにも色々とCSSの仕込みをしていきたいものです。

ルールを決める

floatさせた要素を含む親のブロック要素には全てcboxというclassをつけるというルールを決める。その内容は以下の通り。

.cbox { 
zoom: 100%;
}

.cbox:after {
content: " "; 
clear: both; 
height: 0; 
display: block; 
visibility: hidden;
}

zoomはIE独自の機能でこいつを指定すればIEはOK。しかしFirefoxやOperaには効果がないので、after擬似クラスでclearを含んだ半角スペースを指定します。これでモダンブラウザ全てに対応するfloat解除のclassの出来上がりです。

投稿者: ユージック 日時: 10:41 | | コメント (0) | トラックバック (0) | ▲TOP

Nov28

CSSの見出しサンプル

業務を効率よくスピーディーに行うためのCSSで作る見出しサンプル集
パターンは考えると星の数ほどありますが、ここでは実際にニュースサイトやブログでも使われている“使える見出し”にこだわってみました。
アイデアが思いついたら随時追加していく予定です。

画像を使わないオーソドックスな5パターン

CSSだけを使用した使い回しのきくオーソドックスなスタイル

使える見出し
h5#midashi_01{
padding:5px 0 5px 15px;
border-left:#009900 8px solid;
border-bottom:#009900 1px solid;
font-size: small;
font-weight: bold;
color:#333;
}
使える見出し
h5#midashi_02{
padding:5px 0 5px 15px;
background:#F5F5F5;
border-left:#009900 8px solid;
font-size: small;
font-weight: bold;
color:#333;
}
使える見出し
h5#midashi_03{
padding:5px 0 5px 15px;
background:#F5F5F5;
border-left:#009900 8px solid;
border-right:#666666 1px solid;
border-bottom:#666666 1px solid;
border-top:#666666 1px solid;
font-size: small;
font-weight: bold;
color:#333;
}
使える見出し
h5#midashi_04{
padding:5px 0 5px 15px;
background: #EEFFEE;
border-bottom:#009900 1px solid;
border-top:#009900 1px solid;
font-size: small;
font-weight: bold;
color:#333;
}
使える見出し
h5#midashi_05{
padding:5px 0 5px 15px;
background: #F5F5F5;
border: #666666 1px solid;
font-size: small;
font-weight: bold;
color:#333;
}

見出しにカテゴリに関するサブコメントを含める工夫をする。ｈタグにspanを入れてdisplay:blockにするのがポイントです。

使える見出しカテゴリに関するサブコメント
h5#midashi_09{
	padding:0 0 0 10px;
	border-left:#009900 5px solid;
	font-size: medium;
	font-weight: bold;
	color:#009900;
}

h5#midashi_09 span{
	display:block;
	font-size:small;
	color:#999999;
}

透過ＧＩＦを利用したカメレオン見出し

画像の背景をアルファ0に透過させて白色の横、ストライプ、格子柄で透過ＧＩＦを作る。その画像をｈタグの背景にもっていき色をＣＳＳで指定します。透過させている画像の背景にその色が浮き出るのでＣＳＳだけで色の変化をつけることができます。※濃い目の色を指定するとテキストが綺麗に見えないのが難点ではあります...

使える見出し
h5#midashi_06{
	padding:5px 0 5px 15px;
	background: url(../../oblique-line_1px.gif) #FFCCFF ;
	font-size: small;
	font-weight: bold;
	color:#333;
}
使える見出し
h5#midashi_07{
	padding:5px 0 5px 15px;
	background: url(../../stripe_1px.gif) #FFCCFF ;
	font-size: small;
	font-weight: bold;
	color:#333;
}
使える見出し
h5#midashi_08{
	padding:5px 0 5px 15px;
	background: url(../../check_1px.gif) #FFCCFF ;
	font-size: small;
	font-weight: bold;
	color:#333;
}

このブログのようにPNGを使用するとグラデーションをかけれたり、模様をつけれたりと色々なことができるようになります。ＩＥ6のシェアが下がるまでの辛抱ですね。

投稿者: ユージック 日時: 17:47 | | コメント (2) | トラックバック (2) | ▲TOP

Oct04

Firefoxでの回り込みと背景が伸びない現象への対処法

Fireｆoxではdivなどの中にfloatをかけた要素を入れた場合、floatを解除しないと背景が伸びなかったり、継続要素の回り込みなどの現象がおこります。

それらの対処法をいくつかご紹介します。

1.HTMLのdiv要素の閉じタグの手前にfloatをクリアした要素を入れる。

※問題はないがソースが汚くなる。

 <div id="container"> 
 <img src="01.jpg" class="float_left" />
 <br clear="all" /> 
 </div>

2. オーバーフローをかける

※IEはスクロールバーがでるので控えたほうがいいかも。

div#container {
  overflow:auto;
}

3.after擬似クラスを使用する。

※現時点ではたぶんベストな方法 

div#container:after {
  content : "";
  display : block;
  height : 0;
  clear : both;
}

注意点として、2番目の方法ではIEの印刷プレビューで表示崩れが起こるので 印刷用CSSを用意する必要があります。

結論として自分的に、現段階では１.3番目の方法がベストなんじゃないかと思いました。

【】

投稿者: ユージック 日時: 15:28 | | コメント (5) | トラックバック (0) | ▲TOP

CSSの画像置換でロールオーバー

CSSでロールオーバーする際の画像のチラつき防止対策

CSSのbackgroundとa:hoverを利用してロールオーバーを作ると背景のaタグを入れる親ノードのbackgoundにも背景を入れておかないとhover時に読み込みが追いつかずに画面上で何も背景が読み込まれない状態ができてしまいチラチラしてしまいます。

そこでCSSでロールオーバーする際の画像のチラつき防止対策を2つご紹介します。

background:none !important;でhover時に背景を消す方法

  • メリット：ソースコードが少なくすむのでスマート
  • デメリット：!importantはユーザースタイルシート操作するのでユーザビリティー的にお勧めはしない(硬いですけどねｗ)
div#side ul#sideMenu li#sideMenuButton {
    background:url(../../images/menubutton_hover.gif);
}
div#side ul#sideMenu li#sideMenuButton a{
    display:block;
    width:200px;
    height:50px;
    background:url(../../images/menubutton.gif);
    outline:none;
}
div#side ul#sideMenu li#sideMenuButton a:hover {
    background:none !important;
}

a:hover時にロールオーバーの画像を被せる方法

  • メリット：特に無し
  • デメリット：ソースコードが多くなる
div#side ul#sideMenu li#sideMenuButton {
    background:url(../../images/menubutton_hover.gif);
}
div#side ul#sideMenu li#sideMenuButton a{
    display:block;
    width:200px;
    height:50px;
    background:url(../../images/menubutton.gif);
    outline:none;
}
div#side ul#sideMenu li#sideMenuButton a:hover {
    background:url(../../images/menubutton_hover.gif);
}

結論でいうとこの二つの方法だとどっちでもいいかなｗ

【】

投稿者: ユージック 日時: 00:26 | | コメント (2) | トラックバック (0) | ▲TOP

Sep26

FireFoxのスクロールバー分のズレをとるCSS

FireFoxで表示したときページが縦方向にきっちり収まっているとき、スクロールバーの分だけスクロール時で表示されている時と比べてズレてしまいます。 デザイン自体には問題はありませんが、コンテンツが縦にきっちり収まっているページからコンテンツの長いページにページ移動する際にカクっとズレの動きが生じてしまいます。 な～んか気持ち悪いなぁと思ったときは

body {
   overflow-y:scroll;
}

とするとページ移動の際のズレの動きがなくなります。 しかし、ＩＥ6、IE7ではブラウザ自体のスクロールバーとは別にもうひとつ内側にスクロールバーができてしまいます。 そこで対処法としてＩＥ６用CSSハックの*htmlとＩＥ7用CSSハックの*+htmlを利用して

*html body {  　　　　　/*IE6だけに適用*/
   overflow-y:auto;
}

*+html body {　　　　　/*IE7だけに適用*/
   overflow-y:auto;
}

body {
   overflow-y:scroll;
}

とすればFireFox、ＩＥ6、ＩＥ７ともにきっちり表示されます。

このブログのようにJavascriptのコンテンツの折りたたみといったエフェクトを使用しているとページが開いた瞬間は、まだコンテンツのＣＳＳがhiddenの状態になっているので、FireFoxではカクっとズレの動きができてしまいます。今後こういうエフェクトを使うサイトには重宝するＣＳＳなんじゃないかと思いました。

投稿者: ユージック 日時: 23:15 | | コメント (0) | トラックバック (0) | ▲TOP

Aug18

IE6とFireFoxで知っておくべきmarginに関するCSSハック

今回はコーディングでよく悩まされるIE6とFirefoxでのmarginに関するCSSハックをご紹介します。

たとえば何かのブロック要素をfloatで右か左どちらかに寄せてしまうと、marginのautoが効かなくなります。 その場合は、普通にpxで幅のmarginを合わせることになります。 しかし、IE6とFireFox(FireFoxでなくてもW3C推奨ブラウザ)ではmarginの解釈が異ます。

例えば、左右に10pxをとるとすると、IE6では左右に20ｐｘづつmarginをとったように表示され、レイアウト崩れが生じてしまいます。

これはIE6がCSSに完全に対応していないために起こる現象なので、けっして自分の失敗ではないということを知っておかなければなりません。

対処方法として、IE6だけに効果を表す代表的なCSSハック”　*html body　をプロパティの前につけて、左右のmarginの数値を半分の5ｐｘに設定します。 これで、IE6、FireFoxともにレイアウト崩れを起こさずにきっちり表示されるでしょう。

IE7がブラウザのシェアをとるまでの当分の間は、こういったCSSハックを行うことがWEBデザイナーは必須となるでしょうね。

*html body div#main {
	width:500px;
	float:right;
	margin:10px 5px;
}

div#main {
	width:500px;
	float:right;
	margin:10px 10px;
}

投稿者: ユージック 日時: 17:21 | | コメント (4) | トラックバック (0) | ▲TOP

▲TOP

FEED

RSS 　　　

CONTENTS

WEB ACTIVITY

MOBILE

二次元コード