[B! css] t_yanoのブックマーク

青空文庫のほぼ全作品を、仕様策定中のCSS3ドラフトに従って縦書きHTML化

t_yano 2011/02/15

興味深い

リンク

[CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル

階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。三角の箇所は画像を使用しないで、CSSで実装されています。 Breadcrumb Navigation with CSS Triangles デモページ [ad#ad-2] HTML -マークアップパンくずはリスト要素で実装します。シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><a href="#">トップページ</a></li> <li><a href="#">第二階層</a></li> <li><a href="#">第三階層</a></li> <li><a href="#">第四階層</a></li> <li><a href="#">現在位置</a></

t_yano 2010/11/04

リンク

レイアウト作りを簡単にしてくれるCSSグリッドシステム

CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし

t_yano 2010/10/20

CSSでグリッドレイアウトする際の設定とかいろいろ。

リンク

Atatonic CSS framework

This is the project page for the CSS Framework Atatonic. Atatonic is meant to make your web—life easier and is created to provide a stable grid and solid typography. Read more » Please feel free to check the demo, or to checkout the code.

t_yano 2010/08/01

css

リンク

Bubble Coda Style with CSS3

My favorite thing about the Internet is that you get to go into the private world of real creeps without having to smell them.

t_yano 2010/05/19

浮かび上がるツールチップ

css

リンク

無駄なdiv要素やclassだらけのマークアップから卒業する方法

グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。はじめに CSSのフレームワーク：960.gsの場合 classの乱用を避けるリスト要素の使用画像とキャプションの使用複数の見出しとパラグラフの使用子要素のclassは親要素にはじめに数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。しかしながら、このCSSのフレームワ

t_yano 2010/04/03

デザイン苦手でcssも苦手なのですごく参考になった。なるほど，さきにグリッドを決めておいて，それを前提にスタイルを作るのか。

リンク

複雑なWebサイトデザインを容易に実現するテンプレート·YAML MOONGIFT

なぜデザインとYAMLが関係するのだろうと思ったが、ここでは「Yet Another Multicolumn Layout」の略らしい。つまりマルチカラムのデザインを容易に実現するためのCSSテンプレートということだ。整ったデザインが簡単に手に入るのはすばらしい！ Webプログラマの一番の悩みどころがデザインだ。特にCSSを使ってマルチカラムや入れ子になっているデザインは難しい。高さをそろえたり、メニューを横並びにしつつ、次の要素では違う表示など、複雑になればなるほど放棄したくなってくる。それがFirefox/IE/Safariなどのブラウザにも対応するとなれば尚更だ。そこで登場するのがYAMLだ。今回紹介するフリーウェアはYAML、複雑なマルチカラムデザインテンプレートだ。 YAMLでは多数のサンプルが用意されている。単純な2または3カラムを基本として、グリッド化されてページの幅に応