CSS

floatした要素が崩れないようにする(他の要素が回りこまないようにする)

padding-bottom margin-bottom でなんとかしていたが、 overflow:hidden; を親か子の最後に指定することで回り込みを防げる. <div class="a"> <div class="b"> <p>xxxx</p> <p>xxxx</p> </div> <div class="b"> <p>xxxx</p> <p>xxxx</p> </div> </div> .b p { float: left; } .b { overflow: hidden; }

正方形を維持しつつCSSだけでレスポンシブ対応する

以下より参照. stackoverflow.com .square { width: 100%; height: 0; padding-bottom: 100%; } 完全に正方形でレスポンシブに可変する.

background-image を複数指定する

カンマ区切りにより, 複数のbackground-imageが指定可能. 区切り線と矢印などに利用. #Menu dt.active { background-image: url("../images/laser/a.png"), url("../images/laser/b.png"); background-position: right, bottom; background-repeat: no-repea…

アコーディオンに矢印をつける

<dl id="Menu"> <dt>aaa</dt> <dd>bbb</dd> <dt>ccc</dt> <dd>ddd</dd> </dl> active classが付いている時とついていないときで表示を分ける. #Menu dt { display: block; height: 50px; text-align: left; cursor: pointer; font-weight: 300; background-image: url("../images/xxx.png"); background-position: ri…

imgLiquidを使い画像をトリミング

imgLiquidを使って画像をトリミングし、マルチデバイスでセンター寄せにする 外部ファイル読み込み <script src='//code.jquery.com/jquery-1.10.2.min.js'></script> <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/app.js"></script>

read the font file

@font-face { font-family: '{font_name}'; src: url('/fonts/{font_file.otf}'); } .body{ font-family: '{font_name}'; }

ボタン全体をリンクにする

CSS

次へ進む >> <style> .block { text-align: center; } .btn { padding:10px 20px; } </style> <div class="block"> <a href="#" class="btn">次へ進む >></a> </div>

LESSファイルコンパイル

CSS

CodeKitは、無料でLESSファイル(その他JSファイルなども)をコンパイルしてくれるアプリです(以前はLESS.app)。 指定したプロジェクトをアップロードし、コンパイル先を指定しただけで準備完了。 LESSファイルを編集するごとに自動でCSSへ変換して指定し…

OOCSSとは

CSS

OOCSSとはなにか Object Oriented Cascading Style Sheet(オブジェクト指向CSS) 構造とスキンを分離してクラス定義し、それらを組み合わせてスタイルを定義する方法 難しいOOCSS(オブジェクト指向CSS)の設計 | hijiriworld Web 例:Bootstrap Bootstrap…

Google mapを埋め込む

地図を埋め込むには、いろいろな方法があります。 一番簡単な方法 Share a map URL or short link - Google Maps Help Share a map URL or short link - Google Maps Help Google マップ - 地図検索 1) Google mapへアクセスし、該当の場所を検索します。 …

画像が反映されない

画像名称、パスは合っているはずなのに、画像が反映されない。 そのような場合は、アクセス権限を見直してください。 ファイルを右クリック > 情報を見る > 共有とアクセス権で、everyoneがアクセス不可となっていたら画像を表示することができません。 読み…

要素を見えなくする

CSS

display: none; 指定した要素を見えなくし、要素のスペースごと消します。 .test { display: none; } visibility: hidden; 指定した要素を隠し、要素のスペースは残します。 .test { visibility: hidden; } visibility: collapse; 行・列の表の一部を一部を…

ツールチップ ポップオーバー カルーセル bootstrap

<html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </link></meta></meta></meta></head></html>

ナビゲーションバー bootstrap

<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">toggle nav</span> <span class="icon-bar"></span> <span class="icon-bar"><…</span></button></div></div></nav>

ボタンやドロップダウン bootstrap

<div class="btn-group"> <button class="btn btn-primary"><i class="glyphicon glyphicon-heart">about</i></button> <button class="btn btn-success"><i class="glyphicon glyphicon-heart">main</i></button> <button class="btn btn-info"><i class="glyphicon glyphicon-heart">sub</i></button> </div>

offsetでカラムの間に空間を入れる

<form class="form-horizontal"> <div class="form-group"> <label class="control-label col-sm-2" for="postcode">郵便番号</label> <div class="col-sm-4"> <input type="text" id="postcode" class="form-control" placeholder="郵便番号"> </div> </div> <div class="form-group"></div></form>

sr-only Bootstrap

sr-onlyクラス (screen reader-only) 音声読み上げのみで、画面には表示しないクラスです。 <form class="form-inline"> // フォーム全体をインラインに <div class="form-group"> // フォームをグループに <label class="sr-only control-label" for="postcode">ここが表示されない</label> <input type="text" id="postcode" class="form-control" placeholder="郵便番号"> </div> </form>

画面幅が変わった際、カラムを表示したり消したりする Bootstrap

<html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </link></meta></meta></meta></head></html>

画面幅が変わる度、カラム構成を変える Bootstrap

smの時は3:9、xsの時は5:7という風にレイアウト構成を画面の大きさによって変えられます。 <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> </meta></meta></meta></head></html>

画面幅に合わせてカラムの幅を調節する Bootstrap

横幅を全部で12のカラムに分割し、col-sm-3,col-sm-9などとクラスで指定してそれぞれの横幅が全部で12になるよう調節する。 xs:extra small ~ 767px sm:small 768 ~ 992px md:medium 992 ~ 1200px lg:large 1200 ~ CSS · Bootstrap CSS · Bootstrap smと…

padding border margin の役割

margin marginを設定することにより、borderより外側に背景や画像を適用させない。 上下の要素間にmarginを設定し、相殺させてより広い方を適用させる。 負の数値が使用できる。 margin-right:auto;``margin-left:auto;を利用することにより、中央に配置でき…

floatで中央寄せにできない

CSS

float: left;などで指定している場合、text-align: center;やmargin: 0 auto;などとしても中央寄せに出来ません。 その場合は、親要素にtext-align: center;を指定し、子要素にdisplay: inline-block;を指定すると、中央寄せになります。 #tabwrap { backgro…

font-family

CSS

外部スタイルシートの頭に@charset "UTF-8";を記述する(日本語対応)。 優先度の高いfont-familyから記述していく(日本語フォントを先に)。 スペースと全角文字が含まれているfontを利用する場合、ダブルクォーテーションで囲む。 該当フォントがない場合…

各効果打ち消し

CSS

test { line-height: normal; width: auto; max-width: none; height: auto!important; margin: auto; overflow: auto; font-family: auto; border: none; float: none; }

colorの簡単な指定方法

CSS

カラーピッカーをタップし、色指定することができます。 RGBAとは、Red,Green,Blue,Alpha(透過度)のことで、それぞれを指定することができます。 表示したい色が決まったら、表示された値をソースへ記述するだけです。

box-sizing boxの幅を、widthの設定以外無視する

実際に表示されるboxのwidthは、padding+border-widthも合わせて表示されてしまいます。 box-sizingはpaddingとborder-widthを無視し、widthのみ適用してくれる優れもの。 リセットスタイルに反映させると便利そう。 * { -webkit-box-sizing: border-box; -m…

ナビゲーションバーのJSライブラリ

http://formstone.it/components/naver PC表示 SP表示 SP表示

画面に合わせてサイズ縮小・拡大

img { max-width: 100%; height: auto; width: auto; display: block; }

IE8へのレスポンシブ対応

media queryへの対応 header内に以下を記述する。 importは使わない @media screen and (max-width:1180px){foo}

floatについて

CSS

float floatを指定した次の要素は、右側に回り込むようになります。 通常の配置から、左右どちらかに配置させるようにします。親要素の高さが決まっておらず、子の高さで指定されている場合は、親の高さがfloatを指定した子要素により失われてしまいます(親…