カテゴリー: HTML/CSS

HTML/CSS

videoタグで動画サムネイルがSafariで表示されない HTML/CSS

解決🐱✨ <video style=”width: 100%” preload=”metadata” playsinline=”” controls=”” controlslist=”nodownload” oncontextmenu=”return false;”> <source src=”{{ url($file_path) }}#t=0.001″ type=”video/ …

HTML/CSS

table CSS セルの指定 nth-child

  特定セルの指定     nth-childを利用します。 .total_tableクラスのtableの特定セルにメダルアイコンを表示させる実装で利用しました🐱✨ .total_table tr:nth-child(2) td:nth-child(1) { background-image: url(‘{{asset(./images/icon_1st.png’)}}’); …

HTML/CSS

table CSS テーブルを縞模様にする🦓 奇数と偶数行

  これを追加すればおーけ🐱✨   /* テーブル奇数行 */ table tr:nth-child(odd){ background-color:#f0f0f0; } /* テーブル偶数行*/ table tr:nth-child(even){ background-color:white; }          

HTML/CSS, トラブルシューティング

CSS スマホ時の画面端に余白が発生する

  レスポンシブのハンバーガーメニューなどで、スマホ時に余白が発生したり、メニューが余白にはみ出てしまっている場合にすぐに対応可能な力技     HTML <!doctype html> <html> <head> <meta charset=”utf-8″> <title>無題ドキュメント</title> …