html・css 高さの違うli要素を横並びする方法
昔はfloatが主流でしたが、今はflexboxが主流。最初はわかりにくいけどliの横並びはflexboxの方が楽なので書き方を載せています。
html・css
html・css 
html・css gulpでsassとpug動かしたら便利だった
gulpでsassとpug動かした時のメモです。サイト構築のディレクトリ構成は人によって異なるので、自分用のgulpfile.jsを書いています。
html・css iPhoneで下にスクロールするとナビゲーションが見えてしまう不具合を解消
スマホサイトで右上にメニューボタンがあり、メニューボタンをタップすると下に隠れているナビゲーションが表示されるサイトを作成しました。 そしたら、iPhoneで見ると不具合があるとの報告が！？ iPhoneで下にスクロールすると、ナビゲーショ...
html・css slick.jsでスライダーする要素にパディングをつけてはいけない
slickを使用してスライダーを何度か作成したことがあったんですが、スライダーの中身が画像だけじゃないときになかなかうまく動かなかったので、メモしておきます。 通常、slickを使用するときはスライドしたい親タグ(下記の例だと「slider...
html・css CSSのみでクリックしたら表示非表示する方法
よくサイドカラムにあるカテゴリー一覧で全部表示すると長くなるので一部だけ表示しておいて、＋ボタンをクリックすると全部表示する仕様のサイトを作成しました。 Jqueryを使えばできますが、CSSのみで作成する方法を模索し、CSSだけでブロック...
html・css spanタグ付きテキストでflexboxを使うとレイアウト崩れする
flexbox何度か使っていて、いまいちよくわからなかったんですが、最近になってやっとわかり始めたらすごく楽です。 floatと違ってclear:bothする必要ないですし、センタリングとかも簡単にできます。 下記サイトを参考にしていつもコ...
html・css GoogleWebフォントは読み込むだけで簡単に使える
最近Webフォント流行ってますよね。 海外だと英数字なのでWebフォントたくさんありますが、日本語Webフォントは限られますし、有料なことも多いです。 今回、数字部分だけWebフォントを使用するサイトのコーディングがあり、初めてGoogle...
html・css 簡単！スクロールでふわっと表示させる方法
スクロールしたらふわっと表示するサイトが増えていますよね。 なかなかそういうサイトをコーディングする機会がないのと、難しそうだったので躊躇していました。 でも、Animate.cssとWOW.jsを使えば簡単にできるんですね！ 「Anima...
html・css 電話リスティングコンバージョンタグをスマホ表示のみ埋め込む
レスポンシブデザインのものに、リスティングコンバージョンタグを埋め込んで欲しいという依頼がありました。 html側にYahoo、Googleから発行されたタグ埋め込みしてある状態で、電話部分にonclickタグを埋め込んで欲しいということで...
html・css IE11で背景画像が表示されない時の対処法
クライアントからIE11で背景画像が表示されていないので確認して欲しいとの連絡がきました。 IE11はマイクロソフトが現在もサポート対象としているバージョンです。 でも、比較的最新なので不具合が少ないように思っていました。 IE11における...