フォルダ
iOSでinput要素のボタンにcssが効かないときの対処法
Formのinputボタンに以下のようにcssをあてたつもりが、 iOS（iPhoneとかiPadとか）で確認してみると・・・ 全然違うっっ！！！ という場合の対処法です。 webkit系ブラウザのデフォルトスタイルをリ...
HTML / CSS / SASS の記事
[CSS]Google Map のズームコントロールが正しく表示されないときの対処法
上のようにGoogle Mapのズームコントロールが正しく表示されない事態に出くわしました。 なんだこれー？っていろいろ検索した結果、CSSの以下の記述が邪魔していることがわかりました。 これが邪魔するとは予想だにせず。...
inputボタンにアイコンフォントを表示する方法
inputフィールドに表示する文字列はvalueにセットするわけですが、FontAwesomeのiタグをvalue値にセットすることはできません。でも、検索フォームなどのボタンに『検索』という文字を表示するのではなく、F...
スマホ表示のとき横長テーブルの横スクロールバーを常に表示する方法
スマホだと画面からはみ出てしまうような横長テーブルで、CSSだけで横スクロールを常時表示する方法のメモです。（個人的には、画面から横にはみ出してスクロールさせるよりは、スマホ用にテーブルを最適化した方がいいと考えますが、...
facebookのページプラグインをレスポンシブ対応する方法（横幅可変に対応）
facebookのページプラグインはレスポンシブ対応されていて、横幅500pxを指定して取得したコードでも親BOXがそれより小さければ親BOXに合わせて小さく表示されます。（横幅180px〜500pxという制限はあります...
テキストが改行してもラジオボタンに回り込まず揃える方法(横幅指定はしない)
ラジオボタン（またはチェックボックス）のラベルが改行するほど長い場合。テキストがラジオボタンの下にまで回り込んでしまいます。 やっぱり回り込まずに行頭を揃えたいことが多いです。 また、テキスト部分の横幅も固定ではなくフレ...
CSSで左右は固定、中央は可変の3カラムレイアウト
簡単そうで、意外と悩んだのでメモしておく。 こちらの記事を参考にさせていただきました。引用元：【CSS】3カラムレイアウト-左右は固定幅、中央は残りの幅目一杯に広がるレイアウト 悩んでしまったのは、3カラム、左右は固定幅...
[Sublime Text 3]拡張子HTMLのファイルでもPHPシンタックスで開く
クライアント環境により、PHPファイルでも拡張子をHTMLをしなければならないことが。 拡張子がHTMLだからSublime Textで開く度にHTMLのシンタックスに紐付き、いちいちシンタックスをPHPに切り替える。 ...
placeholder属性の文字色を変更する
input要素のplaceholderにスタイルを適用します。 Firefoxはバージョンにより2通りの書き方があって、微妙に違うので注意が必要です。 IE6〜IE9ではplaceholder属性が使えないのでjQuer...
cssだけでブロック要素を上下左右中央揃えにする
左右中央揃えの方法はご存知の方も多く、 インライン要素の場合はtext-align:center;、 ブロック要素の場合はmargin:0 auto;です。 では、上下中央揃えはどうでしょうか？ vertical-ali...
レスポンシブでPCのときだけ改行しスマホの時は改行しない方法
PCで任意の箇所にいれた改行をスマホでは改行せずに表示したい！っていう、レスポンシブ対応するうえでのあるある。 このあるある問題を解決するとっても簡単な方法をご紹介します。 このような記述の場合 PCではbrタグで改行さ...
レスポンシブでタブレットとPCを同じにするためスマホとタブレットでviewportを切替える
非レスポンシブのサイトをiPadで見ようとするとiPadが適切なサイズで表示してくれます。例えば、横幅が1200pxあるサイトでもiPadを縦にしたときの横幅768pxに合わせて縮小してくれるのです。 ところが、タブレッ...
MacにSASSをインストールする
前々から気になっていたSass（サス）を始めようということで、まずはインストールです。 Sass（サス）とは Sassは、CSSを記述するためのメタ語の一つで、CSSをもっと便利に効率良くしてくれる言語です。 CSSをも...
スマホサイトにおすすめの横からスルッと出現する「ドロワーメニュー」
ドロワーメニューの実現方法はいろいろありますが、これは、少しのcssとJavaScriptで実装できるのでおすすめです。よく使うと思うので備忘録を兼ねてメモ。 ※cssはわかりやすいように、ドロワーメニューの実装に必要な...
font-sizeを相対指定してChromeだけフォントが大きく表示されてしまう問題
フォントサイズを以下のように相対指定で書いたときに、Chromeだけフォントが大きく表示されてしまうことがありました。 62.5%が無視されて、font-size:100%;に対して1.6remで表示されてしまっているよ...
Bootstrap3でレスポンシブ機能を無効にする方法
続けてBootstrap3ネタです。どんだけBootstrap3好きなんだよって感じですが、Bootstrap3を使った構築が続いているのでこうなっちゃうのです。 で、今回は、Bootstrap3を利用するもののレスポン...
Bootstrap3でテーブルを角丸にする方法
Bootstrapでは、以下のようにtableタグのクラスに.table-borderedを追加するとテーブルに線を引くことができます。 この記述はBootstrap2でも3でも共通です。 だけど、表示されたテーブルをみ...
フッターをウィンドウ下部に固定、サイドの高さを100%にする方法
メインコンテンツの量に関係なく、フッターをウィンドウ下部に固定して、さらにサイドバーの高さをウィンドウ100%にする方法のメモです。それぞれを実現する方法はいろいろあるんですが、今回はその合わせ技でシンプルなものをご紹介...
CSSだけで角丸にするborder-radius
cssだけで角丸を表現するにはborder-radiusを使用します。画像を使わずにリッチな表現ができるので最近よく使われています。Bootstrapとかでもバンバン使われてますね。 例えば、横300px、縦120pxの...
cssで背景だけを透過する（文字は透過しない）方法
タイトルなどで、背景に色をつけて文字を表現する場合などに、以下のように記述すると、背景だけでなく文字も透過されてしまいます。 ※上記サンプルの上段みたいになる・・・ 背景だけを透過して、上にのせる文字は透過したくないとい...