jQuery とCSS で画像をトリミングしてセンタリング表示する方法のご紹介です。
続きを読む

<table>の<tr>タグにCSS の border を適用させる方法のご紹介です。
続きを読む

CSS のtext-indent プロパティを使って文頭を常に1文字下げる方法と、2行目以降の行頭を1文字分インデントする方法をまとめました。

list-style-position で同じような見せ方が可能なのですが、リストではなくp タグで囲まれた文章をインデントさせる際に便利な表現ではないかと思います。
続きを読む

overflow で要素内をスクロールさせると、iPhone やiPad などのiOS で見た場合にスクロールがぎこちなくなります。

そんな時は、iOS 5.0 より実装されたSafari CSS の -webkit-overflow-scrolling プロパティを使うことで、iOS でもスムーズなスクロール（慣性スクロール）を実現できるようになります。
続きを読む

iOS でテキストフォームを見ると、デフォルトで角丸だったりシャドウ（影）が掛かっていたりしますので、サイトに合わせてフォームのデザインを変更した場合が多々有ります。

今回はiPhone やiPad 向けに、input[type=text] のデザインをCSS で補正する方法をまとめました。
続きを読む

<label for=”mail”>のような属性セレクタをCSS で制御する方法のご紹介です。
続きを読む

table のセルの間隔とセル内の余白を、cellpadding、cellspacingは使わずにCSS で指定する方法のご紹介です。
続きを読む

iOS でテキストフォームをタップしてフォーカスした時、ページ（の文字サイズ）が拡大表示される問題を回避する方法のご紹介です。
続きを読む

「ファイルを参照して下さい」などのデフォルトのデザインではなく、オリジナルで用意したボタン画像をクリックして、ブラウザのアップローダーを起動させる方法です。

テキストフォームやラジオボタンなどは、CSS 3のプロパティを利用すればかなり自由にデザインを変更できますが、ファイルアップロードボタンのデザイン変更はかなり難しいので、非常に使えるカスタマイズです。
続きを読む

メイリオフォント を指定してしたテキストを、Windows のGoogle Chrome から見たら「文字が潰れて表示される…」なんて場合に、CSS のtext-shadow を使った回避策のご紹介です。

もっとスマートな方法が他にもあるのかもしれませんが、今回はテキストの周囲にうっすら同色の影を付け、「肉付け」させることで潰れて見るのを防ぐ方法になります。
続きを読む

HTML5 で強化されたForm 周りの機能の1つで、input type=”text” などのフォームに初期値としてテキストを入れておくことができる placeholder 属性というものがあります。

今回は、このplaceholder 属性で指定した入力フィールドのテキストカラーを、CSS で変更する方法をご紹介します。
続きを読む

稀に ol によるリストで丸数字を使う場合があるので備忘録としてまとめました。

ol li の list-style は none で消しておいて、替わりに ① や ② などの「丸数字」を表示させる方法です。
続きを読む

Arial Black、Times、Verdana…など、WEBサイト制作時に指定するフォントはごく限られたモノになるかと思いますが、Google 提供のサービスの1つである Google Web Fonts を利用すると表現の幅が広がります。

Google Web Fonts は多数のフォントの中から使いたいフォントの太さ、スタイルなどを指定するだけで<link> タグや CSSのコードが生成されますので、それをサイトに貼付けるだけで使えます。
続きを読む

WEB上で簡単に「リボン風帯」のデザインを作って、HTML とCSS のコードを生成できるサービス 3D Ribbon Generator のご紹介です。

生成されるコードの量はかなり多いですが、リボン帯をCSS だけで一から作ろうと思うと結構大変なので、帯の色やサイズをかなり細かく指定できる3D Ribbon Generator は便利です。
続きを読む