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ページに数行コードを書き加えるだけで実現できるのでとても便利そうだ。 うまくいくと、必要…
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列表…
sample1(固定幅)sample2(可変幅)sample3(簡易レスポンシブ) 固定幅レイアウトにもリキッドレイアウトにも応用できるグリッドCSSを作ってみた。特徴は、 個々のカラム幅をパーセントで指定するので、固定幅レイアウトにもリキッドレイアウトにも応用で…
シンプルなHTMLでマウスオーバー画像をきりかえられる。
ソース表示だが、説明が加わるときには行番号が役立つかもしれない。私としては文法を分かりやすくするハイライト表示よりも、一部の文字列をカラーで強調したいので、ハイライト表示は不要かと思う。「軽いがいい」し... 行番号はolのリストマークなのでク…