[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を用意し、それぞれをずらして配置します。 下記は、そのイメージです。
サイトの背景を大きく使う時
Since I posted the huge collection of Large Background Websites, I received several email requests on how to make a large background site with CSS. So, I thought it would be a good idea to share my techniques on designing large background websites. In this tutorial, I will provide various CSS examples on how you can create a large background site using either a single or double images. Common Mist
今よりちょっとだけクオリティを上げるために。
執筆が終わったと思えば、主業務が激務でネタがちらほら浮かんでたのに書けない今日この頃。 でも、どこぞのiPhoneネタと宣伝ばかりになってしまったブログよりいいかも知れません。えぇ。 さて、CSSってある程度覚えてしまえば思った以上に簡単に組めたりして、何となく組めている気がするって思ったりしないっすかね。 もしくは、その逆になーんかイマイチ成長してないようなって感じてる時とか。 そんな状況のときに、今よりちょっとだけコーディングのクオリティや効率を上げるのに意識する事とかやっておくべきこととかを思いつくままに上げてみます。 仕事としてってのがベースなので、個人サイトやブログレベルだと当てはまらないかも。 ボクが昔はやってなかったけど今は当たり前な事とか、今でも忘れがちな事とか、何かそういう感じのことを書いていくので、人によっては当たり前だし、ちょっとした発見がある人も居るかも？ よく分か
center-circle.net » マークアップデザインエンジニア的、コーディング設計手順
written by CLSTK at 12:26 am on 7 月 27, 2008 in Job まいど！CLSTKです。 以前ご紹介した「効率よくコーディングするための５つの手順」をもう少し、掘り下げてみたいと思います。 これは、僕自身のやり方なので、みなさんの手法に合うかわかりませんが、盗めるところは盗んで仕事に活用して頂ければと思います。 概要 効率よく仕事をこなすには、何事も準備が必要です。 段取り八分とよく言いますが、ほんとにそう思います。 特にコーディングの場合は、なるべく考える時間を増やした方が圧倒的に作業効率があがります。 設計をすることによって、頭の中でほぼマークアップが終わっている状態になります。 なにわともあれ、実践でお試しくださいｗ デザイン(案)をカラーでプリントアウト コーディング設計は、まずはデザイン(案)をプリントアウトすることか
モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
[使える CSS テクニック] CSSを使った見栄えの良いサイトマップ | バシャログ。
第 7 回目は「CSSを使った見栄えの良いサイトマップ」です。 今回は、Web サイト構成をすばやく確認できるように見栄えのいいサイトマップを紹介したいと思います。 以下のようなツリー構造のサイトマップを作成してみます。 sample 1.画像を用意 以下のような画像を使用します。 アイコンから伸びる点線はなるべく長くします。 2. XHTML はリストの入れ子で XHTML <ul> <li><a href="#">ホーム</a> <ul class="category"> <li><a href="#">会社案内</a> <ul class="page"> <li><a href="#">会社概要</a></li> <li><a href="#">コンセプト</a></li> <li><a href="#">沿革</a></li> <li><a href="#">社長挨拶</a></l
![[使える CSS テクニック] CSSを使った見栄えの良いサイトマップ | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
re:マルチシートアプローチとかクラス名とか
re:マルチシートアプローチとかクラス名とか ネタ元:マルチシートアプローチとかクラス名とか いろいろな人の意見が出てきて面白いところですので、私の意見も書いておきたいと思います。 個人的にはスタイルシートを、分けないほうが効率が良いと思ってます。 Firebugを利用すれば編集したいCSSが、どのスタイルシートの何行目に記述されているかが3秒でわかるので1枚だと非常に楽です。 作業的には ブラウザで確認→Firebugでスタイルの確認→エディタに移動(Alt+Tab)→編集する行に移動(Ctrl+g)→編集保存→ブラウザに移動→最初に戻る。 で済むのですが複数枚で管理していると ブラウザで確認→Firebugでスタイルの確認→エディタに移動(Alt+Tab)→編集するスタイルシートに移動(Ctrｌ+Tab)→編集する行に移動(Ctrl+g)→編集保存→ブラウザに移動→最初に戻る。 という
印刷用デザインをきれいにまとめるための7つのポイント - TRANS [hatena]
印刷用デザインもWebサイトにとっては1つのデザインだと言えます。制約がある印刷用デザインをきれいにまとめるためのポイントを上げてみました。 印刷用デザインをどうするか。 当ブログで印刷用CSSをはじめて取り上げたのが2006年12月でした。また、2007年4月にも印刷用CSSをもっとよくするための4つのTipsという内容で取り上げました。 さて、今回取り上げるのは今までと違い、印刷用CSSのコーディングではなく、純粋に印刷用デザインはどのようなものがよいか、というものです。コーディングではなく、いかにデザインするか。 ちょうどアックゼロヨン・アワード2007の結果発表もあったことなので、その受賞作の印刷用デザインを参考にしました。また、ADP: 印刷用CSSの書き方（基本編）もかなり（むしろほとんど）参考にさせてもらいました。そのポイントを以下の7つにまとめました。 なお、文末にアックゼ
![印刷用デザインをきれいにまとめるための7つのポイント - TRANS [hatena]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f625aab20ef8abfef513499376656cecc29a08ae/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fa%2Faratako0%2F20080518%2F20080518141449.png)
レシピと味見でおいしいコーディング
制作仕様書は「料理のレシピ」 制作仕様書やコーディングチェックシートと言うと、堅苦しく聞こえるかもしれません。ワークフローや細かなサイト設計に基づいた制作の仕様が記載された制作仕様書は、料理の流れや材料、その分量が書いてある「料理のレシピ」に似ています。 そして制作仕様書通りに制作されたものか確かめるコーディングチェックシートは、料理レシピによって作られた「料理の味見」をする様なものと解釈してみてはいかがでしょうか？ ガイドライン化するメリットとデメリット 制作仕様書には、Webサイト全体の設計方針に分かりやすく書いたものにサイトマップなどを拡張した簡易的なものから、ファイル名や文法表記の統一など詳細情報を事細かに冊子のように厚いドキュメントに記載したものまで多く存在します。 ここではその内容や内容量に問わず制作仕様書が制作者へ与えるメリットとデメリットをご紹介します。 ガイドライン化する
チーム制作のメリット・デメリット
チームによるWeb制作の現場でのメリット 本連載ではこれまで、複数でHTMLファイルを扱うためのルールの必要性、ルールをドキュメント化したガイドラインの存在、ガイドラインの作り方、チームで作業する上での技術スキルや知識の差を埋める対策としての勉強会や、コミュニケーションについて、提案や事例などを交えて解説してきました。 チームと言っても漠然とした設定でしたが、企業における業種・業態はそれぞれですし、運営する人たちもまた違ってきます。しかし、大事なことは「チームはでまとまってWebサイトを作っている」という意識をお互いに持つことではないでしょうか。 これまでの回で注意するべき点を解説してきましたが、それとは反対にチームでの制作現場だからこそ、そこから得られるメリットもたくさんあります。 多くの人と関わることができる機会は、フリーランスでは得られないメリットの1つです。たくさん人がいるというこ
[CSS]IE6でよく遭遇する6つのバグとその解決方法 | コリス
CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。 IE CSS Bugs That’ll Get You Every Time ボックスモデルのバグ マージンが二倍になってしまうバグ min-width, min-heihgtと同等の指定 Stepdownバグ hover擬似クラスをa要素以外にも対応 透過PNGを透過表示に対応 ボックスモデルのバグ <textarea name="code" class="css" cols="60" rows="5"> div#box{ width:100px; border:2px solid black; padding:10px; } </textarea>
[Think IT] 第2回：ガイドライン作成のポイント (1/3)
【即実践！HTML+CSS】 チームによるWeb制作の現場 第2回：ガイドライン作成のポイント 著者：イー・アクセス 佐藤 恵 公開日：2008/04/10（木） ガイドライン（ルール）はいつ、誰が決めるの？ 「第1回：ルールを作ろう！」ではルールの必要性について解説しました。Webサイトの持つ影響力を考えれば、その元であるルールの重要性も理解していただけたのではないかと思います。 今回はルールを実際に作ってみよう、改正しよう、と思っている方向けに、ルールの内容についてさらに詳しく紹介していきます。ルールは企業内で規定する場合、?「ガイドライン」と呼ばれるものにあたります。以降では本連載でもガイドラインと表記します。 さて、ガイドラインは「いつ？」「誰が」決定するのでしょうか。まずは「いつ？」について見ていきましょう。 一般的にガイドラインは年に数回ほど変更することがあります。その変更のタ
模様替え [究極の３列レイアウト]
[PR] 本ブログの商品紹介リンクには広告が含まれています 春なので、このブログのページデザインを少しリニューアル。以前は、左側にメニューとナビゲーションの列、右側はウィンドウいっぱいまで記事本体という２カラムのレイアウトでしたが、今度は右側にもカラムを設けて３カラムレイアウトです。以前同様、ブラウザのウィンドウのサイズを変えると、それに合わせて本文部分の幅が自在に変わるリキッドレイアウト。ゼロからページレイアウトを作る根性もデザインセンスもないので「ありもの」をパクってきました。 今回ベースにしたのは Matthew James Taylor という方の《The 'Holy Grail' 3 column Liquid Layout》というテンプレート。名前にある Holy Grail というのは、《ダ・ヴィンチ・コード》や《インディ・ジョーンズ》にも出てきたけど聖杯のこと。転じてみんな
CSS で簡単にメニューの上下中央揃えを実現する
CSS で簡単にメニューの上下中央揃えを実現する ネタ元：CSS で簡単に上下中央揃えを実現する IEでzoom:1とdisplay:inline;を同時に指定するとdisplay:inline-block;と同等の挙動を行うようです。 haslayoutがtrueの場合にdisplay:inlineを指定すれば、inline-blockのようになるようですが、zoom以外のプロパティはdisplay値の影響を受けるプロパティが多く、この方法はzoom以外では利用できないようです。 hasLayoutに関してはコリスさんが詳しく説明されています。 参考：IEでのCSSのバグを回避するhasLayout 以下のプロパティはdisplay:inlineと同時に指定してもhaslayhoutをtrueにできない。 × display:inline-block; × height:any valu
画像とかの横にあるテキストを上下中央に
←こういう感じで、画像の横にあるテキストを画像に対して上下中央にするってーのは、今まで出来ないと思ってたんす。 だけども、ヨモツネットさんの記事でヨモツネット[日記] ≫ CSS で簡単に上下中央揃えを実現するってが紹介されてたので、試して見ました！ display: table-cell;がポイントになってて、IEはハックで対応みたいな感じです。 デモページ 画像とかの横にあるテキストを上下中央にする。のデモページ ヨモツネットさんとまるっと同じサンプルだとアレなので、ちょっとだけ実用的な感じでつくってみましたよっと。 ちょっと、IE6で確認してないので、ダメだったらご連絡ください。 IE6対応しました。ハックの書き方がいけなかったようです。すみません。 div.centeringTest p { display: table-cell; vertical-align: middle;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS] How to: CSS Large Background - 大きめ背景の設置の仕方とTips
CSSハックしない、JavaScript使わないCSSの教科書みたいなテンプレ*ホームページを作る人のネタ帳
https://www.openvista.jp/archives/note/269/?269/
http://note.openvista.jp/268/
IDEA * IDEA