「 css 」 一覧

スマホ用のサイトを作っている時にフォームのテキストフィールドやセレクトをタップすると、画面がズームされることはありませんか？ そんな時はフォントサイズを16px以上にするとズームされるとこなく、入力す …

最近あまりIE用のCSSハックを使うことが無くなったけど、どうしてもハックする必要がでてきたのでメモ。 @media all and (-ms-high-contrast:none){ .red { …

基本的にスマホサイトを作る際はリキッドレイアウトにすることが多いと思う。 その際１つ１つの要素に対して％（パーセント）指定をするが、1pxのボーダーを要素の間にいれようと思うと、 これがなかなかうまく …

スマホ用のサイトを制作中にiPhoneのSafariで背景画像のposition: fixed;が効かなかったので、それの対処法の備忘録。 この「ああああああ」のボックスが上のメインビジュアルの上を移 …

html <div class="box_01"> <div class="box_02"> <ul> <li> …

今はjavascriptでやるのが主流？ とりあえず今回はCSSで対応しました。 div { min-height: 100px; height:auto !important; height: 10 …

CSSにて背景画像（画像置換）をしてリンクを付けている場合、Firefoxで閲覧するとはみ出てアウトラインが表示されてしまいます。 そこでこのアウトラインを表示させない方法のご紹介。 a { outl …

前々から画像置換を使ったボタンってどうなの！？って思っていました。 そこでjavascriptを使わずにロールオーバーする方法のご紹介。 サンプルはこちら

久しぶりのグローバルナビです。今回も前回同様のテクニックですが、グローバルメニュー下部にボーダーを追加してみました。今回も画像は使っておりません。 サンプルはこちら

シンプル見出しシリーズ第6弾。今回もボーダーを使ってのデザインです。 サンプルはこちら

シンプル見出しシリーズ第5弾。今回もボーダーを使ってのデザインです。 サンプルはこちら

今回はhタグとstrongタグを使った併せ技！ サンプルはこちら

背景画像を使った見出し（タイトル）です。左上にグラデーションのかかった画像を配置することによって、万が一タイトルが2行のなってしまっても見た目の違和感をなくすことができます。 サンプルはこちら

シンプル見出しシリーズ第3弾。今回もボーダーを使ってのデザインです。よく見かけるあれです。 サンプルはこちら

サイドメニューのリスト部分やヘッダーメニューのリスト部分に使えるスタイル。 サンプルはこちら

ちょっと立体的なテーブルデザインを作ってみました。 僕はあまりこのタイプのテーブルはあまり使わないけど、まぁありかもね。 サンプルはこちら

pdfやdocなどの決まった拡張子にCSSを使って自動でアイコンを表示させる方法がphpspot開発日誌に紹介されていました。 とっても便利なのでゼヒ使ってみましょう。 ※IE6では表示されないのでj …

シンプル見出しシリーズ第2弾。 今回もボーダーを使ってのデザインです。それなりに利用頻度は高いかも！？ サンプルはこちら

最近はあまり使わなくなりましたが、定義型リストの横並びをやってみました。 日付の入るようなものはテーブルでいいと思うがどうでしょう？ もしくは、横並びにする必要はないのかも… サンプルはこ …

ボーダーを使ってのシンプルな見出しを作ってみました。 画像を使わないボーダーの見出しはバリエーションが豊富にあるので今後更新していきます。 サンプルはこちら