物覚えの悪いプログラマの備忘録

このブログには私が試してみたことを記載していっております。忘れたときのために備忘録として利用しているだけですので、間違ったことを書いているかもしれません。 みなさまの役に立つ情報があれば幸いです。

css

要素をコピーしてから表示

<div class="alert alert-success" id="err"> <span id="err_coment"></span> <button type="button" data-dismiss="alert" class="close" data-ajax="false"> <span>×</span> </button> </div> クリックした場合 javascript //on click $("#err").clone(true).insertAfter("#err"); 結果 <div class="alert alert-success" id="err">…</div>

レスポンシブ 上下を入れ替える

css

display プロパティーの table-row-group や table-header-group などの値を応用すれば、上下の入れ替えが可能です。説明だと分かりづらいので、demo をご参照ください。 <html> <head> <meta charset="utf-8"> <title>demo</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .mod-groupContainer{} .mod-group1{} .mod-group1-inner{ padd…</meta></meta></head></html>

HTMLで縦書きは実現できるか - CSSでの実装とライブラリの活用

css

さまざまな言語表記法をサポートする仕様。 writing-modeプロパティで縦書きを指定できる。 writing-mode: tb-rl; /* IE独自仕様 */ writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -o-writing-mode: vertical-rl; -webkit-writing-mode: vert…

cssで幅を計算する

css

.menu li{ calc(100%/5); }

横幅や高さを自動で可変する

css

img { max-width: 100%; height: 100vw; /*正方形の画像の例ですが、縦横比3:2の画像であれば66.7vwとなります*/ }img { max-height: 100%; width: 100vh; /*正方形の画像の例ですが、縦横比3:2の画像であれば66.7vwとなります*/ }高さの指定に幅の数値を使…

cssで指定した要素の前後にコンテンツを入れる

css

E:before, E:after //画像を貼る content: url("../images/ico32.gif") ;//文字を入れる content: "●サンプル●"

CSSファイルbackground-imageのパスの指定

css

CSSファイル[style.css]からbackgroundでimgを呼び出す場合、 トップ(index.html)でなくstyle.cssから見た相対パスを指定する以下の階層の場合 index.html ├css/style.css └img/logo.gif ○background:url(../img/logo.gif); //ピリオド2つ ×background:ur…