HTML/CSS
-
[CSS] @media (hover: hover)
CSSの :hover 効果をスマホで無効化したい場合に @media (hover: hover) を使うとよさそう。 本当に大丈夫か確認するためのテストペー…
-
flatpickr 土日・祝日対応
flatpickr でもやってみた。 土日に色をつける 祝日も色をつける 土日祝は無効 明日以降のみ有効 ※jQuery使用 祝日データは Holidays J…
-
jQuery DateTimePicker 土日・祝日対応
jQueryプラグイン DateTimePicker で 土日に色をつける 祝日も色をつける 土日祝は無効 明日以降のみ有効 の実装例。 日時： 祝日データは …
-
HTML特殊文字変換ツール
ブログにプログラムコードを貼り付ける時、HTML特殊文字を変換するのが地味に面倒。 ググってブラウザで変換できるページを探したり、少量なら自力でぜんぶ入力したり…
-
Chromeでinline-block要素に:first-line使うと色が消える
Win10/Chrome79 では、display: inline-block 要素に対して :first-line を使ってフォントサイズ変えたりすると、ba…
-
iPhone/SafariのCSS:first-line問題
２つの要素を flex で横並びにする。 そして :first-line で１行目のフォントサイズを小さくする。 要素:first-line { font-si…
-
iPhone/SafariでAnimate.cssのflipInXがチラつく
iPhone/Safari で、Animate.css の flipInX が動いてる間、背景がチラチラ見えてしまっておかしい事があった。 Animate.cs…
-
bxSliderでクリックできない時
bxSlider は特に何もしないとスライド内に <a> を置いてもクリックできない（無視される）もよう。 v4.2.5 だとPCはクリックできない…
-
IE11で flex の align-items:center が min-height に対して効かない
<div class=”xxx”>あいうえお<div> この要素の高さを min-height で確保し、テキストを上下中央に配置するた…
-
【jQuery】bodyのスクロールを止める（レスポンシブ）
モーダルやメニューなどをライトボックス風に画面全体にオーバーレイ表示した時、 裏になったコンテンツ（<body>全体）をスクロールできないよう固定し…
-
HTML5 Canvas 座標と画面ピクセルの関係
HTML5 Canvas の moveTo / lineTo でぴったり1ピクセルの水平線・垂直線を描く時、座標を 0.5 ずらさないとボヤける。 Canvas…
-
【jQuery】textareaの複数行プレースホルダー
<textarea>のプレースホルダーに、やたら長い改行あり文章を使いたくなってしまった時。 プレースホルダーを複数行にする方法はあるようだが、 t…
-
【jQuery】色相環カラーピッカーを自作する
ブラウザJavaScriptで動く色相環つきカラーピッカーが欲しい。 Farbtastic Color Picker という素晴らしい実装が公開されているので、…
-
スライダーのA要素ドラッグがクリックになってしまったら
bxSliderなどのスライダー用ライブラリで、スライド1つをA要素にして、スライドをクリックしたら別ページに飛ばしたい時。 動いた～★と思ったら、マウスでドラ…
-
CSS装飾枠線例
ないよう ▼HTML <div class=”css-border”> <b class=”css-border1″><b>…
-
TABLEのTH,TDをCSSで縦並びにする
名前 山田 太郎 性別 男 年齢 19 → 名前 山田 太郎 性別 男 年齢 19 メールフォームプロCGIを使ったPCサイト（の問い合わせフォーム）をスマホ対…
-
半透明ボーダーhover
ICS Lab のサムネイル画像hoverがいい感じだなーと思って実装を調べたら、CSS3の border-color:rgba と transition:cu…
-
UL,LIリストマーカーに好きな文字を
ほげ ふが このように長い文字列でもちゃんとリストマーカーで字下げ（インデント）が効くようにします HTML <ul> <li>ほげ&l…
-
Fotoramaで画像にリンクを設定する
画像ギャラリー用のjQueryプラグインFotoramaで、画像にリンクを設定するやり方。 fotoramaの基本形から <div class=”foto…