はてなブックマーク

JavaScript(jQuery)でマウスドラッグによるスクロールを可能にする。 マウスドラッグスクロール DEMO コード jQuery拡張版 使用方法 jQuery拡張版 使用例 補足 マウスドラッグスクロール ※環境によっては正常に動作しない可能性があります。 当処理はjQueryを使用しています。 www.it-the-best.com DEMO 1 2 3 4 5 コード function mousedragscrollable(element){ let target; // 動かす対象 $(element).each(function (i, e) { $(e).mousedown(function (event) { event.preventDefault(); target = $(e); // 動かす対象 $(e).data({ "down": true, "mov

カテゴリー・パンくずリストを階層化表示にする 手順１：階層化表示にするための処理の追加 jQueryファイルの設置 階層化処理の追加方法１：外部ファイルを読み込む 階層化処理の追加方法２：コードを埋め込む 手順２：階層カテゴリーの入力 補足 カテゴリー一覧の階層カテゴリーの表示方法 パンくずリストをGoogleにクロールさせる方法 更新情報 投稿日：2019/10/23 当記事は、はてなブログのカテゴリーを階層化(多階層化)するためのカスタマイズ情報です。当記事のScriptを設置し、記事のカテゴリーを当記事に記してあるように階層化することで、カテゴリーモジュールとパンくずリストを階層化することができます。 カテゴリー・パンくずリストを階層化表示にする 完成イメージを見る 完成イメージ(パンくずリスト) 完成イメージ(カテゴリーリスト) はてなブログのカテゴリー・パンくずリストの表示を階層

【WEBデザイン】を美しくする | グラデーション linear-gradient() 使い方 グラデーションの方向 途中色 グラデーションをつくる linear-gradient() CSSのbackgroundプロパティに使用することのできる関数です。 使い方 background:linear-gradient(グラデーションの方向,開始色,途中色,終了色) 各指定値はカンマごとに入力します。 グラデーションの方向 向きによる指定 右に向かって変わる：to right 上に向かって変わる：to top 左に向かって変わる：to left 下に向かって変わる：to bottom 角度による指定 45度に向かって変わる：45deg 160度に向かって変わる：160deg 275度に向かって変わる：275deg 途中色 開始色と終了色の間に指定する色は省略も可能です。その場合は開始と終了の

投稿日：2019/5/30 Google Chromeで簡単にUIで設定値を変更できる 前回、Google Chromeの開発ツールが超便利という記事を書きました。 www.it-the-best.com 今回は、その開発ツールを使った簡単WEBデザインの紹介をします。 CSSのbox-shadowというプロパティをつかって要素にかげをつけるデザインです。記事タイトル下にある写真は青い影をつけています。 まず、開発ツールを開き影をつけたい要素を選択します。選択の仕方は、開発ツールのelements項目に表示されている要素ごとに選択することができます。下の画像の上半分がHTMLで要素が並んでいます。 ちなみに、開発ツールを開いたときにマウスが重なっている要素がフォーカスされます。 そして、stylesのelement.styleのカッコ内をクリックしてbox-shadowと入力します。 入力