当サイトの記事には広告が含まれている場合があります

html・css

html・css

高さの違うli要素を横並びする方法

昔はfloatが主流でしたが、今はflexboxが主流。最初はわかりにくいけどliの横並びはflexboxの方が楽なので書き方を載せています。
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における...
スポンサーリンク