niwadesign

ホームページ制作のネタ発信

「 CSS講座 」 一覧

iPhoneのフォームでフォーカスがズームされるのを防ぐ方法

2016/02/25   -CSS講座, iPhone
 

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

パーセント(%)指定したボックスにボーダーを指定する方法

2015/08/31   -CSS講座, 小ネタ

最近はスマホサイトの制作も増え、ボックスの幅をパーセント(%)指定することが増えてきました。 その際にボックスにボーダーを追加するとボーダー分幅が広くなりカラム落ちすることがあります。 そんな時は、ボ …

no image

IE10以降にだけにCSSを適応するハック

2014/12/25   -CSS講座
 ,

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

幅いっぱいのスマホサイトのメニューで1pxのボーダーを追加する方法

2014/12/01   -CSS講座, 小ネタ
 

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

[CSS]iPhoneのSafariで背景画像のposition: fixed;が効かない時の対処法

2014/11/18   -CSS講座
 ,

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

iPhone Safariのsubmitボタンのデザインを変更する方法

2014/05/25   -CSS講座, Safari, 小ネタ
 

通常CSSでbackgroundやborder-radiusをかけることによってスタイルを定義することができますが、 iPhoneSafariの場合は最初にリセットする必要があります。 #hdSear …

CSS 角丸グラデーションボックス

2008/04/17   -小ネタ
 

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

CSS javascriptを使わずmin-heightをIEで使えるようにするCSS

2008/04/16   -小ネタ
 ,

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

CSS Firefoxのリンクの線を消す方法

2008/04/14   -小ネタ
 ,

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

CSS 背景画像(画像置換)を使わないロールオーバー

2008/04/11   -小ネタ
 

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

CSS 横並びグローバルメニュー02

2007/10/01   -グローバルメニュー
 

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

CSS シンプルなボーダーを使った見出し(タイトル) その6

2007/09/20   -見出し
 

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

CSS シンプルなボーダーを使った見出し(タイトル) その5

2007/09/19   -見出し
 

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

CSS シンプルなボーダーを使った見出し(タイトル) その4

2007/09/18   -見出し
 

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

CSS 背景画像を使った見出し(タイトル)Mozilla Japan風

2007/09/14   -見出し
 

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

CSS シンプルなボーダーを使った見出し(タイトル) その3

2007/09/13   -見出し
 

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

CSS リスト(li)に画像を配置するスタイル

2007/09/13   -リスト
 

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

CSS シンプルなテーブルデザイン その2

2007/09/12   -テーブル
 

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

CSS PDFなどのアイコンを自動で表示する裏技

2007/09/11   -小ネタ
 

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

CSS シンプルなボーダーを使った見出し(タイトル) その2

2007/09/10   -見出し
 

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