些細な日常

サイトに 開閉ボタン でメニューを出した際のエフェクトとして外側を暗くすると見易い。そして開閉ボタンだけではなくて開いたメニューの範囲外、または新しく表示された領域外のクリックでも同じように閉じられると使い易い。どう作成するべきか、JavaScriptで実行するプログラムを考え...

サイトのハンバーガーメニュー（≡）などのコンテンツを出し入れできる開閉ボタンをJavaScriptで作成するプログラムには二つの大きな部分がある。 要素のクリックを判定する コンテンツに表示変更を行う JavaScriptのプログラムではクリックを判定するhtmlの要...

サイトの表示速度を上げるために画面に入らなくてまだ表示される必要のない画像を画面に入って表示される段階で初めてブラウザに読み込ませるという画像の遅延読み込みの方法がある。 個人的に訪問者だけではなくて検索エンジンにも画像が把握できて検索結果へのサイト評価のSEO対策（検索...

今までブログに 目次のジャンプリンク や フローティングの戻るボタン を設置して来た。htmlのリンクタグのaを使ってページ内のidを持たせた場所へ移動するように作成しているけど、ところが何もしないままのデザインだと一瞬で、目的地に着いてしまって周りが文字だらけならばそれこそ雰...

Bloggerの 2017年の公式テーマ はブログの最上段にフローティングバー（固定／スティッキーのメニューバー）が付いている。 ところがNotableを除いてContempoとSohoとEmporioはデザインが一般的ではない。トップやアーカイブなどのインデックスページ...

サイトに インラインsvg で描画する場合に線の両端や頂点のデザインを付ける三つの属性が使える。svg画像が実際にどんな形状で表示されるかとそれぞれの使い方のデザインについて考えてみたい。 stroke-linecapは線の両端の形状を指定する 三つの値を持っている...

pathは座標からどんな線でも数多く描ける インラインsvg で最も自由度の高いタグだ。 しかし使ってみると一本の線の開始点と終了点の両端がスムーズに繋がらない場合があって参った。 <svg xmlns="http://www.w3.or...

htmlのsvgタグを使うとサイトに描画できる。色も塗れるし、線や丸や四角や三角や弧を繋げて簡単なアイコンから非常に複雑な絵まで作成できる。マークアップは座標系の数値を入力して行われる。 svgはScalable Vect Graphics（スケーラブルベクターグラフィッ...

ボタンで複数の画像を切り替える方法 をやってみたら二枚目以降の画像の読み込みが遅くて参った。何とかならないかと調べてみたらhtmlの「rel="preload"」を使うと助かると分かった。ファイル毎のブラウザの先読みを可能にするからJavaScriptで後か...

サイトのボタンはhtmlのinputやbuttonとJavaScriptのonclickを組み合わせて実装できる。後者のプログラムが前者を押して発動するようになる。JavaScriptのonclickはイベントハンドラと呼ばれてhtmlのinputやbuttonの開始タグに他の...