liと同じクラスの付いたdivを開閉する（メガメニュー）
- 2016.10.24
function megaMenu(){ $("#globalNav ul li").on('click', function(){ $('.megaMenu').hide(); $('div.' + $(this).prop('class')).slideDown('fast'); if ($(this).hasClass('active')) { $(this).removeClass('ac […]
Coding
要素の後ろにアイコンを付ける
- 2016.10.24
- アイコン
aタグに付ける別窓指定アイコンなど、要素の後ろに画像を入れたい場合に用いる。 span { position: relative; &:after { background: url(../images/common/icon-window.png) no-repeat; @include background-size(cover); bottom: 50%; content: ''; […]
表示内容をURL内のディレクトリ名を元に分岐する
ページのURLを取得し、「/」で分割を行い配列に格納する。 配列の中の指定の番号の文字列を比較する。 <?php $url = $_SERVER['REQUEST_URI']; $url = explode('/', $url); if (($url[3] == 'inquiry') or ($url[3] == 'estimate') or ($url[3] == 'company')) […]
リストスタイルのまとめ
- 2016.10.24
- まとめ
■最初のみ li:first-child ■最後のみ li:last-child ■リストが1つだけの時に適応 li:only-child ■交互に変更 li:nth-child(2n) { /* 偶数番目(2,4,6……番目) */ color: red; } li:nth-child(2n+1) { /* 奇数番目(1,3,5……番目) */ color: green; } ■特定のリストを変 […]
position: absoluteしている要素を中央寄せにする
- 2016.10.24
- absolute
.element { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
position: absoluteしている要素を上下中央に寄せる
- 2016.10.24
- absolute
.element { position: relative; top: 50%; transform: translateY(-50%); }
boaderにグラデーションを使う
- 2016.10.24
- グラデーション
左右向きのグラデーションを設定する。 要素の『before』でグラデーションを上に、 要素の『after』でグラデーションを下に設定する。 #content{ &:before{ content:""; display:block; height:1px; background: linear-gradient(to right, #ffffff 0%,$mainColor 60%,#ff […]
ページが印刷出来ないようにする（印刷時にページを白くする）
プリント機能を制御するのではなく、ページを真っ白にして対応する方法。 印刷時にはbodyの中身をdisplay: noneする。 @media print { body { display: none !important; } }
サーバ上のフルパスを調べる
- 2016.10.21
path.phpなどの名前で保存。 サーバ情報を確認したいディレクトリにアップロードし、ブラウザで接続する。 <?php echo __FILE__; ?>
サーバのphp情報を表示する
- 2016.10.21
info.phpなどの名前で保存。 サーバ情報を確認したいディレクトリにアップロードし、ブラウザで接続する。 <?php phpinfo(); ?>