カテゴリー別アーカイブ: CSS

VS CODEでCSSのプロパティの並び順を整える

コメントをどうぞ

いっつも感覚で書いてしまうのでバラバラな並び順のプロパティを自動で整形したいと思ってぐぐった。CSSCombってのがあるらしい

ということでVSCODEにインストール

そのまま使うと自分の理想通りのフォーマットにならないので、以下のサイトで整形ルールを決める。
https://csscomb.herokuapp.com/config

一応自分好みの形はこれ

{
    "remove-empty-rulesets": true,
    "always-semicolon": true,
    "color-case": "lower",
    "block-indent": "    ",
    "color-shorthand": true,
    "element-case": "lower",
    "eof-newline": true,
    "leading-zero": false,
    "quotes": "double",
    "sort-order-fallback": "abc",
    "space-before-colon": "",
    "space-after-colon": " ",
    "space-before-combinator": " ",
    "space-after-combinator": " ",
    "space-between-declarations": "\n",
    "space-before-opening-brace": " ",
    "space-after-opening-brace": "\n",
    "space-after-selector-delimiter": "\n",
    "space-before-selector-delimiter": " ",
    "space-before-closing-brace": "\n",
    "strip-spaces": true,
    "tab-size": true,
    "unitless-zero": true,
    "vendor-prefix-align": true
}

csscomb.jsonって名前で必要な箇所に保存。
WinだとC>User>.vscode>extensions>mrmlnc~~ >node_modules>csscomb>config>ここ

VK All in one Expansion Unit を利用していて固定ページの保存がうまくいかないとき

コメントをどうぞ

とある瞬間から管理画面の固定ページの保存が完了しなくなる。

何だろうと思っていたが、原因はタイトルのプラグインのカスタムCSSの入力箇所でコメントアウトが入っていたから。

参考はこちら。

ExUnit⇒CSSカスタマイズ でココメントアウトの「/*」が使えない

案外気づかないよなー

tabのコーディングをするときにデザイン影付きにされて焦る

コメントをどうぞ

そういうときは親要素にかかっている影のCSSがbox-shadowになっているかチェック。

もしそうならば、IE11は切り捨てる方向になるがdrop-shadowにすれば子要素の形にあわせて影をつけてくれる。

ちなみにPNGだと透明部分を無視して影をつけてくれる優れもの。

あとはtabの括りの要素をposition relativeにしてtop -50px的な感じてタブの高さ分をマイナスすれば影付きのタブのできあがーり。

svgがどうやってもIE11でレスポンシブにならないで余白ばっかり増えちゃうよ

コメントをどうぞ

imgタグでsvgを設置。
width =”希望の幅”
height=”auto”

基本はこれでOK
でもIE11だと小さかったり大きかったり。

zeplinで書き出したサイズのせいなのかなと思いPC版のサイズで書き出し直し。

なおる

だが、別の箇所で使っているときに結局サイズ感がおかしい

width heightともに数値で設定してもおかしい。

そんなときはsvgをエディタで開いてみてviewboxの値があるかチェックするといいのかも。

とりあえずsvg内のwidth heightと合わせて
viewbox=”0 0 widthの値 heightの値”でやってみたらレスポンシブに対応できた。

よーわからん

背景画像やグラデーションを簡単に文字でマスクできる

コメントをどうぞ

とあるサイトをみて初めて知りました。

利用するCSSは

・-webkit-background-clip:text; // これ設定しないとただ単に背景に画像やグラデがはいるだけ。
・-webkit-text-fill-color:transparent; //枠線も透明にしちゃう
・display :inline-block; // blockのままだと全体幅をみちゃう？

 

まみむめもまみむめもまみむめも

結局使うことになるImagemap

コメントをどうぞ

レイアウトがこだわりすぎた要素に対して、こだわりすぎたリンクを設置するときにはどうしてもつかうことになる。

今回お世話になったサイト。

◆Imagemapを生成してくれるサイト
https://www.image-map.net/

◆ImagemapにHoverの能力をつけるプラグインの説明サイト
https://cror.net/jquery/jquery-maphilight.html
見てる最中にサイトが落ちちゃった

◆レスポンシブ対応させるプラグインの説明サイト

イメージマップのあのめんどくさい座標マッピングをやってくれる超便利なジェネレータ

CSSでradioを修飾するときにlabelにidを振るのはエンジニアさんに苦笑いされる

コメントをどうぞ

ということでid振らずに何とかならないかね、ということで考えてみたらどうせソースが少し汚れてしまうならばlabel内にspan置けばいいじゃないと。

<label><input type="radio" name="name" value="hoge" />hoge<span class="radio-checked"></span></label>

こんなかんじか。
inputの後ろじゃないとCSS的に指定ができないので注意。

あとはCSSを（以下はSass）

label {
display: flex;
position: relative;
cursor: pointer;
padding-left: 25px;
margin-right: 20px;
.radio-checked {
position : absolute;
left: 0;
display : block;
height: 17px;
width: 17px;
border-radius: 17px;
border: 1px solid #000;
&::after {
position : absolute;
content : '';
width : 11px;
height : 11px;
border-radius : 100%;
left : 3px;
top : 3px;
background-color : transparent;
z-index : 1;
}
&::after {
}
}
input[type="radio"] {
display: none;
&:checked +.radio-checked {
border-color: #f00;
&::after {
background-color : #f00;
}
}
}
}

こんな感じか。
横並びにするのにflex利用したりしてるけどこの辺は好みで好きなようにできそう。

label idよりかはいいのかな。

IE11でtransitionがうまくいかないときは該当要素にflexを指定してる可能性があり？

コメントをどうぞ

Chrome、Firefox、Edgeでは問題なくtransitionアニメーションをしているのにIE11だとアニメーションが発動しなかった。

原因は該当要素にflexを指定しているせいでアニメーションがうまくいかなかった。cssでallにしてるせいかもしれないけど。

疑う箇所として記憶しておこう。

iphoneでtwitter widegetのiframeが横にはみ出るバグの修正

2件の返信

twitterのタイムラインwidegetを使うときにレスポンシブにしたいと思いぐぐるとよく書いてあるのが

<a class="twitter-timeline" data-width="100%" 

 

 

のくだり。

幅100%だから常に親に合わせる的設定なんだけど、iphoneで見ると親を無視してとんでもない幅になっている。

jsで親要素の幅を取得して、設定してもうまく行かず悩んでいたところ以下のサイトを発見。

iPhone7でTwitterのウィジェット（iframe）がはみ出す【解決】

簡単にいうとレスポンシブで利用しようとしている最大幅より大きい値の数値を強制的にwidthで設定をしてしまえば、ブラウザ側の解釈として大きすぎるのでwidthは無視、max-widthを参照しようとなるわけ。

でかいけつしました。

このアイデアを思いつくのが素晴らしいです。ありがとうございました。