CSSに関するネタを中心に色々書いてます。

タグ「position」の一覧

タグクラウドのサンプル作ってみた

タグとかめんどーだから、入れる気無かったんですけど、今更になって悪くないかも？とか思い始めたので、試しにタグクラウド設置してみました。

トップページの下の方におりますが、あんまり古いエントリーとか、タグ付け自体が適当だったりするので、あんまり使い物にならないかもしれません。。。永遠のベータ版です。

で、まぁかっこ良さげなタグクラウドを頑張ってつくろーとkiai出して作ってる途中に、ふと3ping.orgさんを思い出し、過去記事をあさってたらTag Cloudのスタイルというエントリーがありました。

んで、被ってる感じバリバリだからいっかーとか思ったんですけど、何となく作っちゃったんで公開っていう流れです。えぇ。

にしても3つほど作ったら疲れました。

ダウンロードとか実際の表示を見たい方は以下より。

17日から下書き状態だったエントリー、、、沢山用意する予定だったけど色んな都合で増えない予感なんで公開。

ずいぶん昔にフッターの区切りっぽいサンプルを作ったけど、ヘッダーは作ってなかったので、ヘッダーのサンプルを作ってみましたよっと。

というか、ヘッダーのサンプルって見かけたことがほっとんど有りません。（必要とされてないから？

ヘッダーって作るの大変というか、厄介だったりしませんかね。

全部画像ならがっちり固定しちゃえば、文字サイズ変更されても耐えられますけど、一部テキストがあったりした場合とかに文字サイズ変更するとレイアウト崩れてしまったりっていうアレが厄介だったりするのです。

文字サイズ変更しても崩れないようにする事を、DDTT対応っていうんでしたっけ。

今回のサンプルデザインは、一部弊社デザイナーにお願いしてつくってもらいました。
感謝感激でございまする。

デザイン提供してくれた方はこの人↓

前々からちょっとカッコイイなーと思ってたステッカーっぽいの。
試しに今回貼ってみました。左上に貼ってあるコーディングコンテストのがソレです。

ちょっとウチのサイトの場合だと横幅があるんできついですが、まぁテストって事で。（外しはしないけど）

って事で、詳細をば。

<$MTEntryTitle$>のイメージ結構見かける、見出しなどの横に配置されているボタン。

ウチのサイトでも、NEW ENTRYの横にRSSボタンをつけてます。

他に、続きを読むやMoreなんかが見出しの横にボタンやテキストとして配置されているケースが多いと思います。

このデザインを実現する際に、floatかpositionのどちらでも可能ですが、この場合はpositionの方が楽な上に柔軟に対応できる（と思う）のでオススメ。

たまに、リンクにカーソルを乗せた時、ほんのチョット動くのを見たことがありませんか？
実はコレって非常に簡単なテクニックで、CSSに下記の様に記述するだけです。

a:hover {
 position:relative;
 top:1px;
 left:1px;
}

昔、コレみて感動したのを覚えてます(笑
上記の書き方だと全体に適用されちゃうので、ワンポイントとして使うと良いかも知れません。

該当のCSSはコレ↓

h1 a:hover {
 position:relative;
 top:1px;
 left:1px;
}

部分的に適用させる場合は↑みたいな感じで記述すれば、h1のa:hoverにだけ適用されます。

動きを変えたい場合は、topとleftの値を大きくして上げれば良いのですが、あまり数値を大きくすると挙動が激しすぎてビミョーになってしまうので、1pxぐらいが妥当だと思います。