float の下に食い込まない見出し | ヨモツネット
float された要素と見出しなどを並べると、次図のように通常は見出しなどの領域は float された要素の下に食い込んだように表示されます。 食い込んだように表示される demo しかし、このように食い込んでしまう表示は意図しないことがほとんどです。次図のように float された要素は避けるように表示したい場合も多いでしょう。 これを実現するためには、見出しなどの要素が次の 3 つを満たす状態にします。 display : block; overflow : hidden; hasLayout : true; (IE 用) e.g. h3{ display:block; overflow:hidden; zoom:1; } 食い込む見出しの対策をした demo ただし、テキストが自動で折り返さない場合、崩れてしまいます。(IE とその他の Web ブラウザーで表示が違います。また、IE
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Internet Explorer 6 with position : fixed
Internet Explorer と position : fixed Internet Explorer (以下IE) 6 では、Cascading Style Sheet (以下CSS)の position : fixed が無視されます。そのことについての情報を扱うページです。 IEで、position : fixed が有効にならない問題 当サイトでも position:fixed を使用しております。Mozilla (Netscape7), Opera7 ではきちんと動作しますが、IE6では無視されてしまうようです。絶対配置すらされませんので表示はかなり崩れます。絶対配置されない問題を解決するには、スタイルを以下のように記述します。 { position : fixed!important; /* importantで、Mozilla, Opera に対して優先順位を上げて固定
CSS で垂直センター配置
table で、テキストをセル内の縦のセンターに配置する時は vertical-align: middle; で簡単にできるのですが、例えば、ナビゲーションで 3em の高さのメニューがあったとして、CSS で文字をボックス内の縦のセンターに配置しようして vertical-align: middle; を指定しても実現出来ません。vertical-align の適用対象は、行内レベル要素及び'table-cell'要素だからです。 #menu li { display: block; width: 8em; height: 3em; float:left; list-style-type: none; text-align: center; background-color: #eeeeee; border: 1px solid #ccc; vertical-align: middle;
higash.net
higash.net 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
center-circle.net » マークアップデザインエンジニア的、コーディング設計手順
written by CLSTK at 12:26 am on 7 月 27, 2008 in Job まいど！CLSTKです。 以前ご紹介した「効率よくコーディングするための５つの手順」をもう少し、掘り下げてみたいと思います。 これは、僕自身のやり方なので、みなさんの手法に合うかわかりませんが、盗めるところは盗んで仕事に活用して頂ければと思います。 概要 効率よく仕事をこなすには、何事も準備が必要です。 段取り八分とよく言いますが、ほんとにそう思います。 特にコーディングの場合は、なるべく考える時間を増やした方が圧倒的に作業効率があがります。 設計をすることによって、頭の中でほぼマークアップが終わっている状態になります。 なにわともあれ、実践でお試しくださいｗ デザイン(案)をカラーでプリントアウト コーディング設計は、まずはデザイン(案)をプリントアウトすることか
アイコンやサムネイルの横にタイトルと概要文があるような時。
とりあえず、暑いっす。えぇ。 ここ最近の暑さにやられ気味なhirasawaです。そんなやられ気味な状況なので、HappyLifeも夏っぽくしてみました。 あと、弊社のベトナム事業部の女性マネージャーがブログを開始しました。 ベトナムに興味がある方や女性マネージャーに興味がある方、更新率も高いので、ぜひに。 さて、そろそろ本題に。 こんな感じで、アイコンとかサムネイルがあってその横にタイトルと概要文があるような、そんなデザインってよく見かけるかと。 今回は、これの組み方の一つとしてサンプルを用意してみました。 サンプルの確認は以下より。 サンプルを見る こういうデザインの場合、どうやって組もうか結構悩むんです。 何に悩むって、この画像をどうやってマークアップするか。 今まで多かったパターンは、基本的には定義リストを選んで、ddに入れたりしてましたが、コレだとリンクを画像とdtに張る必要があっ
HTML をシンプルに保ちつつ、ブロック要素の段組みを実現する方法 パート2 | バシャログ。
「HTML をシンプルに保ったままブロック要素を段組みする方法」のパート 2 です。 前回の記事では、float と position の合わせ技により、全体の横幅ピッタリに要素を段組みしました。 今回は、position を使わない方法をご紹介します。 ボックスと余白の幅の値は前回と同じく以下です。 HTML ソースも前回と同じくこちら。無駄な ID や class のないシンプルなソースになっています。 <div id="photo"> <ul> <li><img src="hoge1.jpg" alt="サンプル1" width="160" height="120" /></li> <li><img src="hoge2.jpg" alt="サンプル2" width="160" height="120" /></li> <li><img src="hoge3.jpg" alt="サン
center-circle.net » 効率よくコーディングするための５つの手順。
written by CLSTK at 9:49 am on 7 月 3, 2008 in Job 久々に、まじめな内容ですw とは言っても、自分用のメモも兼ねてますけど。 当たり前の事を当たり前にやるのが、意外と難しい。 自分へ言い聞かせてる部分もある訳ですw ともあれ、何かのお役に立てればと思います。 どうぞ。 アーキテクチャダイアグラムを作成 アーキテクチャダイアグラムとは、設計書ですね。 これがないと、プロジェクトは進みません。 だいたい、下記の内容を記述。 スケジュール レギュレーションの策定 サイトマップ、ディレクトリマップの作成 命名規則 その他必要事項 まずは紙上で考える デザインがあがってくる前には、ワイヤーフレームを使って大枠のレイアウトを設計していきます。 デザインがあがってくれば、デザインをプリントアウトして、いろいろと情報をピックアップ
Webfactory : Weblog : cssコメント部分のメモ
CSSのコメント部分は後から誰が見ても理解できるようにインデントを付けたり、わかりやすいコメントを付けたりすると思いますが今日書いてて「お、これ便利かも」と思った書き方を、メモ代わりに書き留めておきます。 /* ------------------------------------------------- トピックス #layout > #navi > div.topics --------------------------------------------------*/ 以上、ただ単に構造を書くだけなんだけど、これ見れば後から見てもこのクラスがどこで使われている一目瞭然だと思う。 さらにこんな感じで使用しているページなんかも追加するとわかりやすいかな /* ------------------------------------------------- トピックス #layo
こんな成果物は嫌だ。 コーディングディレクション編 - Vox
コーディングに入るときに、こんな成果物は嫌だ！ ということでコーディングディレクションにおける成果物を洗い出そうという試み。 成果物といっても修正指示まで入れると、いただくドキュメントすべてという感じですね。 注意点１．念のため、一応書いておきますが、特定の誰か・何かを非難するものでは全くありません。 心当たりがあったからといって、うちが恨んでいるという話では全くないのですが、 勘違いされる方がいらっしゃったら先に謝ります。すみません。 注意点２．これ、制作会社の方から発注があることを前提に書いています。Web制作でエンドユーザーからだったら、こんなに虫の良いこといいません。これをそろえるのがディレクター（うちがやることもありますが）の仕事だ、というつもりで書いています。 注意点３．嫌みっぽく見えたらごめんなさい。文章のノリの都合上の問題です。 注意点４．ディレクターって大変ですよね。まじ
[使える 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)
新規でサイトを作るのに使えそうなの一式。Ver 2｜CSS HappyLife
新しいdigiper staff blogが始まりました。 PICTOGRAM CHANNEL - ピクトグラム チャンネル タイトルまんま、ピクトグラムを扱ってるサイト。社員ブログに型は無いので書きたいのを自由に書けるんです。 何気に、同じ職種なので負けないように頑張ります。っていう宣戦布告。 さて、以前公開した新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）を自分も使ったりしてたのですが、なんだかいけてない部分が目立ってきたので、修正してみました。 Ver2って言うのは、区別したいだけでたぶん中身はそこまで変わってません。 むしろ人によっては前のが相性が良いかもしれませんので、お好きなのを使ってもらえると幸いです。 えっと、ダウンロードは以下よりお願いします。 新規でサイトを作るのに使えそうな一式。Ver 2をダウンロード（zip：18kb） ちなみにダウ
CSS Decorative Gallery - Web Designer Wall
Did you like my previous CSS tutorial on how to create gradient text effects? I’m using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. It is very easy and flexible — see my demos with over 20 styles, from a simple
すぐに使えそうなネガティブマージン | d-spica
すぐに使えそうなネガティブマージン 2008-05-15 0 0 XHTML/CSS CSS, margin margin にはマイナスの値を入れることができます。マイナスの値を持つ margin を「ネガティブマージン」と言ったりします。 あまりむずかしくなく，すぐに使えそうなネガティブマージンを紹介してみましょう。 見出しにネガティブマージン 本文の左に見出しよりも大きな余白をとりたいというとき。 <div class="section"> <h3>見出し</h3> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。...</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。...</p> </div> div.section { padding-left: 15px; } div.section h3
外部リンクだけにアイコンをつけることのできる CSS のセレクタ | ヨモツネット
概要 リンクで、外部の Web ページが参照先のときにアイコンなどをつけて区別するケースがよくあります。 そのときに、参照先が外部の Web ページの a 要素だけにスタイルを適用するための CSS コードです。 動作確認用の demo この方法は外部リンクの a 要素だけに class 属性をつけるというような処理が必要ないので、CMS やブログのエントリーなどにいいかもしれません。 似た方法で JS でまとめて class 属性を付与する方法もありますが、CSS だけで完結したほうがスマートかなと思ったのでサンプルを作りました。 demo で使用した CSS コード a[href^="http"]{ background:url(img/ico_conductor.png) no-repeat right center; padding-right:15px; } a[href^="h
「浅漬け」と「ぬかみそ」、そして default.css : 亜細亜ノ蛾 - Weblog
新顔・浅漬け CSS 「浅漬け CSS」という、「通」な人がニヤリと笑う CSS が提案されています。 浅漬けCSS | Blog hamashun.com 「浅漬け CSS」って何？ 浅漬けCSSの定義 必要な要素へのmarginとpaddingのリセット程度を記述した、シンプルなCSSファイルやソースコードを浅漬けCSSと呼びます。 サイトによって記述する内容が変わる事もあります。 浅漬けCSS | Blog hamashun.com ということで、ブラウザによって表示が まちまちになる各要素を、あっさり目にスタイルをリセットする CSS ですね。 一昔前だと、こういったコードが多く見られました。 * { margin: 0; padding: 0; } というか、今も使われていますが、たしかデメリットが あったような──。フォームとかボタンに悪影響がある、だったかな？ 情報ソースが見
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cssglobe.com
CSS Lecture: 有名サイトが使っているid名class名集めてきました！
CSSでクールなボタンを作るまとめ:phpspot開発日誌