モダンCSSにおける黄金比とは？ | CREAMU
CSSでのレイアウトに黄金比を取り入れたい。 そんなときに参考になるのが、『Golden Ratio in modern CSS』。モダンCSSにおける黄金比だ。 このエントリーでは、960pxのdivがある場合、960 / 1.62 = 593px が左カラム、960 – 593 = 367pxが右カラムになるといったように、黄金比を取り入れたレイアウトの方法が解説されている。 その他にも、 line-height = font-size x 1.62 paragraph margin = paragraph line-height x 1.62 / 2 といったような設計の例が紹介されている。 結論としては、 Many people will argue, that this technic is an utopia and we cannot spend time coding ne
[CSS]divもfloatもclearもhackも使用しないで組む3カラムレイアウト | コリス
TJK Designのエントリーから、ヘッダ・フッタ・3カラムのレイアウトをdiv, float, clear, CSS hackを使用しないで実装するスタイルシートの紹介です。 A CSS layout that does not rely on DIV, FLOAT, CLEAR nor structural HACK! 対応ブラウザは、WidnowsがIE5.01, 5.5, 6, 7, Fx0.8, 1.5, 2.0, Op9.0, 9.24、MacがIE5.2, Safari2.0, 3.0, Fx2.0、LinuxがKonqueror, Mozilla、そしてiPhoneとなっています。 仕組みは、簡単に説明するとリストを使用したもので、実装方法は８つのステップで紹介されています。
[JS]ナビゲーション画像にアニメーションのエフェクトをつける -CSS Sprite2
A List Apartのエントリーから、CSS Spriteを使用したナビゲーションに、マウスオーバー時にアニメーションのエフェクトをつける「CSS Sprite2」を紹介します。 CSS Sprites2 - It's JavaScript Time demo 5 demo 6 CSS Spriteとは、スタイルシートで一枚の画像から複数箇所に配置をしたり、マウスオーバー時の画像指定を行うものです。 CSS Sprite2は、そのCSS Spriteにスクリプトを使用して、アニメーションのエフェクトつけたものです。 使用するスクリプトは、デモではjQueryが使用されていますが、PrototypeでもYUIなど他のスクリプトでも実装は可能です。 CSS Sprite2のベースとなっているのは、下記ページとのことです。
[CSS]3カラムレイアウトのサンプルサイト集 | コリス
noupeにエントリーされている３カラムレイアウトのサンプルサイトの紹介です。 9 Timeless 3 Column Layout Techniques 紹介されているのは、３つのカラムが「固定：２、可変：１」「固定：３」「可変：３」「レイアウト サンプル集」となっています。 固定：２、可変：１
[CSS]クロスブラウザ対応、高さの異なるカラムを揃えるスタイルシート | コリス
Matthew James Taylorのエントリーから、高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介します。 Equal Height Columns with Cross-Browser CSS & No Hacks demo: 2カラム demo: 3カラム 以前、紹介した「高さの異なるカラムを揃えるスタイルシート」では、ページ内アンカーで要素が消失したり、IEで印刷できないなどの不具合がありましたが、今回紹介するものは、その２つの不具合が無いものとなっています（IE7調べ）。 対応ブラウザは、IE5.5, 6, 7, Fx1.5, 2, 3, Op8, 9, Safari, Google Chromeなどほとんどのものに対応しています。 仕組みはカラムごとにdivを用意し、それぞれをずらして配置します。 下記は、そのイメージです。
ウェブでかっこいいグラフを描くためのライブラリやらテクニックやらのまとめ - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
ドットインストール代表のライフハックブログ
イメージ画像をCSSで装飾するサンプル | ユージック
イメージ画像をCSSで装飾するサンプル 2008年5月30日 イメージの上にCSSでPNG画像を被せて装飾するサンプルの紹介サイトをご紹介します。これCMSを使っている場合、かなり便利ですよ。 CSS Decorative Gallery 上記のような感じにセロハンや押しピンや切手風など様々なバリエーションがあります。サンプルを利用するのもありですが、やり方を覚えてオリジナルを作るのもいいですね。 マークアップとCSSはこういう感じに空のスパンをイメージタグの上に配置します。被せる画像にはPNG形式の画像を使用するのでIE６でのPNG対策としてiepngfix.htcを利用すると便利です。CSSでiepngfix.htcまでのルートを下記のように指定します。 <!--[if lt IE 7]> <style type="text/css"> .photo span { behavior:
CMSで便利なCSSを使った画像をリサイズする方法 | ユージック
CMSで便利なCSSを使った画像をリサイズする方法 2008年2月22日 僕は仕事ではCMSを使用した案件がメインになっているのですが、CMSを使用した際に頭を悩ませる問題として、クライアントが縦横比率の違う画像を使用することによってレイアウト崩れを起こすことがあります。 その問題をスクリプトを使用せずにCSSだけで解決できそうな方法を見つけたのでご紹介しようと思います。 概要はCSSのOverflowを応用して画像を綺麗にリサイズ表示する事ができるようです。CSSで画像を固定サイズにトリミング表示できるという事ですね。トリミングしてリサイズされた画像はマウスオーバーで全体表示がすることができます。 Create Resizing Thumbnails Using Overflow Property MTのようなCMSは基本的にWEB制作の知識のない相手に更新・管理・運用をしてもらう事が目
Lightview “Overlay anything width style”
Lightview allows you to easily create the most beautiful overlay windows using the jQuery Javascript library. By combining support for a wide range of media with gorgeous skins and a user-friendly API, Lightview aims to push the Lightbox concept as far as possible. Lightview uses HTML5 to help you deliver the best experience across every browser. Let it enhance your media automatically or create c
縞模様で目立つ枠線(囲み)を作る - ［ホームページ作成］All About
縞模様の枠線を作る スタイルシートのborderプロパティを使うと様々な枠線を作れますが、もっと目立つ凝った枠線を作ってみましょう。 今回は、以下のような枠を作る方法をご紹介いたします。
全部まるごとスタイルシート テキスト ―単語内での改行処理を指定する―
■ テキスト ▼ color »» 文字色を指定する ▼ text-decoration »» 文字を装飾する ▼ text-transform »» 大文字・小文字に置換する ▼ line-height »» 行の高さを設定する ▼ text-align »» 行揃えを指定する ▼ vertical-align »» 文字の垂直位置を指定する ▼ text-justify »» 文字の均等割付を指定する ▼ letter-spacing »» 文字間隔を指定する ▼ word-spacing »» 単語間隔を指定する ▼ text-indent »» １行目にインデントを設定する ▼ white-space »» 空白や改行をそのまま表示する ▼ white-space »» 改行しないで表示する ▼ line-break »» 禁則処理を適用する ▼ word-break »» 単語
CSS振り分け その3
ご使用の UA 名と違うものが表示されることはないはず。 ソース 強調部分は前頁の記述と違う部分 head 内の記述 <link rel="stylesheet" media="screen,tv" href="common.css" type="text/css" title="基本"> <link rel="stylesheet" media="screen,tv" href="mac_ie5-opera.css" type="text/css" title="Mac_IE5-Opera"> <!--[if IE 5 ]><link rel="stylesheet" type="text/css" href="win_ie5.css"><![endif]--> <!--[if IE 5.5000 ]><link rel="stylesheet" type="text/css" href
すぐに忘れるCSSメモ
ホーム ＞ HTMLに役立つヒント＞CSS Tips ＞ すぐに忘れるCSSメモ ■すぐに忘れるCSSメモ 僕がすぐに忘れてしまうCSSのプロパティ。他の人には参考にならないだろうなぁ(^^; まだまだ書きかけで増える予定。 position float justify font-family list-style-image リンクをボタン風に form要素の見栄えを変える CSSハック 印刷用CSS ●ポジション/position ▲ページトップ position:static/relative/absolute/fixed ; top : 0px; left : 0px; static デフォルト。上位のブックの終わりが起点。top/leftの指定は無効になる。 relative 相対的な位置指定。staticで表示される位置が起点となる。上位のブロック要素 absolu
スタイルシートでドロップキャップを作る - ［ホームページ作成］All About
雑誌などでよく使われるドロップキャップを実現 雑誌などでよく使われている「ドロップキャップ」を作ってみましょう。段落の最初の1文字を大きく表示させ、下の数行に食い込ませる装飾のことを「ドロップキャップ」と呼びます。 この「ドロップキャップ」は、スタイルシートを使えば、HTMLに手を加えることなく簡単に作れます。 作ってみた例は、以下の通りです。 先頭の1文字だけ、大きな赤色の反転表示になって、下の数行に食い込んでいます。 CSSのfirst-letter疑似要素を使うと、ボックスの最初の1文字にだけ装飾を施すことができます。 この疑似要素を使うと、雑誌などでよく見かける装飾「ドロップキャップ」を作ることができます。 スタイルシートだけで簡単にできますので、ぜひ試してみて下さい。 ドロップキャップを活用する上で必要になるのは、次の3点です。 first-letter疑似要素
どのリンクが選択中なのかを際立たせる装飾 - ［ホームページ作成］All About
メニューやリンクリストに活用するとおもしろいかも？ リンクの上にマウスポインタを載せると装飾が変化するデザインは、よく使われていますね。 では、リンクの上にマウスを載せたときに、リンクの横や上などに矢印を表示させる装飾はいかがでしょうか。 以下のリンクにマウスポインタを重ねてみてください。 リンクにポインタを重ねると、リンク文字の右側に赤色の矢印（）が現れるはずです。 リンクからマウスを放すと、矢印は消えます。 動的に矢印画像が表示されたり消えたりしますが、ここではスクリプトは一切使っていません。スタイルシートだけで実現しています。 ここで表示しているリンクは、通常のテキストリンク（文字で書いたリンク）です。 どんな文字を何文字表示させているリンクの横でも実現可能です。 矢印でなくても表示可能 もちろん、表示させるのは矢印である必要はありません。以下のような装飾も可能で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPress テーマ - Vicuna
GALLERY GALLERY ： Result -> 98 Gallery site
IDEA * IDEA
段落の先頭1文字を別デザインに - ［ホームページ作成］All About
CSS段組1：スタイルシートだけで段組を作る方法 - [ホームページ作成] All About![CSS段組1：スタイルシートだけで段組を作る方法 - [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/31482c59a0532bdfd65d75838f05b81f8275ed0e/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F8%2F3%2F6%2F201711261232%2Ftopimg_original.png)
