スクロールバーを画像で装飾するfleXcrollが美しい件
スクロールバーを画像で装飾するfleXcrollが美しい件
スクロールバーを画像で装飾するfleXcrollが美しい件
テキストと画像の縦揃えCSS | Magicalog
画像をそのまま<img />タグで入れて、それに続けてテキストを入れた場合、通常は以下の図のように表示されます。 これはこれでありだと思いますが、例えばこれを縦方向で中央揃えしたいとします。 その場合は、CSSでvertical-alignプロパティを使用します。 img { vertical-align: middle; } これで縦方向中央寄せです。 これはこれで完成です。しかし、vertical-alignプロパティって使える値が多いんですよ。8つもある。多いよ。 この、vertical-alignプロパティって使える値が多くて訳わからなくなるので備忘録的に一覧図を置いておくことにします。 ちなみに、vertical-alignプロパティは、インライン要素とテーブルセルにしか使えませんのでご注意あれ。 こんな一覧を作っておいてなんですが、この指定（特にmiddleの中央揃え）なんて使
puzzel.jp
ユーザー目線でのデザインが得意で、プロダクトの成長をより加速させるためのデザインも得意です。 toC ユーザー向けのプロダクトのデザインを注力していましたが直近は、toB ユーザー向けのプロダクトのデザインに注力しています。 他、ロゴや Web サイトデザイン/マークアップ、写真撮影、映像撮影・編集、デザインの講師など。 自己紹介 (note) About - puzzel.jp 2010年10月からスタートした、puzzel.jp。 開設時から1つまえのサイトが残っています。 デザイントレンドによって変わっていたり、ガラケー対応のサイトだったりと、時代を感じることができます。 History: 2010, 2011, 2012, 2013, 2014, 2016, 2020 Chompy, Inc. 2021 - 2023 フードデリバリーサービス Chompy の UI / UX デザ
メモログ
💡 Personal notes about somthing I'm interested in text-align−スタイルシートリファレンス 「text-align:justify」は、対応していないブラウザがあるから使わない・・と思っていたのでが、今ではどのブラウザでもだいたい対応しているということに今さら気がつきました。いちど見捨てたプロパティにはなかなか目を向けないものだなと思った次第でございます。 追加したCSSはこんな感じ。特に何のひねりもないです。 .asset-content{text-align:justify; text-justify:distribute;} IE 6で確認した感じでは、日本語の両端揃えはまだtext-justifyの方が有効に機能するようなので、text-justify:distribute;を入れています。英文であればtext-align
WEBデザイナー覚え書きノート xml宣言がある状態で、IE6のmargin:0px auto;が効かない件について
IE6自体のバグで、xml宣言があるとブラウザ側が後方互換モードで表示してしまい、margin:auto;が効かなくなる問題について。 WEB標準準拠でのコーディングを行う際に、必ずひっかかるところ。 あくまでもWEB標準で組みたいためにぶちあたる問題のため、xml宣言を削除するなどといったナンセンスな対策はあえて、いれてません。 対策としては以下を。 １．IE6にのみ効くCSS（ハック）を記述し、ボディ自体にtext-align:center;をかける。bodyの中コンテンツ全てにもハックを使い、センタリングされているものを任意の方向へleft rightで調整。 例） * html body { text-align:center; } ２．PHPを使い、IE6の時にだけxml宣言を吐き出さないようにする。 ※phpが動かせるサーバー要、拡張子をhtml→phpにする。 ※文字コードは
CSS でデザインする TABLE タグの border-collapse の動きの制御方法がわかった | ゆめとちぼーとげんじつと
CSS で TABLE のデザインをする際、外枠を強い線、内枠を弱い線にする、などを考えますが、できるだけ簡単にこれを実現できないか情報を探していたところ、border-collapse をうまく使う方法がありましたので、メモしておきます。 * Border conflict resolution に載っていました。やはり W3C を見れば確実ですね(実装はともかく)。 ここを見ると、どうやら被った場合で色が違う場合の優先順位は、th, td>row>row group>column>column group>table の様です(4番目のルールから)。 昨日の日記の様な場合は、ちゃんとこの通り動いていたので、table の枠線は td, th の枠線に上書きされていたのでした。 また、枠線の太さが太い方が優先されると言うことと、線種にも double > solid > dashed >
TRANS - * { magin: 0;}だけでは物足りない！zoom: 1;を使おうよ！
IE6からIE7が今後本格的にマーケットシェアを取って行くことを考えると、IE7の仕様やバグを考えた上でのマークアップが欠かせないとは思います。でも、僕らはまだIE7がどんなものかが分からない。そのため、とりあえず* { zoom: 1;}を指定しておくことが安全策なのかもしれません。 IE7のZoom機能で、見事にこける。 先日、うちの本体のサイトを更新し終わった際に、スタッフから「あれ、しゃらくのサイトずれてるよ」と指摘されました。更新箇所が多く、CSSも多少いじくったので、どこか消してしまったのかもしれません。そこで、自分のブラウザで確認するも、どうも問題が再現できない。そのスタッフのブラウザを見ると、こんな感じになっていました。 僕のFirefoxで見てみても問題ないし、そのスタッフが使っているIE7でも問題なし。「うーん」と悩んでみるものの、意外と答えは簡単なところにありました。
MdN Design｜総合情報サイト
floatプロパティを指定した要素に、後続の要素が回り込まないようclearプロパティを指定することはよくある。clearプロパティとpadding-topプロパティを指定すると、Internet Explorer 6、7だけ余白が不自然に空いてしまう。このトラブルはIE独自拡張のzoomプロパティの指定をするか、widthプロパティの指定で解決できる。paddingでも発生するので覚えておきたい。 Internet Explorer 6、7で見ると、指定した値の倍近く余白が空いてしまう 「zoom:1;」と指定することで指定したとおりの余白になる [INDEX] >>> [TROUBLE 12]padding-topの値がIE 6とIE 7だけ倍になってしまう >>> [TROUBLE 13]取得・移管したドメインがいつまでも有効にならない >>> [TROUBLE 14]URLに日本語
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.
CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め
CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの？というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない
clearプロパティ,clear:left;.clear:right;,clear:both;,clear:none;,floatによる回り込み対策 | M×W×I×L
clearプロパティ clearプロパティはfloatプロパティで指定された要素の回り込みを解除する。 どんな働きをするのかとりあえず検証してみた。 1. clearプロパティ概要 値 left right both none 初期値 none 適応対象 ブロック要素 継承 しない メディア visual 2. clearプロパティの値 left 左側の回り込み(float:left;)を解除 right 右側の回り込み(float:right;)を解除 both 左右両側(float:left; | float:right;)を回りこみを解除 none 回り込みを解除しない 3. clearのサンプル 基盤となるソース(floatもclearも指定しない) 回り込みしてもよいテキスト 回り込みして欲しくないテキスト <img src="common/sample_img_01.gif"
CSSの「height:100%」について - webデザイナーのナナメガキ
CSSのみでブラウザの表示枠ぴったりにレイアウトしたい時、どうしたらよいか。 テーブルレイアウトの場合は大枠を<table width=”100%” height=”100%”>にすればOKだった。CSSの場合ちょっと癖があり、横幅は100%でぴったりいくのだが、中身のボックス要素を「height:100%」で指定しても、その要素そのものの高さにしかならない。サンプル（横幅のみ表示枠ぴったり） なぜかというと、この高さの指定は親要素の高さに依存するものだからだ。（参考：height: n%;の正しい仕様 – Web標準普及プロジェクト） なので親要素である”<html></html>”と”<body></body>”の高さを100%に指定すると、ブラウザの表示枠ぴったりにはめることができる。サンプル（縦横表示枠ぴったり） html,body{ height: 100%; } これを応用して
リストマークの画像のずれを修正する
サイドバーメニュー等の先頭のマーク（マーカー）表示に画像を使われている方は少なくないと思いますが、img タグをテンプレートに直接記述するのは、ウェブスタンダードでいうところの「構造とデザインの分離」という面よりあまりお勧めできません。またリストの量が増えると img タグの指定も増えることになり（テンプレートでは数ヶ所の指定で済みますが）、ページサイズにも影響します。 ということで、マーク表示にはCSS・リスト形式（li）の画像指定で表示すること好ましいですし、リスト先頭のマークに画像を使われている方も大勢いらっしゃると思いますが、list-style-image プロパティで li { list-style-image: url(hogehoge.gif); } と画像を指定した場合、下のようにマークが微妙にずれて表示されてしまうのが悩ましいところです（サンプル１）。 サンプル１ これ
IE6でfloatしたボックスのmarginの値が2倍になるバグの対処方法 - Webデザイナーの為の情報Blog「CSSMAKER」
CSSレイアウト初心者がまずぶつかる壁がおそらくこのバグだと思います。 まずはサンプルソースを見てみて下さい。 サンプルをダウンロード。 HTML <div id="container"> <div id="leftContents"></div> <div id="rightContents"></div> </div> CSS #container { width: 500px; height: auto; } #leftContents { float: left; width: 180px; height: 200px; background: #80A852; margin-right: 10px; margin-left: 10px; } #rightContents { float: right; width: 290px; height: 200px; backgroun
widthを決めずにfloatさせたい
こんにちは、溝上です。 今回はちょっと便利なfloatの使い方をご紹介したいと思います。 以前紹介したfloatを使う際の注意点に反してしまいますが 幅が決められない（決めたくない）要素をfloatさせたいときってありますよね。 例えばフッターにテキストリンクを多数並べたい場合などが考えられます。 | 会社概要 ｜ お問い合わせ ｜ 個人情報保護方針 ｜ 採用情報 ｜ サイトマップ | ↑こんなリンクです。 「それなら以前紹介したこの方法でいいんじゃない？」 と先輩に突っ込まれましたので、今回は違う方法で実現してみたいと思います。 まずは前回の先輩のサンプルを応用（拝借）してみます。 （htmlコーディング） <div class="list"> <ul> <li>テストです</li><li>テストですよ</li><li>テストですね</li><li>テストなんだな</li><li>テスト
【CSS】孫メニューまでオッケーなCSSのプルダウンメニュー | バシャログ。
以前にご紹介した「CSSで実現するプルダウンメニュー」のコメントで、孫メニューまでプルダウンする方法のリクエストをいただきましたので、ご紹介します。 確認ブラウザは IE7、IE8、Firefox3、Chrome2、Opera9、Safari3 です。 CSS のみでは IE6 対応が不可能ですが、前回同様 IE の独自機能（DHTML）を併用することで IE6 でも孫メニューまでのプルダウンメニューを実現しています。 まずは、以下のサンプルをご覧ください。 シーブレイン コーポレート WEBサイト制作 バシャログ。 バシャログ.biz マニュアル制作 Document_blog ペンペケペン ローカライズ 今日のIT英語 検索エンジン Yahoo! Japan Google 画像検索 動画検索 マップ ニュース グループ Goo excite Biglobe 週刊少年漫画 少年ジャンプ
ウェブページ高速化に効果的なCSSセレクタ
CSSセレクタの使い方によってウェブページの表示速度は変わってきます。 劇的に速くなるということはないと思いますが、「ページの読み込みが0.5秒遅くなると、検索数が20%減少する」とか「ページの読み込みが0.1秒遅くなると、売り上げが1%減少する」なんて聞くと試してみたくなるのではないでしょうか。 ウェブページの高速化とCSSセレクタの関係については「CSSセレクタの高速化の話し - Webtech Walker」で紹介されていましたが、先日GoogleのPage Speedのページでなかで「Use efficient CSS selectors（効率のよいCSSセレクタを使う）」と紹介されていて内容も若干違うので、こちらを簡単に例などを交えて解説してみます。 ブラウザはセレクタを右から左へ判別していく まず知っておきたいのは「ブラウザはセレクタを右から左へマッチするか探していく」というこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像表示を早くするCSS Spriteについて
height100%のボックス〜CSSテクニック〜
https://www.openvista.jp/archives/note/2008/optimized-layout/?2008/optimized-layout/