CSS [CSS]iframeやtableのレスポンシブ対応に最適なCSS「Fluidity」
Google MapsやYoutubeなどを埋め込み表示したiframe要素をレスポンシブ対応（表示サイズをブラウザに合わせてくれる）するのに便利なCSS「Fluidity」のご紹介です。 fluidity.css のダウンロード 以下のペ...
CSS
CSS 
CSSスニペット [CSS]Javascriptを使わずにCSSでTwitterフォローボタンをデザインする方法
TwitterのフォローボタンをCSSでデザインする方法のご紹介です。 以前に紹介させていただいたTwitter フォローボタンをテキストリンクにする方法を使えば、HTMLとCSS だけでTwitter フォローリンクを設置することができる...
CSSスニペット [CSS]CSS3でローディングアニメーションを作る方法
CSSでローディングアニメーションを作るには、過去にも紹介させていただいたCSS Load.netなどを使う方法もありますが、 今回は画像を使わないでCSS3で様々なローディング用アニメーションをつくってみようの記事で紹介されていた方法をも...
CSSスニペット [CSS]preタグ内の文章を改行する方法
CSSのwhite-spaceプロパティのpre-wrapを使って、pre タグ内のテキストやコードを幅に合わせて改行する方法のご紹介です。 pre タグ内のテキストを改行 preタグ内のテキストを自動改行させるには、CSSで以下のように指...
CSS [CSS]ブログに埋め込んだツイートのデザインをCSSで変更する方法
Twitter のツイートをブログに埋め込んで表示させる場合に、幅を100% に変更したり、デフォルトの引用デザインではなく自分のブログに合ったオリジナルデザインへと変更する方法のご紹介です。 Twitter 引用部分のデザインの構成を確認...
CSS [CSS]フォームにフォーカスした時の背景色を変更する方法
テキストフォームやテキストエリアなどの要素がマウスでクリックされた（:focus）際に、CSSで指定した背景色に変更する方法のご紹介です。 フォーカス時のフォーム要素の背景色を変更する inputやextareaなどタグについては、CSSで...
CSSスニペット [CSS]縦型、横型の吹き出し付きソーシャルボタンのCSS サンプル
過去にCSSで作る「吹き出し」のサンプルの記事で紹介させていただいたカスタマイズを元に、 FacebookやTwitterっぽい吹き出し付のソーシャルボタンを「縦型」「横型」で作ってみました。 吹き出し付の縦型ボタン（vertical） 縦...
CSS [JS]jQueryとCSSで画像をトリミングしてセンタリング表示する方法
jQueryとCSSで画像をトリミングしてセンタリング表示する方法のご紹介です。 横＊高さ180pxの正方形で画像をトリミング 横長（長方形）の画像をjQueryとCSSで横*高さ180pxの正方形にトリミングして表示するサンプルです。 j...
CSS [CSS]<tr>でborderを使えるようにする方法
<table>の<tr>タグにCSSのborderを適用させる方法のご紹介です。 <table>にborder-collapse:collapseを指定 <table>タグに border-collapse:collapseを指定することで...
CSS [CSS]文頭を字下げしたり2行目以降の行頭1文字分インデントさせるCSS の書き方
CSSのtext-indentプロパティを使って文頭を常に1文字下げる方法と、2行目以降の行頭を1文字分インデントする方法をまとめました。 list-style-positionで同じような見せ方が可能なのですが、リストではなくp タグで囲...
CSSスニペット [CSS]iOSで滑らかなスクロールを実現する-webkit-overflow-scrollingの使い方
overflowで要素内をスクロールさせると、iPhoneやiPadなどのiOSで見た場合にスクロールがぎこちなくなります。 そんな時は、iOS 5.0より実装されたSafari CSSの-webkit-overflow-scrolling...
CSS [CSS]iOSのテキストフォームの角丸や影を消すなどデザインを変更する方法
iOSでテキストフォームを見ると、デフォルトで角丸だったりシャドウ（影）が掛かっていたりしますので、サイトに合わせてフォームのデザインを変更した場合が多々有ります。 今回はiPhoneやiPad向けに、inputのデザインをCSSで補正する...
CSSスニペット [CSS]label要素の属性セレクタにCSSを適用する方法
<label for="mail">のような属性セレクタをCSSで制御する方法のご紹介です。 属性セレクタにCSSスタイルを適用 以下のようなCSS の記述になります。 またはこのような記述です。
CSSスニペット [CSS]CSSでtableタグのcellspacing、cellspaddingを指定する方法
tableのセルの間隔とセル内の余白を、cellpadding、cellspacingは使わずにCSSで指定する方法のご紹介です。 tableタグにcellpadding、cellspacing などを記述 table タグにcellpad...
CSS [CSS]iOSでフォームにフォーカスした時の自動ズーム問題を回避する方法
iOSでテキストフォームをタップしてフォーカスした時、ページ（の文字サイズ）が拡大表示される問題を回避する方法のご紹介です。 テキストフォームに文字を入れようとすると拡大表示される iPhone でウェブサイトを見ていて、テキストフォームに...
CSSプロパティ [CSS]フォームのinput type=fileのボタンデザインを変更する方法
「ファイルを参照して下さい」などのデフォルトのデザインではなく、オリジナルで用意したボタン画像をクリックして、ブラウザのアップローダーを起動させる方法です。 テキストフォームやラジオボタンなどは、CSS3のプロパティを利用すればかなり自由に...
CSSスニペット [CSS]Windows のChrome でメイリオフォントが潰れて表示される場合の対処法
メイリオフォント を指定してしたテキストを、Windows のGoogle Chrome から見たら「文字が潰れて表示される…」なんて場合に、CSSのtext-shadowを使った回避策のご紹介です。 もっとスマートな方法が他にもあるのかも...
HTML [CSS]HTML5 のplaceholder のテキストカラーを変更する方法
HTML5で強化されたForm 周りの機能の1つに、input type="text" などのフォームに初期値としてテキストを入れておくことができる placeholder 属性というものがあります。 今回は、このplaceholder 属...
CSSプロパティ [CSS]olのリストで①や②などの丸数字を表示させる方法
olによるリストで丸数字を使う方法をまとめました。 ol liのlist-styleはnoneで消しておいて、替わりに①や②などの「丸数字」を表示させる方法です。 olのリストで「丸数字」を表示させるサンプル liタグ内に①②…と丸数字も合...
CSS [CSS]無料で使えるWEBフォント「Google Web Fonts」の使い方
Arial Black、Times、Verdana…など、WEBサイト制作時に指定するフォントはごく限られたモノになるかと思いますが、Google提供のサービスの1つであるGoogle Web Fontsを利用すると表現の幅が広がります。 ...
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...