CSS

CSS 〜 カーソルの形を指定する

CSS

カーソルの形をCSSで指定することができるなんて、知らなかった。 CSSって、本当に何でもできるんだな。下記は、クラス属性にexampleが指定されている項目にマウスカーソルを合わせると、カーソルがクエスチョンマークになる場合の例。 .example { cursor: h…

CSS3 〜 transformプロパティで変形を試してみた

CSS3のtransformプロパティで、変形を試してみた。 下記画像をクリックすると検証サイトが開きます。 非常に面白い。平行移動するためのCSS。 transform:translate(平行移動させるpx); 傾斜変形のためのCSS。 transform:skewX(X軸方向に傾ける角度); 回転。 …

CSS 〜 レイアウトモデル:ボックス

いつも忘れるので、ボックスのpadding,border,marginプロパティ,widthプロパティ,heightプロパティを図で理解する。まず、CSSはボックス単位を基本にしてレイアウトされる。 それで、1つのボックスは図のように4つの部分から構成される。 content:内容 pad…

CSS3 〜 media queriesを試してみた

下記画像をクリックすると、検証サイトが開きます。 これでスマフォ対応もばっちり!? そこまで言い切るだけの知識と経験はないが、マークアップはHTMLで行い、デザインはCSSで行うという役割分担がしっかりされている場合は、media queriesでスマフォ用の…

cufonの使いどころは、CSS3の@font-faceが使えない場合。ただし、日本語は非対応だよ。

Netchさんのページに書いてありましたね。ChromeやSafari、firefoxではCSS3の@font-faceが使用できる。そのため、cufonを使わずとも、先日のエントリーで書いたように、適用したいフォントがPCにインストールされていなくても、@font-facesを利用してWebFont…

JavaScriptでWebページのフォントを変更するライブラリ〜cufon

自分でも綺麗なフォントを簡単にWEBページに適用できる方法がないかを調べてみたら、あった。Cufon Cufonについて、まとめてみた。 【Cufonとは】 ・フォントファイルをJavaScriptファイル(以下、JSファイルと呼ぶ)に変換し、適用したい箇所にそのフォントを…

センスのない自分と、Web Designerの違いを考えてみた

ネットサーフィンをしながら、様々なWEBページを見ていた。 なんと秀逸なデザインのページが多いことか。感動するばかりだ。作者はたいてい、Web Designerの方々。Designerって、素晴らしい。さて、ただただ感動するだけではイケナイということで、センスの…