Web技術 【CSS】***行目でテキストを省略(…)にする方法
バックエンドエンジニアの方から「サーバでは文字数指定ならできるんだけど、CSSで***行目で指定できる？」という問い合わせがあったので、久しぶりに下記のCSSを使って対応した。注意して欲しいのは、必ず下記の記述を全て指定すること。対応するブ...
Web技術 
生活 【おすすめ】ファストドクターは、深夜でも先生が来てくれる神サービスだった！
先日の夜、妻の体調がいきなり悪くなり、吐き気、下痢の症状が止まらなくなった。コロナか！？と一瞬焦ったが、妻は基本外出したりしていなかったので、それはないかと思った。妻に何か心当たりがあるか聞くと、「花粉症の薬を飲んだくらい」と返事があった。...
Web技術 【JavaScript】ラジオボタンがクリックされたら（changeイベント）を実装する場合
ラジオボタンがクリックされたら（changeイベント）を実装する場合は下記のような記述をすればOKだ。今回は、ラジオボタンがクリックされたら、バリューに設定されてるテキストをアラートで表示するという内容だ。表示結果 See the Pen ...
Web技術 【CSS】JS不要！チェックボックスを使って、モーダルを実装する方法
input typeのcheckboxを使って、モーダルを実装する方法を紹介する。JavaScriptのコーディングは不要なので、JSが苦手な人にもおすすめだ。簡単かつシンプルな、モーダルを実装したい場合は、検討しても良いだろう。表示結果 ...
Web技術 【JavaScript】Google Mapのマーカーとinfowindowのカスタマイズ方法
Google Mapのマーカーとinfowindowのカスタマイズを実装する機会があったのでメモしておく。実装内容は、下記2つだ。基本的にCSSは自由にコーディングしてもらってOKだ。google mapのマーカーをsvg画像に変更goog...
Web技術 【CSS】input type numberのスピンボタンを削除する方法
先日、ディレクターからinput type numberの矢印ボタンを削除できるかと聞かれたので、CSSで対応できると伝えた。その時のコードをメモしておく。input type numberのスピンボタン（フィールドエリアの右側に表示される...
読書 【ブックレビュー】「空腹」こそ最強のクスリは、健康でいたければ、読んで実践した方が絶対良い。
"「空腹」こそ最強のクスリ"という本を読んだ。著者は、医学博士の青木厚さんだ。結論は、16時間何も食べない時間を作ればOK。これだけだ。もっと詳しいく知りたければ、是非この本を購入すると良いだろう。この本に出会う前からプチ断食してたこの本に...
Web技術 【JavaScript】アコーディオンの作り方
JavaScriptでアコーディオンをコーディングしたので、メモしておく。今回は、ロード時にすべて閉じていて、dtタグをクリックするとプラスアイコンがマイナスアイコンに変化する仕様でコーディングした。表示結果 See the Pen mdO...
Web技術 【CSS】IEでflexとflex-directionを使った際に出現する謎の余白の対処法
現場でflexとflex-dicrection: columnを使った際に出現した謎の余白の対処方法をメモしておく結論は、flex-directionを指定した子要素にline-height:0%を設定すればOKだ。HTML<section...
Web技術 【CSS】ラジオボタンとチェックボックスのカスタマイズ方法
ラジオボタンとチェックボックスのカスタマイズ方法をメモしておく。基本的には、下記のコードを添付するだけでOKだが、場合応じて余白や色を設定するラジオボタンHTML<div class="radio"> <input type="radio"...