Subscribed unsubscribe Subscribe Subscribe

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を指定した子要素により失われてしまいます(親…

疑似要素・疑似クラス セレクタ

CSS

疑似要素 要素内の文字や行に対してスタイルを指定します。 :first-letter 最初の『文字』だけ反映されます。 p:first-letter { font-size: 20px; } :first-line 最初の『行』だけ反映されます。 p:first-line { font-size: 20px; } :first-child 最初の『要…

セレクタ * # . EF >

CSS

* 全ての要素に反映 * { color: #FFD700; } div * { color: #FFD700; } # 指定のid名に反映 #test { color: #FFD700; } <div id="test">classは複数、idはユニーク</div> .class_name 指定のクラス名に反映 .test { color: #FFD700; } <p class="test">ゴールド</p> tag.class_name 指定したタグのクラ…

属性セレクタ

CSS

!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <style> input[type="text"] { background-color:#ff0000; } input[type*="pa"] { background-color:#0000ff; } </style> </head> <body> <form action="#" method="post"> <table> <tr> <td>name:</td> <td></td></tr></table></form></body></html>

padding margin

CSS

<html lang="ja"> <head> <meta charset="utf-8"> <style> .a { width: 100px; height: 100px; padding: 20px; margin: 50px; background-color:#FFF; border:inset 10px #0000ff; border-radius:10px; } </style> </head> <body> <div class="a">foo</div> </body> </html>

border

CSS

border: solid 一本線 <html lang="ja"> <head> <meta charset="utf-8"> <style> .a { width: 100px; height: 100px; padding: 20px; margin: 50px; background-color:#FFF; border:solid 10px #0000ff; border-radius:10px; } </style> </head> <body> <div class="a">foo</div> </body> </html> border: ins…

overflowについて #visible #scroll #hidden

CSS

overflow: visible; visible デフォルト。ボックスからはみ出して表示される。 scroll はみ出した部分はスクロールできるようになる。 hidden はみ出した部分は表示されない。 auto ブラウザ依存

!importantについて

CSS

div #id{ color:yellow !important; } div { color:blue !important; } div { color:red; } スタイルシートが読み込まれる順 通常、同じclassやid指定があった場合、外部定義ファイル指定(外からよみこんだファイル) > style要素(h1など)指定 > style属性(cl…

positionについて

CSS

ボックスの配置を相対位置にするか絶対位置にするか指定します。 top、 bottom、 left、 rightを併用して、基準位置からの距離を設定する必要があります。 .nav { position: fixed; } fixedスクロールしても位置が変わらない。 staticデフォルト。配置位置を…

z-indexについて

CSS

.navbar-fixed-top { top: 0px; width: 100% !important; position: fixed; right: 0px; left: 0px; z-index: 100; } 数値指定 重なりの順序を整数で指定します。0が基準。大きいほど上に表示されます。 auto デフォルトです。 z-index を使用する要素には、…

list-style-position:

CSS

list-style-position: outside; list-style-position: inside; outsideはリスト左の●がリストとは独立した状態になる。 insideはリスト左の●がリスト内に表示される。

before after 疑似要素について

CSS

.container:after { display: table; content: "あとからつけ加える"; line-height: 0; } before疑似要素は要素の直前にプロパティを指定することができ、after疑似要素は要素の直後にプロパティを指定できます。

clear:

CSS

floatで左寄せor右寄せになった要素への回り込みを解除する。 clear: both; none デフォルト。回り込みが設定されている状態。 left float:left;された回り込みを解除。 right float:right;された回り込みを解除。 both float:left;``float:right;全ての回り…

CSS 各名称

CSS

div#id { color: #ff3377; } { ~ }:宣言ブロック div#id:セレクタ(選択子) 宣言ブロック+セレクタ:規則集合 color: #ff3377":宣言 color:プロパティ(特性) ff3377:値

グリッドシステムとは

CSS

グリッドシステムとは、画面を格子状に分割して、その分割毎に文字やレイアウトを当てはめていく方法のこと。 kube bootstrap responsive grid system foundation gumby semantic flurid など。 こちらでまとめてくださっています。

border

CSS

text { border: 1px solid rgba(255, 255, 200, 0.8); } solid:一本線 double:2本線 dashed:破線 dotted:点線 groove:窪み ridge:隆起 inset:box全体が立体的に窪む outset:insetの逆

ボタンの結合 bootstrap

<div class="btn-group"> <button class="btn btn-success"><i class="glyphicon glyphicon-heart">Top</i></button> <button class="btn btn-info"><i class="glyphicon glyphicon-heart">Info</i></button> </div> i 要素でアイコンを指定できます。 Components · Bootstrap Components · Bootstrap btn-groupクラスでボタンをグループ化できます。

marginやpadding、floatの注意点

CSS

インライン要素について margin、paddingの左右は効くが、上下は効かない。 width、heightが効かない。 border、backgroundは効く。 img、input、textareaは全てブロック要素と同様、marginやpaddingなどすべて効く。 marginの相殺について marginの相殺は左…