css/コーディング

css/コーディング

IE,Edgeでtransitionが効かない時

スクロールすると、ロゴのサイズをすっと小さくして邪魔にならないように追尾させる。 そんな処理を書いた時、IEとEdgeで確認したらtransitionが効いてなくて ロゴが一瞬消えて急にサイズが変わるという挙動になっていました。...
css/コーディング

【PageSpeed insights】サイト速度改善のためにしたこと

せっかくサイトを作ったのに、サイトスピードが激重くんだったら・・・ ということで、googleのPageSpeed Insightsの結果をもとにサイト速度改善に取り組んでみました。SEO対策としても、できる限りのことはしたいですよね...
css/コーディング

.htaccess覚書

どうも苦手だけど、避けて通れない.htaccessファイル・・・ その場しのぎじゃなくてちゃんと意味を理解してかかなきゃなぁ。 ということで少しづつ勉強していってます。 その覚書なので、ぼちぼち追記してゆきます。 ドメイ...
css/コーディング

文字ブロックに優しい処理

フォントに対する指定ってサイズとか色とか行間とか・・・そんな程度しか 知らなかったのですが、人様のコードなどを拝見していると 「それいいね!」っていう処理が施してあったりして、勉強になります。 ということでそんな処理まとめ...
css/コーディング

擬似要素で作る三角矢印2つ

擬似要素でちょっとした三角部分を作りたいとき、 rotateの角度とか考えるのが面倒なのでストックとして。 タイトルタグのデザイン的な三角 See the Pen 左右向き矢印 by hiro (@hiro555) on C...
css/コーディング

iziModalでsafariだけ表示がちらつく

自分のポートフォリオをsafariで見てみたら、モーダルを開いた時にチラツキが出ているのを発見。 モーダルの実装にはプラグインのiziModalを使用しています。 こんな感じ 解決策 .iziModal-ov...
css/コーディング

jQueryでアコーディオンメニュー

ワードプレスのスマホメニュー実装時、クリックでぱかっと上下に開くアコーディオンメニューについて色々悩んだのでメモ。 ワードプレスのアコーディオンメニュー 子メニューがある親要素のみ、">"マークを付ける。 メニューをクリッ...
css/コーディング

iframeの設定おぼえ書き

地図の埋め込みなどで使うiframeのcssについてメモ。 基本 iframe { max-width: 100%; max-height: 600px; } @media screen and (max-width:7...
css/コーディング

コーディング後、ブラウザごとに違う表示を修正する

コーディング中は基本的にchromeでしか表示確認していません。 「コーディング終わった!別ブラウザでもチェックだ!」と見てみると、まさかの表示崩れが・・・ みたいなことありますよね。 主にIEについて書いてますが、他のブ...
css/コーディング

【flex 】ヘッダーの高さをロゴ(可変)の高さに合わせてレスポンシブしたい

ヘッダーのコンテンツをフレックスで横並び。よくあるパターンですよね。 今回、そのよくあるパターンだと思ってたヘッダーでかなりハマってしまったので、備忘録として。 ヘッダーロゴ画像のサイズに合わせてヘッダーの高さを可変したい 実現し...
タイトルとURLをコピーしました