CSS [CSS]ime-modeを英数字入力モードに指定する方法
CSS HTML デモ input{ime-mode: disabled;-webkit-ime-mode: disabled;-moz-ime-mode: disabled;-ms-ime-mode: disabled;}
CSS
CSS 
CSS [CSS]横スクロール時に幅100%にした要素の背景が切れる時の対処法
CSS
CSS [CSS]印刷用CSSでページサイズと印刷向きを指定
A4サイズで横向き指定 B4サイズで縦向き指定
CSSプロパティ [CSS]テキストにマーカーのような背景を適用する方法とサンプル
テキストに蛍光ペンで線を引いたような背景色を適用させる方法のご紹介です。 CSSでテキストにグラーションの背景を指定してあげることで、マーカーを引いたようなの見せ方ができるようになります。 マーカーを引いたような背景 具体的なコードはこんな...
CSS [CSS]Font Awesomeのアイコンを細く見せたい場合の対処法
CSSでFont AwesomeのWEBアイコンフォントを細く表示する方法のご紹介です。 Font Awesomeアイコンそのものは細くすることはできないですが、CSSのfont-smoothingとtext-strokeプロパティを使うこ...
CSS [CSS]iOSでiframeの内容がはみ出して表示される場合の対処法
iPhoneやiPod touchなどのiOS端末で、<iframe>に指定したoverflow:scrollによるスクロールが効かずに<iframe>の内容がはみ出して表示されてしまう場合の対処法のご紹介です。 iOSでiframeの中身...
CSSプロパティ [CSS]position:absoluteとmargin:autoで要素を中央配置する方法
特定の要素を中央に配置したいという場合のCSS記述例のご紹介です。 ブラウザを伸縮しても、常に画面（親要素）の中央に表示させることができるというものです。 特定の要素を中央配置 まずはHTML側の記述例です。 上記の要素に対して、以下のよう...
CSS [CSS]<input type=submit>にFontAwesomeのアイコンを表示する方法
フォームのサブミットボタンである<input type="submit">にFontAwesomeの虫眼鏡アイコンのフォントを使う方法のご紹介です。 FontAwesomeのアイコンフォントの表示例 CSSでinputにfont-famil...
WordPress [WP]WordPress の埋め込みプレビュー表示の横幅を100%にする方法
WordPress4.4から、投稿などの本文にURLを貼付けるだけで、タイトル、抜粋、アイキャッチ画像を埋め込んだプレビュー表示が使えるようになりましたが、今回はこのプレビュー表示の横幅を、ブログのコンテンツ幅に合わせて100%表示にする方...
CSS [CSS]Safariでの検証時にinvalid CSS property declaration at:*エラーが表示される場合の対処法
Safariブラウザで要素の検証をしているとinvalid CSS property declaration at:*というエラーが表示される場合があります。 ただ、Safari以外のブラウザでは（今の所）このエラー自体が出なかったり、Sa...
CSS [CSS]brタグの改行を無効化する方法
レスポンシブのサイトを制作している場合は特に「PCサイトでは<BR>タグで改行させている所を、スマホで見た時には改行させたくない」ということが頻繁にあるのではないかと思います。 <br class="mobile">にようにクラスを指定する...
CSS [CSS]画像のマウスオーバー時にtransformで拡大縮小表示する
マウスオーバーした画像をCSS3のtransformで拡大縮小表示させる方法のご紹介です。 ブロック要素固定時の画像の拡大縮小 CSSの記述例は以下の通りです。 .sampleという名前の要素に幅と高さに加え、overflow:hidden...
CSS [CSS]Google Maps iframeでマウススクロールによる拡大縮小を無効にする方法
Google MapsをブログやWEBサイトに埋め込む（iframeで読み込ませる）際に、マウススクロールにより地図が拡大縮小してしまわないようにする方法のご紹介です。 Google Maps でスクロールによる拡大縮小を無効化 Googl...
CSS [CSS]Noto Sans JPのwebフォントを利用する方法
Noto Sansは全言語対応を目指してGoogleとAdobeが共同開発したオープンソースのフォントで、Webフォントとして無料で提供されています。全言語対応を目指しているだけあって、当然日本語（和文）フォントも利用可能です。 今回はそん...
WordPress [WP]Contact Form 7のチェックボックスの項目を改行する方法
WordPress のContact Form 7プラグインを使って作成したメールフォームでチェックボタンやラジオボタンを使う際に、項目を改行して縦に並べたい場合のカスタマイズのご紹介です。 Contact Form 7 のチェックボックス...
CSS [JS]Google Maps APIの地図をレスポンシブ対応する方法
Google Maps APIの地図をレスポンシブWEBデザイン対応にする方法のご紹介です。 PCでブラウザを伸縮しても、スマートフォン端末を縦横に回転しても、Google Maps のピンを常に中央に表示させることができます。 Javas...
Bootstrap [CSS]Google Mapのズームコントロールが出ない場合の対処法
BootstrapのCSSが原因か、Google Mapでズームコントロールを使うように設定していても、表示されない場合があります。 CSS Bootstrapも使いたいし、Google Mapにもズームコントロールを表示させたいという場合...
CSSスニペット [CSS]aタグリンク下線の色や種類などを変更する方法
CSSでリンクテキストの下線の太さや色を変更するには、text-decoration:noneにした上でborder-bottomプロパティで線の太さや色、種類を設定してあげると簡単に実現できます。 また、borderプロパティでリンクテキ...
CSSスニペット [CSS]height:100vhで要素の高さを100%にする方法
以前にjQueryで特定の要素の高さを100%にする方法について紹介させていただきましたが、対応ブラウザは限られるものの、CSSだけでも同じように要素の高さを100%にすることが可能です。 高さの単位「vh」 CSS で要素の高さを指定する...
CSSスニペット [CSS]CSSでチェックボックスやラジオボタンを大きく表示する方法
フォームのチェックボックスやラジオボタンを、CSSでサイズ変更する方法のご紹介です。 チェックボックスを拡大表示するサンプル まずはチェックボックスのCSSの記述例です。 チェックボックスのwidthやheightの値と合わせて、CSS3の...
CSSスニペット [CSS]Facebookの「Like Box」の背景色を変更する方法
FacebookのLike Boxプラグインに使える背景色が「light」と「dark」の2種類しかないため、 今回はブログのデザイン（背景色）に合わせてLike Boxの背景色を変更する方法を紹介させていただきます。 ※Like Boxの...
CSSプロパティ [CSS]<hr>の境界線の色と太さをCSSで変更する方法
<hr>の境界線の色と太さを変更する為には、CSSのbackground-colorとheightプロパティを使います。 サンプル 例として、カラーは#dd0000、5pxの太さの境界線を敷きたい場合の記述例です。
CSSスニペット [CSS]iframe要素をレスポンシブ対応させる方法
以前にも iframe やtable のレスポンシブ対応に最適なCSS「Fluidity」 の記事を紹介させていただきましたが、今回はfluidityを使わずにちょっとしたCSSのスタイル記述だけで簡単にiframe要素をレシポンシブ対応さ...
CSS [CSS]簡単に三角形を生成できるジェネレーター「CSS三角形作成ツール」
WEB上で三角形の形状やサイズ、色などを指定しながら、CSSの三角形が簡単に生成できるジェネレータCSS三角形作成ツールのご紹介です。 以前にもCSSで円形、三角形、台形、星形 などを表現する方法のまとめの記事を紹介させていただきましたもの...
CSSスニペット [CSS]WEBページの印刷時にリンクの後ろにURLが表示される問題の解決法
Twitter Bootstrapを使っているサイトでWEBページを印刷した際に、リンクテキストの後ろに「リンク先のURL」が表示されてしまうことがあります。 このURLを印刷時に非表示にする方法が、【CSS】印刷するとリンクの後ろにURL...