Chrome でテキストエリアの可変を縦のみに制御する CSS です。可変するのは構わないけど、横に伸びることでコンテンツがむちゃくちゃになってしまうようなサイトの場合は縦のみに制限しておくと、それだけでサイトの使い勝手

Google 検索のボタンが綺麗だったので真似して作ってみましたが使い道が無かったのでブログに残しておきます。CSS は以下のような感じです。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

今回は CSS のみで以下の画像のような影付きの線を作ります。 以下のコードで実装できます。変更点は border の色の部分のみです。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 he

text-transform プロパティを使うことで小文字を大文字にすることができます。値は以下の表を参考にしてください。 none (初期値) 変換しない capitalize 単語の先頭文字を大文字に変換 upper

以下のサイトで紹介されている方法で IE シリーズで CSS3 を使えるようにできます。使い方の要点を抑えて紹介します。 CSS3 support in Internet Explorer 6, 7, and 8 この方

Web Fonts を使えばパソコンにインストールされていないフォントを表示させることができます。見出しなどに特殊なフォントが使ってある際に、わざわざ画像で用意したりする手間を省くことができます。私のサイトでもロゴに使用

画像を左側に、テキストを右側に持ってくるレイアウトがある場合、画像に対して普通に float で回りこみを行うと以下のような表示になります。 このようなレイアウトの際に、画像の下にテキストを回り込ませない表示にする場合は

Facebook のアンケートで HTML5 + CSS3 やスマートフォンに細かく対応した normalize.css を見つけました。ひと通り読んでみたところ、とても細かく設定してあって良かったです。 Normali

ちょっと綺麗なボタンを実装したいなと思っているのに中々簡単に実装できないことがあると思います。ジェネレーターを使ってもイマイチ作れなかったりする人もいると思います。 以下のコードを貼りつければ一瞬でこのような Twitt

Google の SERP にパンくずリストを表示させられるようにするための microdata 対応のパンくずリストに対応した、HTML + CSS のみで実装できるオシャレなパンくずリストを作ったので良かったら使って