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

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

css

【sass】指定のnth-childを繰り返し処理

下記のsassで @for $i from 0 through 3 { .effect_ul li:nth-child(#{$i + 1}) { margin-top:0; } } 以下のcssが出力される .effect_ul li:nth-child(1){ margin-top;0; } .effect_ul li:nth-child(2){ margin-top;0; } .effect_ul li:nth-child(3){ margin…

IEでCSS3 animationがカクカクする

css

cssで動かす要素に transform: rotate(0.0001deg);https://anopara.net/2016/12/23/firefox%E3%82%84ie%E3%81%A7css3-animation%E3%81%8C%E3%82%AB%E3%82%AF%E3%82%AB%E3%82%AF%E3%81%99%E3%82%8B%E4%BB%B6/

【css】スマホ 横向きでのメディアクエリ

css

@media screen and (max-width: 736px) and (orientation: landscape){ }

sass メモ

ネスト #main { section { margin-bottom: 50px; h1 { font-size: 140%; } p, ul { margin-bottom: 1.5em; } p.notes { color: red; } } } 子孫セレクタ以外のセレクタのネスト #main { section { + section { margin-top: 50px; } > h1 { font-size: 140%; …

FireFoxやIEでpaddingにパーセント(%)がきかない

縦のpaddingにパーセントをかけるとなぜかきかない。下記の対処で解決https://y-com.info/contents/?p=4957

【css】縦書き

css

div { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }【参考URL】 https://qiita.com/RinoTsuka/items/3e3eaaba8cddb6ff08e9

slick.jsでのスライドのガター(マージン)あけるとき

以下のサイトでcssをhttp://ithat.me/2016/10/17/how-to-use-slick-jquery-plugin

cssの疑似要素 before afterのcontentで改行したい

css

contentで\A .selector{ content: 'LINE@で\A友達追加'; white-space:pre; }

スマホを横にしたのみスタイル適用のメディアクエリ

@media only screen and (max-device-width: 736px) and (orientation: landscape) { } 【参考URL】 https://www.gekkoseisaku.com/blog/web-design/1933/

【jquery】CSSTransitionのイベントが終わった時に何かの処理をする

https://qiita.com/roana0229/items/b1d3ac9038ff59ce1e0f

CSSスプライト画像 ジェネレーター

css

https://www.toptal.com/developers/css/sprite-generator

LOADING中はスクロール禁止

html { overflow-y: scroll; } body{ position: fixed; overflow-x: hidden; } .wrap { overflow: hidden; } #loading { position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: #000; text-align: center; display: table; color: #fff…

【wordpress css】contact form7のチェックボックススタイリングcss

デフォルトのcheckboxはdisplay: noneで消す。 .wpcf7-list-item-labelの疑似要素beforeでボックスを、afterで長方形を斜めにしてcheckマークをつくる #wpcf7-f16-p4-o1 input[type="checkbox"]{ display: none; } #wpcf7-f16-p4-o1 label{ cursor: pointer;…

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/