Qitailangのブログ

Webデザイン、碁、Esperanto、自然農法的家庭菜園

WebDesign

はてなブログでスムーズ・スクロール

はてなブログでスムーズ・スクロールとページ・トップへの移動ボタンのメモ --- header <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> --- footer <div id="page-top"><a id="move-page-top"></a></div></link>

「全てのページにコメントフォーム」の改造

コチラのサイトで「全てのページにコメントフォーム」を設置できるツールがダウンロードできる。CMSやブログには大抵備わっているお決まりの機能だが、普通のHTMLページに数行コードを書き加えるだけで実現できるのでとても便利そうだ。 うまくいくと、必要…

連続するリスト項目を1〜8列に等間隔カラムで表示する。

sample1sample2(簡易レスポンシブ - 479px以下1カラム表示) ステップ1 リスト構造は下のように単純なものである。これを短いCSSで均等に横並びカラムで表示することにする。 <div id="item-list"> <ul class="cols-3"> <li>商品01</li> <li>商品02</li> <li>商品03</li> <li>商品04</li> <li>商品05</li> <li>商品06</li> </ul> </div> リスト項目を1列から8列表…

軽量かつ固定幅でも可変幅でも使えるグリッドCSS

sample1(固定幅)sample2(可変幅)sample3(簡易レスポンシブ) 固定幅レイアウトにもリキッドレイアウトにも応用できるグリッドCSSを作ってみた。特徴は、 個々のカラム幅をパーセントで指定するので、固定幅レイアウトにもリキッドレイアウトにも応用で…

UL画像メニューのマウスオーバー画像を切り替える

シンプルなHTMLでマウスオーバー画像をきりかえられる。

簡易ソース表示jQueryプラグイン

ソース表示だが、説明が加わるときには行番号が役立つかもしれない。私としては文法を分かりやすくするハイライト表示よりも、一部の文字列をカラーで強調したいので、ハイライト表示は不要かと思う。「軽いがいい」し... 行番号はolのリストマークなのでク…