• RSS
[CSS]文頭を字下げしたり、2行目以降の行頭1文字分インデントさせるCSS の書き方

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

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

[CSS]iOS で滑らかなスクロールを実現する「-webkit-overflow-scrolling」プロパティの使い方

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

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

[CSS]iOS のテキストフォームの角丸や影を消すなどデザインを変更する方法

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

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

[CSS]label要素の属性セレクタにCSS を適用する方法

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

[CSS]CSS でtable タグのcellspacing cellspadding を指定する方法

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

[CSS]iOS でフォームにフォーカスした時の自動ズーム問題を回避する方法

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

[CSS]フォームの input type=file のボタンデザインを変更する方法

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

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

[CSS]Windows のChrome でメイリオフォントが潰れて表示される場合の対処法

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

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

[CSS]HTML5 のplaceholder のテキストカラーを変更する方法

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

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

[CSS]ol のリストで①や②などの丸数字を表示させる方法

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

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

[CSS]無料で使えるWEBフォント「Google Web Fonts」の使い方

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

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

[CSS]リボン風帯のHTML と CSS をWEB上で生成できる「3D Ribbon Generator」

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

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

[CSS]半角文字列を改行するword-break と word-wrap の使い方と違い

div や table などの要素から半角文字が突き抜けて表示されないように、CSS で強制的に折り返してあげる方法のご紹介です。

今まで文字の折り返しと言えばword-break を使う機会が多かったのですが、CSS 3より、word-wrap プロパティが利用できるようになり、主要ブラウザにも対応するようになりました。

今日は、このword-breakword-wrap のそれぞれの使い方に加えて、2 つのプロパティにどのような違いがあるのかについて簡単に説明させていただきます。
続きを読む

[CSS]border-radius などのコードをWEB上で簡単に生成できる「CSS3 Generator」

CSS3の border-radius や box-shadow などのプロパティの値をブラウザ上で設定し、コードを生成できるジェネレータ「CSS3 Generator」を使ってみました。

エディタで書いていると、特に transform とかはイメージが掴み辛いので面倒でしたが、CSS3 Generator のサイト上で実際の動きや変形具合を見ながら値を設定できるので非常に便利です。
続きを読む