スタイルシートマニア

ホームページカスタマイズ Tips

CSS で3D BOX

どうタイトルをつけたものか迷いましたが、読んで字のごとくCSSで3Dつくるやつです。
少し前まではこういったことはFlashの十八番だったんですが、もはやCSSとHTMLで出来る時代になってしまいました。
まあ、やる人がやればゲームまで作ってしまうみたいです。

デモ

ダウンロード

かなりお手軽ですごくて、こういったものは大好きですが、これはこれで少々使い処が難しそうですね。
いつか使う日がくるかもということで。

コメント(0)

CSSでグラデーションの背景

ここでちょっと小技を紹介。

グラデーションの背景ってちょっとあこがれませんか？
単色べた塗よりなんだか高級感があってちょっとすごいホームページみたいに見られそうな気がしますよね？（笑）
僕もホームページの勉強をはじめたころグラデーションの背景を作りたくてめちゃくちゃ悩んだ事があります。
巡り巡った結果jacascriptでグラデーションを作るなんてものに行きあたって、チャレンジしてめんどくさくてやめてしまった経験があるくらいです。

しかし！答えはものすごく簡単だったのです！

たとえば下記画像のようなグラデーションの背景を作るとします。

gradation09091006-01

この時は、画像をこのように切り取ります。

gradation09091006-02

完成品

完成品

それから、cssで背景の設定をします。
僕は、だいたいbodyに設定をしますので、

body {
 background: url(../img/bg.jpg) repeat-x #0e0e0e;
 --省略--
 }

という感じです。
ここのポイントは、背景画像をrepeat-xでリピートさせている事と背景色をグラデーションの最後の色#0e0e0eに設定している事です。

要は、グラデーションの画像を横にリピートさせてグラデーションを作り、一番下の色と背景の色を合わせているだけなのです。
簡単ですねぇ。
javascriptでやってみようとしていた自分が馬鹿らしくなります。

そして、勘が良い人ならもう気づいていると思いますが、今やったのは上から下へのグラデーション。
右から左（まあ、左から右でもいいんですが）のグラデーションはどうするのか！
これも答えは簡単！背景画像をrepeat-yでリピートさせればいいだけです。
後は、背景色を同じようにグラデーションの最後の色に合わせればOK！

body {
background: url(../img/bg.jpg) repeat-y #0e0e0e;
--省略--
}

コメント(0)

CSSで見出しをデザイン（擬似クラス:first-letter）

ドロップキャップで使った:first-letter 擬似クラスを使って見出しをデザインしてみます。

#h2-headline02 {
      color: #600;
      border-bottom: 1px solid #600;
}

#h2-headline02:first-letter {
      font-size: 2em;
}
<h2 id="h2-headline02">CSSで見出しをデザイン（擬似クラス:first-letter）</h2>

CSSで見出しをデザイン（擬似クラス:first-letter）

コメント(0)

CSSで見出しをデザイン（付箋風）

CSSで便箋風の見出しをデザインしてみます。

backgroundで背景色を指定、colorでテキストカラーを見やすい適当なカラーにして、border-leftで付箋の感じを演出、border-bottomで立体感を出して、paddingで文字の位置を調整したら完成です。

#h2-headline01 {
      background: #ddd;
      color: #600;
      border-left: 10px solid #600;
      padding: 5px 0 5px 10px;
}
<h2 id="h2-headline01">CSSで付箋風の見出しをデザイン</h2>

CSSで付箋風の見出しをデザイン

コメント(0)

CSSでスモールキャピタル

スモールキャピタルは小文字に対してサイズはそのまま大文字として表示させられる技術です。ちょっとしたアクセントに使えます。

スモールキャピタルは font-variantプロパティで使用します。

#small-capas {
      font-variant: small-caps;
}
<p id="small-capas">Source Marine</p>

Source Marine

コメント(0)

CSSで文字サイズ変更

実際ブラウザで文字サイズを変更できる事をしっているのは、我々ホームページ制作にかかわる人間か、そこそこパソコンが使い慣れた人間で、ほとんどの人は文字サイズが変えられる事を知らないまま使っているのではないかと思います。

そこで、styleswitcherというjavascriptを使ってホームページ上から文字サイズを変更しましょう。これはstyleswitcherでそれぞれの文字サイズのスタイルシートを読み返させて文字サイズを変更します。

まずはstyleswitcherをダウンロード

次に、ダウンロードしたファイルをjavascriptを置いているフォルダ（jsなど）へアップロードします。そして、ヘッダの中にstyleswitcherを読み込ませる記述を入れます。

例えば
<head>
<script type=”text/javascript” src=”/js/styleswitcher.js”></script>
</head>
など

そして、それぞれのフォントサイズのスタイルシートも読み込ませます。

例えば
<head>
<link rel=”stylesheet” type=”text/css” media=”screen,tv” href=”css/import.css” />
<link rel=”alternate stylesheet” type=”text/css” href=”css/small.css” title=”Small”>
<link rel=”alternate stylesheet” type=”text/css” href=”css/large.css” title=”Large”>
<script type=”text/javascript” src=”/js/styleswitcher.js”></script>
</head>

次にhtmlの中にフォントサイズを変更するボタンを設置します。

例えば
<div id=”change-fontsize”>
<p id=”change-fontsize_tilte”>文字サイズを変更</p>
<ul>
<li id=”minus”><a onClick=”setActiveStyleSheet(‘Small’); return false;”>マイナス</a></li>
<li id=”return”><a onClick=”setActiveStyleSheet(‘Default’); return false;”>元に戻す</a></li>
<li id=”plus”><a onClick=”setActiveStyleSheet(‘Large’); return false;”>プラス</a></li>
</ul>
</div>
<!–change-fontsize End–>
など

これで設置完了です。

サンプル

コメント(0)

CSSで扱える単位

HTMLでは、長さや大きさを指定するときはpx（ピクセル）、%（パーセント）、フレームなどの比率をあらわす「*（アスタリスク）」の３種類しか使えませんでしたが、ＣCSSでは、沢山の単位が用意されています。

% ：何に対する割合かはプロパティによって異なる
em ：フォントサイズを１とする単位
px ：ピクセル
pt ：ポイント（1/72インチ）
pc ：１パイカ（12ポイント）
mm ：ミリメートル
cm ：センチメートル
in ：インチ（2.54センチメートル）

まあ、とりあえず列挙してみましたが、ぶっちゃけこれの1/3くらいしか使わないと思うんですけどね（笑）
なんだかんだいって結局基本px（ピクセル）です！mmなんて余計なお世話です！（笑）

コメント(0)

CSSの色指定

ＣＳＳで色を指定するには、大きく分けて二つの方法があります。一つは「black」や「white」などのキーワード、もう一つは、#fffなどの数値です。

まず、キーワードによる色の指定ですが、

black(#000000)
gray(#808080)
silver(#c0c0c0)
white(#ffffff)
navy(#000080)
teal(#008080)
aqua(#00ffff)
blue(#0000ff)
olive(#808000)
green(#008000)
lime(#00ff00)
yellow(#ffff00)
maroon(#800000)
purple(#800080)
fuchsia(#ff00ff)
red(#ff0000)

の16種類があります。

次に数値での指定ですが、これはHTMLと同じ方法で#に続いて、RGB各色の値を２桁ずつの16進数で指定します。合計すると約1,677万色の中から一つが選べる計算になります。
しかし、指定できるからといってやたらめったらこれを複雑に使いまくってもＯＳやモニターによって同時に表示できる色数に制限があるので必ずしもみんながみんな同じ色で見えているわけではありません。Webの場合は色に関してかなりあいまいで紙媒体のかたがたの苦労は相当なものでしょう。。。しかし、Webだからと言ってあまえたり、ないがしろにするのはよくありません。
そこで登場するのがWebセーフカラーなるものです。これを全部書いていたら結構あるので別の機会で紹介するかWebセーフカラーで検索してみてください。

または、DreamWeaverでCSSの色指定をすると、Webセーフカラーで指定ができます。後、Illustrator、Photoshopなどで、色を指定するときにWebセーフカラーのみに制限のチェックを入れるとWebセーフカラーのみになります。
そんなこんなでWebセーフカラーが選択できますが、実はこれでも完璧に同じになるわけではありません。しかし、やみくもに色指定をするよりか、はずれは少なくなるので、なるべくWebセーフカラーを使ってサイトを構築することを心がけましょう。

その16進数での指定の仕方ですが、実は最初の方でこっそり使いました！６桁ではなく３桁で指定する方法があります。

それは、#AABBCCなど二つ並べた２桁が同じ値であれば、#ABCと指定しても同じものとして解釈してくれます。これは、Webセーフカラーを指定するときには大変便利なので覚えておきましょう。

後、あまり一般的ではありませんが、RGBで指定する方法もありま

例えば赤でいくと
rgb(255,0,0)

っと指定すると赤になります。

更に、値に%を使った方法もあります。

もう一回赤で行くと、
rgb(100%,0%,0%)と指定ができます。

ＲＧＢとは、コンピューターの赤（Ｒ）緑（Ｇ）青（Ｂ）の３つの色の組み合わせで色を表現する方法で光の三原色と呼ばれています。

コメント(0)

スタイルの適用先指定方法Ⅳ

子孫セレクタ

これは適用先を指定するときに、「要素Ａの中の要素Ｂに適応させる」っという方法です。

例えば、class=”box”の中のpタグは全部上下に1emのmarginを付けたい時なんかはこれを使うと便利です。

書式としては、セレクタ名との間に半角スペースを入れます。

記述例

.box p {
      margin-top: 1em;
      margin-bottom: 1em;
}

これは、Ａの中のＢの中のＣの中のＤっといった感じであればあるだけ増やせますが、あまり使いすぎると今度は仕様変更するときなど、どこに何が適応されているのか分からなくなるので、適材適所！case　by　case！で上手く使い分けるようにしましょう。

追々記事にしていきますが、デフォルトの状態だとpタグにはすでにmarginがついています。

これは何かとうっとおしいのでリセットするように設定します。

コメント(0)

実際にちょと使ってみる

あまり理屈をこねてもややっこしくなるだけなので、実際にちょっと作ってみましょう。

<div class=”box01″>

<h2 id=”h2-css_use”>CSS使ってhtmlを作ってみる</h2>

<p>boxなど一ページに複数使用が予想されるものにはclassを採用</p>
<p>h（見出し）タグなどそのページには一度しか使用されないようなものにはidを採用</p>

<p>必ずしもh（見出し）タグにidを付けないといけないわけではありません。</p>
<p>これらは目安であり絶対ではありません。</p>

</div>
<!–box01終わり –>

コメント(0)