CSSプロパティ
CSSプロパティ [CSS]iOSでtransformが動かない場合の対処法
CSS -webkit-transition: -webkit-transform を指定 HTML デモ .transition {width: 25%;height: 100px;background-color: #ccc;trans...
CSSプロパティ [CSS]font-familyで游明朝を指定する方法
CSSでfont-familyで游明朝を指定
CSSプロパティ [CSS]nth-child指定方法まとめ
CSS 偶数 奇数 3つ目まで 3つ目以降 3の倍数
CSSプロパティ [CSS]border-radiusで正円表示
border-radiusで正円表示 border-radiusピクセル指定 border-radiusパーセント指定
CSSプロパティ [CSS]hrの線の太さをCSSで変更する方法
border-widthを5pxに指定
CSSプロパティ [CSS]テキストにマーカーのような背景を適用する方法とサンプル
テキストに蛍光ペンで線を引いたような背景色を適用させる方法のご紹介です。 CSSでテキストにグラーションの背景を指定してあげることで、マーカーを引いたようなの見せ方ができるようになります。 マーカーを引いたような背景 具体的なコードはこんな...
CSSプロパティ [CSS]position:absoluteとmargin:autoで要素を中央配置する方法
特定の要素を中央に配置したいという場合のCSS記述例のご紹介です。 ブラウザを伸縮しても、常に画面（親要素）の中央に表示させることができるというものです。 特定の要素を中央配置 まずはHTML側の記述例です。 上記の要素に対して、以下のよう...
CSSスニペット [CSS]CSSでチェックボックスやラジオボタンを大きく表示する方法
フォームのチェックボックスやラジオボタンを、CSSでサイズ変更する方法のご紹介です。 チェックボックスを拡大表示するサンプル まずはチェックボックスのCSSの記述例です。 チェックボックスのwidthやheightの値と合わせて、CSS3の...
CSSプロパティ [CSS]<hr>の境界線の色と太さをCSSで変更する方法
<hr>の境界線の色と太さを変更する為には、CSSのbackground-colorとheightプロパティを使います。 サンプル 例として、カラーは#dd0000、5pxの太さの境界線を敷きたい場合の記述例です。
CSSプロパティ [CSS]フォームのinput type=fileのボタンデザインを変更する方法
「ファイルを参照して下さい」などのデフォルトのデザインではなく、オリジナルで用意したボタン画像をクリックして、ブラウザのアップローダーを起動させる方法です。 テキストフォームやラジオボタンなどは、CSS3のプロパティを利用すればかなり自由に...
CSSプロパティ [CSS]olのリストで①や②などの丸数字を表示させる方法
olによるリストで丸数字を使う方法をまとめました。 ol liのlist-styleはnoneで消しておいて、替わりに①や②などの「丸数字」を表示させる方法です。 olのリストで「丸数字」を表示させるサンプル liタグ内に①②…と丸数字も合...
CSSプロパティ [jQuery]IE7、8でもbackground-size:containが利用できるプラグインjquery.backgroundSize
IE7、IE8のブラウザでもCSS3のbackground-size:containとbackground-size:coverを使用するためのjQuery プラグインがjquery.backgroundSizeです。 そこまでしてIE対応...
CSSプロパティ [CSS]リボン風帯のHTMLとCSSをWEB上で生成できる3D Ribbon Generator
WEB上で簡単に「リボン風帯」のデザインを作って、HTMLとCSSのコードを生成できるサービス3D Ribbon Generatorのご紹介です。 生成されるコードの量はかなり多いですが、リボン帯をCSS だけで一から作ろうと思うと結構大変...
CSSプロパティ [CSS]半角文字列を改行するword-breakとword-wrapの使い方と違い
divやtableなどの要素から半角文字が突き抜けて表示されないように、CSSで強制的に折り返してあげる方法のご紹介です。 今まで文字の折り返しと言えばword-breakを使う機会が多かったのですが、CSS3よりword-wrapプロパテ...
CSSプロパティ [CSS]border-radiusなどのコードをWEB上で簡単に生成できるCSS3 Generator
CSS3のborder-radiusやbox-shadowなどのプロパティの値をブラウザ上で設定し、コードを生成できるジェネレータCSS3 Generatorを使ってみました。 エディタで書いていると、特に transform とかはイメー...
CSSプロパティ [CSS]-webkit-box-reflect による鏡面効果の設定方法とAndroid への対応方法
CSS3の-webkit-box-reflectプロパティを使って画像に「鏡面効果」を与える方法のご紹介です。 以前紹介させていただいたreflection.jsのような Javascript を使う方法もありますが、SafariやChro...
CSSスニペット [CSS]CSS3のtransformで文字を斜めに傾けて表示する方法
CSS3のtransformプロパティを使って要素を斜めに傾けて表示させることが可能です。 テキストだけでなく、もちろん画像ファイルを斜めに傾けることも可能です。 写真をちょっと傾けて表示させることで、デザインの幅が広がるかもしれませんね。...
CSSプロパティ [CSS]CSSのclipで長方形の画像を正方形で切り抜き（マスク）する方法
CSSの要素の切り抜き領域を指定するプロパティclipを使えば、画像を切り抜き表示させることができます。 デザインに合わせて長方形の画像を正方形にマスクする必要がある場合などに使えます。 clip: の値 clip:プロパティの値は以下の2...
CSSプロパティ [CSS]imgタグの画像をborder-radiusで角丸にして表示する方法
以前にCSS3 のborder-radius で角丸を作る方法の記事でもborder-radiusの基本的な使い方を紹介させていただきましたが、今回は「画像の四隅を角丸」にして表示させる方法のご紹介です。 画像を角丸で表示させる <img>...
CSSプロパティ [CSS]背景画像のサイズを変更できるプロパティ「background-size」
CSS で背景画像を使う際、今までは画像ファイルを適切な大きさにリサイズする必要がありましたが、CSS3 からは背景画像の幅・高さを拡大・縮小できるプロパティ background-sizeを使うことができます。 background-im...
CSSプロパティ [CSS]CSS3のborder-radiusで要素や画像で円形に表示する方法
CSS3のborder-radiusは要素を角丸にすることができる便利なプロパティで、角丸の値を調整することで、画像や要素を正円（円形）で表示することもできます。 IE7以下でも利用したい場合は（試していませんが）、PIEなどを使えば実現可...
CSSプロパティ [CSS]テキストに影を落とすCSS3プロパティtext-shadow
テキストに影を落とすCSS3のプロパティtext-shadowについてまとめました。 前回紹介させていただいたボックスに影を付けるbox-shadowプロパティと使い方は似ています。 text-shadow の記述方法 以下、text-sh...
CSSプロパティ [CSS]ボックスに影を付ける（ドロップシャドウ）CSS のプロパティ「box-shadow」
ボックスに影を付ける（ドロップシャドウ）ことができるCSS3のプロパティがbox-shadowです。 IE8以下には対応していないものの、影はボックスの「内側」「外影」に付けることができますし、影の色やぼかし具合などを調整することで質感のあ...
CSSプロパティ [CSS]CSSのdisplay:inline-blockで並べた要素間の隙間を埋める方法
float を利用せずに display:inline-block で要素を横並びにする方法の記事でも紹介していますが、display:inline-blockで要素を横並びにした場合に発生する「要素間の隙間を埋める」方法の紹介です。 PX...
CSSプロパティ [CSS]CSS3のborder-radiusで角丸を作る方法
CSS3よりborder-radiusのプロパティを使う事で簡単に角丸のオブジェクトが表現できるようになりました。 今回はborder-radiusを使って様々な角丸のサンプルを紹介したいと思います。 border-radius の記述方法...