些細な日常

僕が提供する Blogger用テンプレートのImaginary への質問で、デザインが壊れて何とかして欲しいというのがあって原因の一つにブラウザがある。サイト作成のHTMLやCSSやJavaScriptのコードの一部に未対応だったり、場合によってアップデートでバグが起きて急に反映しなくなったりもする。 ブラウザの問題はいつか対応して来ると期待されるかぎり、待つしかないけれども、その間、テンプレートが壊れているのはどうにも耐えられないとなるとコードを変えるか多少の違和感ならばブラウザを除外してやり過ごせる。 今回、JavaScriptで訪問者のブラウザをOSと共にデバイス毎に判別して一部のコードを除外する方法を調べたので、纏めておきたい。 JavaScriptでブラウザとOSを判別する JavaScriptでブラウザが何かを取得する方法としてユーザーエージェント…

サイトのハンバーガーメニュー（≡）などのコンテンツを出し入れできる開閉ボタンをJavaScriptで作成するプログラムには二つの大きな部分がある。 要素のクリックを判定する コンテンツに表示変更を行う JavaScriptのプログラムではクリックを判定するHTMLの要素を取得した上で、イベントハンドラの onclick からさらに表示変更を行うコンテンツにCSSのdisplayのnone（非表示）のようなデザインのclassを classList プロパティのtoggle()（交互）メソッド、またはadd()とremove()（追加と削除）の二つのメソッドで付け替えて開閉ボタンを作成することができる。 目次 開閉ボタンのJavaScriptの基本的なソースコード ハンバーガーメニューのサンプル HTMLのonclick属性を使う場合 JavaScriptのaddEvent…

HTMLのマークアップをJavaScriptのプログラミングで書き換える、またはサイトのソースコードを置き換えるには innerHTML が良く使われる。 Element.innerHTML プロパティは、要素の子孫を記述する HTML 構文を設定または取得します。 element.innerHTML｜MDN｜Mozilla innerHTMLはElementインターフェースのDOMString（文字列）型のプロパティで、サイト上の要素内容のマークアップを表す。 JavaScriptでは他にも似たようなプロパティの innerText や textContent があって――どちらもNodeインターフェースのDOMString型に含まれる――プレーンテキスト（HTMLなどのマークアップ言語を含まない）を設定取得できる。双方にはCSSで非表示のコンテンツを知覚するかしな…