東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

css

cssでscale と tlanslale3dを一緒にかく

css

@-webkit-keyframes slideInViewport { from{ -webkit-transform: scale(1) translate3d(0, 0, 0); } to{ -webkit-transform: scale(0.8) translate3d(250px, 0, 0); } } 【参考URL】 http://stackoverflow.com/questions/20051832/how-to-scale-and-transla…

【CSS3】 transform プロパティを使って CSS アニメーションを実行した際に要素がガタつくのを防ぐ方法

css

.element{ -webkit-transform: translatez(0); // 又は -webkit-transform: translate3d(0,0,0); } 【参考URl】 http://memocarilog.info/webdesign/8304

【css】EDGE,IE,FIREFOXのみに適用されるcss

css

①IE @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* ここにIEのみ適用したいcssを */ }@-moz-document url-prefix() { /* ここにfirefoxのみ適用したいcssを */ }@supports (-ms-ime-align:auto) { .selector { prop…

【css】width: calcについて

css

レスポンシブで便利だったので。縮めても要素間のマージンが変わらない。 注意!!width:calcに設定した要素がdisplay:tableの場合は聞かないので注意!!!!! ①2カラムの場合。(containerのmax-width:952pxで間のmarginを常に40pxあける場合) <div class="container"> <div class="left"> </div> <div class="right"> </div> </div> .co…

html,css 整形ツール

https://syncer.jp/css-prettyprint

【css】ウィンドウサイズに合わせてボックスを上下左右の中心に表示する

中心にしたいボックスをdivとして div { position: absolute; top: 50%; left: 50%; width: 360px; /* 横幅 */ height: 210px; /* 高さ */ margin-left: -180px; /* マイナス「横幅÷2」 */ margin-top: -105px; /* マイナス「高さ÷2」 */ overflow: auto; /*…

googlemapをレスポンシブ対応に

googlemapをレスポンシブに対応させます。 ①css記述 .google-maps { position: relative; padding-bottom: 75%; // これが縦横比 height: 0; overflow: hidden; } .google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; heig…

positon fixedのヘッダ固定でページ内リンクのずれを解消

ヘッダの高さが100pxの場合、 <div id="header"> ヘッダーがはいります </div> <div id="content"> <a href="#link01">なんとか</a> <div name="link01" id="link01">かんとか</div> </div> ①cssで調整 #header { width: 100%; min-width: 960px; height: 100px; position: fixed; left:0; top:0; z-index: 10; } #content{ padding-top: 100px; } #link01 {…

bootstrap導入方法

今回初めてcssのフレームワークを使ってみた。結論から言うとかなり使いやすかった。 とりあえず導入方法を。 ①まずはbootstrapをダウンロードbootstrapをダウンロードすると ・css ・js ・fontsという3つのフォルダが内包したbootstrapフォルダになる。こ…

【css】text-indent:-9999pxでテキスト飛ばさなくてもテキスト非表示する方法

以下のcssを設定。こういうやり方もあるのね~~~ .sample{ text-indent:100%; white-space:nowrap; overflow:hidden; } 【参考URL】 http://delaymania.com/201209/web/textindent-9999/