select要素の未選択時にだけ灰色に装飾する方法（CSSだけでplaceholder的な項目を加える書き方）
JavaScript不要のCSSだけで、select要素の未選択時にプレースホルダー代わりの灰色装飾を加える方法を解説。セレクトボックス（プルダウンメニュー）を作るselect要素にはplaceholder属性が加えられないので、HTMLの機能ではプレースホルダー（＝未選択時に薄く表示される文字列）を用意できないのですよね。でもCSSを工夫すれば、セレクトメニューの先頭を事実上の「未選択用項目」と扱...
View Articleテキスト入力欄の高さを画面の高さ100％に合わせるCSSには、単位vhを使うと楽
Web上のテキスト入力欄で長文を入力させる場合など、テキストエリアの縦横サイズを全画面にまで拡張して表示させたい場合があります。HTMLのtextarea要素に対してCSSで縦横サイズを指定すれば良いわけですが、横幅(width)には100%を指定すれば良いので簡単なものの、高さ(height)も100%にするわけにはいきません。しかし、画面(ブラウザの描画領域)の高さを示せるCSSの単位「vh」(...
View Articleボタン上のマウスポインタをリンクと同様に指さす手の形に変化させるCSS
リンクのような「押せる場所」では、マウスポインタ（カーソル）の形状は「指さす手」の形に変化するのが一般的です。なので、押せる場所ならリンク以外でもマウスポインタを「指さす手」の形状に変えると分かりやすくなるでしょう。ボタンの上にマウスが載った際にも、リンクと同じように「指さす手」の形にマウスポインタを変えると、より分かりやすくなって望ましいかもしれません。そこで、マウスポインタの形状を自由に変更する...
View Articleプレースホルダの文字列をもっと薄く表示させるCSS
プレースホルダとは、テキスト入力欄が空っぽの際に薄く表示される文字列のことです。このプレースホルダの文字列はたいていは薄い色(灰色)で表示されますが、ブラウザによって文字の濃さが異なります。やや濃いめの色で表示されるブラウザでは、特に初心者から「既に何かが入力されている」と勘違いされがちだという問題があります。それを防ぐために、プレースホルダの文字色をCSSで指定して、かなり薄い色で表示されるようデ...
View Article極細～極太まで、丸ゴシック日本語Webフォントを7段階の細さ(太さ)で表示する方法
極細の丸ゴシックWebフォントから、極太の丸ゴシックWebフォントまで、7段階の太さ(細さ)を選んで日本語文字を表示できるとデザインの幅が広がって便利です。丸ゴシック系フォントは閲覧環境によっては存在しない場合もありますが、Webフォントを使えば環境に依存せず表示できて便利です。また、文字を画像化せずに済むのでコピーや修正も簡単ですし、文字の検索もできます。Google...
View Article偶数番目と奇数番目で画像の配置を左右逆転させるCSS
画像と文章をセットにしたボックスを複数個並べるようなとき、奇数番目と偶数番目とで画像と文章の配置を左右逆転させて、ジグザグに配置するデザインを作りたい場合があります。CSSのnth-child疑似クラスを使って偶数番目か奇数番目かを判断し、flex-directionプロパティを使ってフレックスボックスの配置を変化させる書き方なら、HTMLで配置を調整することなくCSSだけでジグザグな配置を作れます...
View Article最後の要素の後には区切り線を引かないCSS (ブロック間にだけ線を引くCSS)
ブロックとブロックの間にCSSで区切り線を引きたいことがよくあります。簡単な方法は、各ブロックの後（または前）に線を1本引くことです。しかし、その方法だと「最後のブロックの後」（または最初のブロックの前）にだけは線を引かないでおく対処も必要です。CSSには「最後の要素」だけを指し示せるlast-child疑似クラスや、「最初の要素」だけを指し示せるfirst-child疑似クラスがあります。それらを...
View Article写真の肩にリボン画像と文字を斜めに重ねて掲載するCSS
写真などの大きな画像の肩（左上や右上など）にリボン画像と文字を斜めに傾けた上で重ねて掲載するCSSの書き方を解説。重ねる画像自体は斜めにはせず、真っ直ぐな画像を用意しておき、その画像に重ねるテキストと一緒にCSSで傾けるのがポイントです。その方が、画像とテキストの傾きを完全に一致させられるので微調整の手間が省けます。文字を画像化する必要もないので、検索性も向上するでしょう。
View Article日本語Webフォントでシャギーが出るのを防ぐ簡単なCSS
Windows環境で日本語Webフォントを使用した際、ブラウザによってはシャギー（文字のギザギザ）が目立ってしまうことがあります。そのようなシャギーを防ぐには、CSSでtransformプロパティを使い、値に「rotate(0.03deg)」などと指定することで、ほんの少しだけ文字を傾ける方法が有効です。ほんの少しの角度なら見た目に傾きは全く分かりません。しかし、フォントのシャギーは取れるため、文字...
View Article画像の横幅をウインドウ幅に合わせたいが、原寸より大きくはしたくない場合のCSS
画像を描画領域の横幅いっぱいに表示したいけども、原寸サイズを超えて拡大はさせたくない、という場合がありますよね？...
View Article大きな画像でレイアウトが崩れないように、画像を含むボックスだけを横スクロール可能にするCSSの書き方
表示しきれない部分は、ボックス内部でスクロールして見えるようにするためのCSSの書き方を紹介。画像が大きすぎる場合に、ページ全体が横スクロール必要になってしまうと困るものの、画像を縮小して表示もしたくない場合には、「ボックス内部で画像だけを横スクロール可能」にする選択肢もあります。どうしても縮小したくないという場合には良さそうな気がします。
View Article背景画像を描画領域の面積ぴったりに自動で合わせる方法
CSS3では、背景画像を「描画領域の面積」に合わせて自動で拡大・縮小させる機能としてbackground-sizeプロパティが加わりました。背景画像を描画領域の空間に合わせて自動でサイズ調整させ、ボックスの大きさにぴったり合わせることも簡単になりました。1枚の画像で描画領域全体を覆い尽くすように拡大・縮小させたり、画像が途中で切られないように表示サイズを自動調整させたり、描画領域内に指定枚数だけ表示...
View Article画像の縦横比を維持したままリサイズ(拡大/縮小)するCSS
ウェブページ上に画像を掲載する際、オリジナルサイズではなく拡大や縮小して面積を変更して表示したい場合があります。多くの場合では縦横比を維持したままリサイズしたいでしょう。たいていは縦横比を維持したまま拡大縮小が可能ですが、HTMLやCSSの書き方によっては縦横比が維持されない場合もあります。そこで、確実に縦横比を維持したまま画像をリサイズする方法を解説。
View Articleファイル送信フォームのUIをアイコン(ボタン)表示に変える方法
ウェブ上の入力フォームを使って画像などのファイルをアップロードさせたい際には、input要素で作るファイル選択ボックスを使います。しかし、このファイル選択フォームは標準状態ではあまり見やすいUIとは言えない上、CSSを使っても装飾はしにくいのですよね。そこで、ファイル選択フォームそのものをアイコン化(ボタン化)して掲載する方法を使うことで、分かりやすく使いやすいUIにする方法を解説。HTMLにlab...
View Articleテキストリンクを表面がグラデーションのボタン形状に装飾する方法
テキストリンクをボタンに見えるように装飾したいことがよくあります。ボタンとして機能することが一目で分かるよう、表面がグラデーションのボタン形状にCSSで装飾する方法を解説。リンクを作るa要素に若干の工夫を加えて、background-imageプロパティにlinear-gradientを使えば、簡単にグラデーションボタンがCSSだけで作れます。やはり、わざわざボタン形状に見せるからには、現実の物理ボ...
View Articleテキスト入力欄の枠線や背景を自由に装飾する方法
テキスト入力欄は標準ではただ細い枠線が引かれるだけの四角形ですが、CSS(スタイルシート)を使えば自由に装飾できます。ブラウザによっては、編集欄内に表示される文字サイズが小さめで見えにくい場合もあります。入力欄の枠線を角丸で太枠にしたTwitterのツイート欄っぽい感じにしたり、文字サイズをページの他のサイズと合わせたり、内側の余白をしっかり確保すると、見やすくて使いやすいテキスト入力欄になりそうです。
View Articleテキスト入力欄のフォーカス時にChromeなどが自動付加する枠線を消す方法
ChromeやOperaなど一部のブラウザでは、フォーカスのあるテキスト入力欄(＝カーソルの入った状態の編集領域)に独自の枠線を加えて描画します。テキストエリアの枠線を独自にデザインしているページでは、この仕様はちょっと邪魔です。なぜなら、独自デザインの枠線の外側に、ブラウザ側がさらに枠線を加えてしまって、枠が二重に見えてしまうからです。特にテキスト入力欄を角丸にしていると、見た目がおかしくなります...
View ArticleClik here to view.
重要ではないCSSファイルを後から遅れて読み込ませる方法
CSSファイルによっては後から遅れて読み込ませたい場合もあります。後から読み込まれるJavaScriptだけで使われるCSSとか、ユーザが何らかのアクションを起こさない限り参照されないCSSとか。そのような「先に読んでも仕方がない」(＝事前に読み込んでもウェブページの表示待ち時間を増やしてしまうだけ)なCSSファイルを、できるだけ後回しにして読み込ませる方法を紹介。...
View ArticleClik here to view.
単語途中での自動改行を回避するにはnowrapよりもinline-blockが便利
日本語のように単語の区切りが曖昧な言語で、単語の途中で自動改行されるのを防ぐ方法としては、spanとかで囲んだ単語に「display: inline-block;」を指定するのが楽です。昔はwhite-space(nowrap)などを使って改行禁止区間を設ける対処方法とかもありましたが、それだと「どうしても改行が避けられない状況」では困ってしまいますから。...
View Article
