CSSプロパティ
CSSプロパティ [CSS]iOSでtransformが動かない場合の対処法
CSS-webkit-transition: -webkit-transform を指定HTMLデモ.transition {width: 25%;height: 100px;background-color: #ccc;transitio...
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で要素を中央に置く鉄板テクニック
Flexboxを使った究極のセンタリング現代のWeb標準において、要素の中央配置に最も適しているのは、CSSのFlexbox（Flexible Box Layout）機能です。これは、コンテナ内のアイテムの配置、整列、順序を柔軟に制御するた...
CSSスニペット [CSS]CSSでチェックボックスやラジオボタンを大きく表示する方法
フォームのチェックボックスやラジオボタンを、CSSでサイズ変更する方法のご紹介です。チェックボックスを拡大表示するサンプルまずはチェックボックスのCSSの記述例です。チェックボックスのwidthやheightの値と合わせて、CSS3のtra...
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タグ内に①②…と丸数字も合わせて...
jQueryプラグイン・ライブラリ [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やChrom...
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-ima...
CSSプロパティ [CSS]CSS3のborder-radiusで要素や画像で円形に表示する方法
CSS3のborder-radiusは要素を角丸にすることができる便利なプロパティで、角丸の値を調整することで、画像や要素を正円（円形）で表示することもできます。IE7以下でも利用したい場合は（試していませんが）、PIEなどを使えば実現可能...
CSSプロパティ [CSS]テキストに影を落とすCSS3プロパティtext-shadow
テキストに影を落とすCSS3のプロパティtext-shadowについてまとめました。前回紹介させていただいたボックスに影を付けるbox-shadowプロパティと使い方は似ています。text-shadow の記述方法以下、text-shado...
CSSプロパティ [CSS]ボックスに影を付ける（ドロップシャドウ）CSS のプロパティ「box-shadow」
ボックスに影を付ける（ドロップシャドウ）ことができるCSS3のプロパティがbox-shadowです。IE8以下には対応していないものの、影はボックスの「内側」「外影」に付けることができますし、影の色やぼかし具合などを調整することで質感のある...
CSSプロパティ [CSS]display:inline-block で発生する「謎の隙間」を埋めるCSSテクニック集
display:inline-block を用いて要素を横並びに配置する際、意図しない「隙間（マージン）」が発生し、レイアウトが崩れてしまうケースがあります。本記事では、この悪名高い「インラインブロックの隙間」が発生するメカニズムを解説しつ...
CSSプロパティ [CSS]CSS3のborder-radiusで角丸を作る方法
CSS3よりborder-radiusのプロパティを使う事で簡単に角丸のオブジェクトが表現できるようになりました。今回はborder-radiusを使って様々な角丸のサンプルを紹介したいと思います。border-radius の記述方法bo...