1つの要素にCSSだけで二重ボーダーをつける3つの方法 | Cappee Design
@cappeeです。 ひとつのdivに対して、CSSだけで簡単に二重のボーダーをつけることができます。 box-shadow CSS3の box-shadow を使えば1行で二重のボーダーをつけることができます。最初に内側のボーダー、次に外側のボーダーを指定します。外側のボーダーは内側を合わせた数値を記述してください。 対応ブラウザですが、～IE8は表示されません。ただ、もうIE6と7の需要は少ないですが、IE8をどこまで対応させるかの判断になると思います。あと、JavaScriptやPIEなどを使うか。 .doubleBorder { box-shadow: 0 0 0 3px #CCC, 0 0 0 4px #999; } CSS3の対応状況はこちらの「CSS3プロパティ＆ブラウザ対応一覧」を参考にしてください。 borderとoutline border と outline で二重
[意外と知らないCSS]スマホ制作に便利！display:table-cellを使った横並びのレイアウト | Cappee Design
スマホコーディングただいまガシガシ中の@cappeeです。 今回は「意外と知らない」というか、「便利だけどなかなか使えないCSS」かもしれませんね。 今回は、display:table-cell をご紹介します。 なかなか使えないと言った理由はIE8以降からの対応になるからです。 ただし、display:table-cell はスマートフォンサイトの制作にかなり便利なので覚えておくことは必須ですね。 display:table-cell で要素が簡単に横並び display:table-cell とは、要素をテーブルのように表現することができるプロパティです。 親の要素に display:table を指定することでテーブルと同じような構造で指定することができます。 display:table-cell を指定した要素はテーブルのように高さが同じになります。 また、floatを使っていな
CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ | Cappee Design
@cappeeです。 特にシステム案件のコーディングだと、縦横比が異なる画像を扱う場合も多いと思います。 例えばユーザー画像などを正方形で表示したい場合、アップされる元画像はユーザに委ねられるので画像のサイズや縦横比は様々になると思います。アップしたタイミングで画像を加工できるならいいですが、そうでない場合、見た目を整えるためにCSSで同じサイズにトリミングしてしまいましょう。 トリミングにもCSSだけで3つのやり方があるので、状況によって使い分けたいですね。 overflow: hidden を使う 一番オーソドックスなやり方がoverflow: hidden を使ってトリミングする方法です。 trimming というクラス名が入ったトリミングする枠用のタグはブロック要素である必要がありますので、もしインライン要素に指定する場合は、CSSに display: block; も追加してく
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
