niwadesign

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

「 小ネタ 」 一覧

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

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

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

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

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

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

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 PDFなどのアイコンを自動で表示する裏技

2007/09/11   -小ネタ
 

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

CSS リストを使わなくても簡単にリスト風になるtext-indent

2007/07/13   -小ネタ
 

ちょっとした時などに、わざわざ新しくCSSを定義しなくてもリスト風のスタイルがtext-indentでできます。 サンプルはこちら