css/コーディング

css/コーディング

クリックでモーダル表示 + overflow:scroll;

表題の通りです。ボタン等をクリックするとモーダルが表示され、もしモーダルの中身が多い場合はスクロール。のメモ。 クリックしてね ...
css/コーディング

swiperでスライダー。ieでもズームアップ時ちかちかしない。

個人的にトップスライダーでよくあるのが、画像がズームアップしながらフェードで画像が切り替わるという仕様。そのフェード×ズームアップの仕様が、ieだと画像がはみ出してちかちかするんですよね。 ど...
css/コーディング

スクロールでふわっとフェードするアニメーション

ウェブページをスクロールすると文字や画像がふわっと表示されたらなんとなくオシャレ。実装もjQueryを使って比較的かんたんにできます。先にコードからどうぞ。 HTML <div clas...
css/コーディング

CSSでぱらぱらマンガ風アニメーション(2コマ・4コマ)

ウェブページのワンポイントに、ちょっとした画像のアニメーションがあるとかわいいですよね。JSで画像を切り替えるのもいいですが、どうせならCSSがいい。ということでCSSで実装しました。clissさん...
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 h...
css/コーディング

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

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