デザイン確認

Webデザイン

→ → → Entries ← ← ←
カテゴリー: CSS 　閲覧数:813　配信日:2013-11-25 11:03


テスト


press
・悪くはないが、最適とも思えない
・他との組み合わせも検討

見出しの両端に水平ラインを天地中央に配置
・span部分背景を白で消す方式なので、下が画像だと、白い部分が残ってしまう
・全く使えない

Pure CSS speech bubbles
・border黒ならイケるかも

水平線
・横幅一杯に敷くことが出来ない
・「親要素の横幅を越えたヘッダー／レスポンシブ対応」だと、本当にページ一杯拡がってしまう
・そうではなくて、やりたいのは「div8」に対して目一杯拡げたい
・うまくいかねー

CSS drop-shadows without images
・下が画像だと、何やってるか分からないレベル
・不向き

CSS3 Wrapping Drop Shadows
・画像の上だと、ドロップシャドウが、何やってるか分からないレベル
・不向き

11a.Slick effects with CSS3 box-shadow
・同上

Css3 box shadow
・合わない
・画像に負けて、目立たない

気が付いたこと


ドロップシャドウ系
・画像の上に表示する「テキスト見出し」CSSとしては、全く使えない
・彼らが優位性を保てるのは、シンプルな背景の場合のみ

画像が固定でない(随時変わる可能性がある)場合
・背景色を敷く以外の方法はない
※「明るい色」「暗い色」何れが来るか検討がつかないため
・jsで背景色に応じてテキスト色を変更してみたりもしたが、かなりのフォントサイズでないと見にくいことに変わりはない

「:before」「:after」はそれぞれ一度しか使用出来ない
・「:before」「:after」で「吹き出し」を作成した後、さらに、「:before」「:after」で先頭に■□を配置しようとするも、無理なことが判明

週間人気ページランキング ／ 3-20 → 3-26
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 7
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 7
2 Design 0 6
2 RGBの種類 ／ ビットカラー | RGB(色) 6
3 ログイン 5
4 「position:absolute;」指定する際は、必ず(親要素を含む)祖先要素の何れかで「position」を明示的に指定 | position(CSS) 4
4 HSV ／ HSB 4
4 「bgcolor」「background-color」「background」の違い | CSS 4
5 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 3
5 Chromeバージョンアップでフォント指定が効かなくなる | Google Chrome(ブラウザ) 3
5 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 3
5 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 3
5 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 3
5 「属性」「プロパティ」「アトリビュート」の違い | CSS 3
5 画像縦横比の問題 | 画像 3
5 Firefox(ブラウザ) カテゴリー 3
5 「.epsファイル」はあらゆるグラフィックソフトで編集できるとは限らない | Fireworks 8(Fireworks) 3
5 bootstrap3で意図せず横スクロールバーが表示される場合は、containerクラスの入れ子を疑う | 3系(Bootstrap) 3
5 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 3
5 「直後が A 要素 でない B 要素」を指定するCSSセレクタは、「A:not(:has(+ B)) {}」 | CSS 3
2026/3/27 5:05 更新
指定期間人気ページランキング ／ 2020-5-30 → 2026-3-26
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 8922
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 4616
3 Design 0 4051
4 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 3794
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2783
6 RGBの種類 ／ ビットカラー | RGB(色) 2764
7 「bgcolor」「background-color」「background」の違い | CSS 2096
8 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 2074
9 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 1980
10 16進数カラーコード ／ 2進数 1882
11 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 1881
12 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 1713
13 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 1701
14 「属性」「プロパティ」「アトリビュート」の違い | CSS 1637
15 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能(ブラウザ) 1559
16 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 1533
17 「東京都」のカラーコード取得は難しい | カラーコード(色) 1428
18 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 1392
19 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 1245
20 「西武鉄道株式会社」のブランドカラーは、3色(#3366CC、#66CCFF、#33CC66) | 色 1225
2026/3/27 5:05 更新