code JS CSS HTML 使い方 jQuery UIを使わずにmodalを表示するロジックをメモ書きします。 ※modal, modalessウィンドウのサイズやカラーは適当 code JS // modal var modalWindow = (function() { return { open: function(modal) { var $cover = $("div.cov…

初期状態 見た目の修正 コメント欄を消す サイドバーを検索欄以外全て消す タイトルを消す フッターを修正する ナビゲーションバーの配置 お問い合わせフォーム デザインの追加(style.css) 画像フォルダ整理 ちょっとしたレスポンシブデザインに。 設定の修…

表示結果 no float code HTML CSS 総括 引き続きCSSの比較。今回はちょっと変わって、要素の左右寄せの話。 有名なサイトでChromeで要素を検証、とかするとよくfloat: leftとかclear: bothとか目にすると思います。 floatは画像の左右にテキスト回り込みをさ…

これは、デザイン追加時に「あれどうなるんだっけ？」って思う微妙なデザインを分かりやすく、視覚的に比較する(微妙に韻を踏んでる)シリーズです。 いちいち使い方とか結果をググるのも面倒だし、他で使われてるのを見ても効果が分かりづらかったりしますか…

どうも。 知っておくことでちょっとした落とし穴を回避出来そうな知識と少しだけ便利なテクニックをば。 divの中身を敷き詰める JSのイベント発火 イベントを登録してそれを発火させるとき、普通はクリックしたら～とかマウスオーバーしたら～という条件で発…

HTMLとCSSのみで便利な挙動と見た目を作ってみました。 比較的よく使うフォームの一部をCSSで装飾してやることによって、よりスタイリッシュさを出します。大事なことは、JSを一切利用していないこと。つまり、バグで動作しないリスクがないということです。…

どうも。 UIの一つとして使える、クリックしてラベル付けをする挙動をJS, CSSを用いて実装してみました。jQueryで書いててネイティブに起こすのは大変なのではてぶ上では実装してませんが、codepenとかですぐ試せるはずなのでお試しあれ。 HTML <div class="wrapper"> <div class="contents"> <div class="panel_area" id="panel_upper"><ul class="proposed"></ul></div> <div id="panel_lower"> <ul class="proposed"> <li></li></ul></div></div></div>

どうも。 前回に引き続き、はてなブログ上でコーディングする場合のやり方に触れつつ、テンプレ的にこれから私個人としても使いそうなデザインをメモっておきます。 おさらい 記事全体に共通のデザインを当てたい場合 個別の記事にスタイルを当てるには？ 簡…