…gn ソースコード JavaScriptの解説 Today's BGM デモページを見る ウェブサイトのナビゲーションは訪れるユーザーにとって重要な要素です。この記事では、クリックでナビゲーションが横から出現する洗練されたグローバルメニューの実装方法を詳細に解説します。さらに、マウスホバー時に写真付きのサブメニューが開くエレガントなデザインの秘訣も明らかにします。 HTML、CSS、およびJavaScriptを使用して、使いやすく、魅力的なユーザーエクスペリエンスを提供するた…

…ML部分: 解説: JavaScript部分: 解説： 目的: 具体的な動作: ドロップダウンのためのCSS ナビゲーション全体の設定: 矢印の設定: 画像の設定: ナビゲーションのサブメニューの設定: レスポンシブデザイン: レイアウトのためのCSS 画像・リンクを貼る方法: コードの適用例: HTML CSS おわりに。 Today's BGM デモページを見る この記事では、ウェブサイトのナビゲーションを魅力的にする方法を紹介します。 画面左側のナビゲーションに、イメー…

…したりするためによく使用されます。 ブックマークレットは、JavaScriptで記述されたプログラムをブックマークのURLに追加することで利用できます。また、拡張機能よりも簡単に使用でき、自分で作成することもできます。 他に、ページ内の情報を取得したり、操作したりするためにも使用されます。たとえば、ブックマークレットを使用して、ブックマークボタンのないページをブックマークできます。 ブックマークレットは"bookmark" と "applet" を組み合わせた造語です。

…: 0; } /* JavaScript処理で、再生時クラスを付与させ非表示にするための指定 */ .videoWrapper.pv::after { display: none; } /*ボタンデザイン*/ #play { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 5rem; heig…

追従スクロール、サイドバーのCSSプロパティ値「sticky」を設定しても、うまくいかないときは親要素に「display: flex」を追加してみてください。 「display: flex」なし .hatena-module-custom-sticky { position: sticky; top: 40px; } うまくいってないテストページ 親要素に「display: flex」を指定していません。 「display: flex」あり #box2 { display: …

CONTENTS

document.addEventListener("DOMContentLoaded", () => { setUpAccordion(); }); /** * ライブラリ(GSAP)を使ってアコーディオンのアニメーションを制御します */ const setUpAccordion = () => { const details = document.querySelectorAll(".js-details"); const IS_OPENED_CLASS = "is-o…

.main #target1 { display :none; } はてなブログの１カラムテーマを記事別で２カラムに変更する方法 デモページ 1カラムのテーマで、記事ページを2カラムレイアウトに変更させてみました。 需要があるかわかりませんが…(^-^;)。 記事の内容によってページのカラムを出し分け出来るかな？？と思ったのがきっかけです。 このページ自体も、テストページのようになっています。 このブログで使っているのは1カラムの「Life」というテーマです。 Life - …

WebサイトにYouTube動画を埋め込むことは、訪問者に対して情報を視覚的に提供し、コンテンツの魅力を高めるために非常に重要です。 このツールは、YouTube動画の埋め込みコードを自動生成する便利なユーティリティです。ユーザーは動画URLを入力し、カテゴリタグを選択することで、選択したカスタマイズ後の埋め込みコードを取得できます。 ツールの使い方 動作チェック YouTube input#video-id-input { border-bottom: solid; bor…

…nablog.jp JavaScriptで対応 自サイト以外のリンクは別ウィンドウで開くコード document.addEventListener("DOMContentLoaded", function () { var links = document.querySelectorAll("a[href^='http']:not([href*='" + window.location.hostname + "'])"); links.forEach(function (li…

… <a href="javascript:void(0);" target="_new" onclick="myFunction();">カスタムアクション</a> rel属性: 「rel="noopener noreferrer"」はセキュリティを強化するための属性ですが、他にも以下のような値がrel属性に設定できます。 nofollow: 検索エンジンがこのリンクをフォローしないよう指示します。スパム対策に使用されます。 external: リンクが外部リンクであることを…

…、アジャックス）は、JavaScriptとXMLの略語で、ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法です。 Ajaxは、Webページを表示したまま、別のページや再読込などを伴わずにWebサーバ側と通信を行い、動的に表示内容を変更する手法です。（Twitterのいいねボタンなど） Ajaxは、JavaScriptの拡張機能やXML、DOMなどの既存の機能を組み合わせて実現し、ウェブの表現力を高め、コンテンツをリッチにします。ブラウザの…

…ために必要なCSSやJavaScriptコード、さらに外部スタイルシートとJQueryの呼び出し方法も詳しく解説されています。 デザインを崩さずに、読者に使いやすい検索機能を提供する方法について知りたい方にぴったりのガイドです。 詳細な手順やコードのポイントを追いながら、自分のブログに導入することができます。 おしゃれで使いやすい検索ボックスを実現したい方にぴったりの記事です。 Search box const avifImage = document.getElementB…

…></i>Copy JavaScript 数字 アイコン コード 説明 <h3><i class="fa-solid fa-0 fa-xs"></i></h3> 番号（見出し） <i class="fa-solid fa-1 fa-xs"></i> 番号（リスト） <i class="fa-solid fa-9 fa-xs"></i> ※0~9まで /* 目次用 */ .table-of-contents i.fa-solid.fa-xs { position: relati…

…まとめ 前ページではJavaScriptを使用して動画を制御する、基本の手法をご紹介しました。 さいごに、この記事のタイトルにあります、Webサイトに埋め込んだYouTube動画を音声オンで自動再生させる方法について、解説いたします。 通常はIFrame、Plyaer APIでのembed双方で、音声オンによる自動再生は制限されています。 ですので、今回の手法はあくまで個人的な主権 *1 で勝手に考え、利用しているやり方です。ですが皮肉にも、公式のリファレンスにその手順のヒン…

…のWebサイト統合とJavaScriptによる制御 YouTube動画のWebサイト統合とJavaScriptによる制御 IFrame Player APIの完全ガイド： エンドユーザーの要件 プレーヤーのビューポート IFrame APIをWebページで使うために必要な、JavaScriptコード 主な設定値 IFrame Player APIの完全ガイド - 出力例 *1Webサイト統合 ここまでで、YouTubeの動画をWebサイトに埋め込む方法までを学びました。 この…

…のWebサイト統合とJavaScriptによる制御 IFrame Player APIの完全ガイド： エンドユーザーの要件 プレーヤーのビューポート IFrame APIをWebページで使うために必要な、JavaScriptコード 主な設定値 IFrame Player APIの完全ガイド - 出力例 Page.4 IFrame Player APIを制御し、音声オンによる自動再生を実装する リファレンスのサンプルコード タネ明かし まとめ YouTube動画をWebサイトに…

…ata-lang="javascript"]::before { background: #efd81d; content: attr(data-lang) '\f3b9'; color:rgb(0,0,0); text-shadow: 1px 1px rgb(255,255,255); } strong { font-family:'Marcellus','kosugi maru'; } pre.code { font-weight: 600; } .btn span,.b…

…t: 55%; } JavaScripthtmlcss 『JSFiddle』を使用してWeb開発などのプロジェクトを共有したとき、埋め込み後にディスプレイ変更をする方法について。 デフォルト表示タブを"Result"などの任意に変更 ボックスのダークモード⇔ライトモード切り替え カスタムURLなど埋め込みコードの調整により、望む通りの表示に。 <iframe width="50%" height="570px" src="//jsfiddle.net/shianly/jgoa…

.entry div.footnote { margin: 0 auto; max-width: 720px; } .kontena { display: flex; justify-content: space-between; /* 左右に要素を配置 */ margin: 0 auto; max-width: 720px; } .page-numbers-container { display: flex; justify-content: center; } .yaga…

Java Script .entry-content pre::before { background: #e6ccff; } この記事では、WebアプリケーションのUX（ユーザーエクスペリエンス）向上のために重要な、クリップボードへのコピー機能を取り上げます。Async Clipboard APIを活用し、JavaScriptを使用した実装手順やコード例を通じて、初心者でも理解しやすくお届けします。さらに、セキュリティの向上にも焦点を当てます。 Async Clipboar…

…ome */ h5#JavaScript::after{font-family:'Font Awesome 6 brands';font-weight:400;content:'\f3b9';color:#efd81d;margin-left:.12em}h5#HTML::after{font-family:'Font Awesome 6 brands';font-weight:400;content:'\f13b';color:#f06429;margin-left:.12…

…音され、日本語では「JavaScript ライブラリ」と呼ばれることもあります。一般的には「jQuery（ジェイクエリー）」という表記がよく使われますが、「JavaScript ライブラリ」や「スクリプトライブラリ」とも表現されることがあります。 ※googleapis というドメインはGoogleに関連するAPIやリソースを提供するためのものです。その中でもGoogle が提供するjQuery ライブラリのバージョン3.5.1を取得しています。このスクリプトをウェブページに…

…でHTML、CSS、JavaScript コードを作成および開発できるサービスです。主な特徴: - ソースコードと表示を他のWeb サイトに埋め込んで共有できます。 - 外部の HTML、CSS、JS ライブラリを使用できます。 - 他のユーザーのソースコードを閲覧できます。 - 基本、無料です。使用するには？: 1. 登録が必要です。 [ https://codepen.io/ ] にアクセスし、SignUp 経由で登録します。 2. 保存、編集が可能です。 3. 「作成 …

…成できます。 複雑なJavaScriptやCSSは不要です。必要なのは「details」と「summary」タグのみです。タイトルは「summary」タグで簡単に設定し、内容は「details」タグ内に記述します。 「open」属性を追加することで、最初から展開された状態で表示することも可能です。この手法で、スタイリッシュなアコーディオンメニューを簡単に作成しましょう。 使用例 [ コードが閉じます ][ コードが開きます ] 解説 <details> <summary> <…

…ンcss（はてなの場合）に書き込む、といった使い方も可能です。 スタイルシートで読み込む仕様なので、複数のcssファイルを作成しておき、JavaScriptなどで動的に呼び出し、ページやカテゴリごとにデザインを変える、といったこともできるんじゃ？と思ったりしています。 が、なかなか着手できていないまま…ですが。 rubirubi.hateblo.jp 先日、こちらの記事でページURLによってテキストを書き換える、といったことを試しました。この方法をつかえばおそらく可能なはず？

…な？ URLの違い JavaScriptで特定のURLを識別 やりたいこと サイドバーの目次タイトルを、表示するページによって変更したい できるかな？ URLの違い https://rubirubi.hateblo.jp/entry/～ https://rubirubi.hateblo.jp/archive/～とりあえずは通常記事とアーカイブ（カテゴリー含む）で。 JavaScriptで特定のURLを識別 指定したURLのパスに基づいて、特定のテキストを表示するためには、Ja…

… html css javascript python sh ruby hatena おまけ 表組 項目名ありの表 引用記法 Syntax Highlighting of Source Code with Hatena Notation スーパーpre記法 >|| ～～ || 整形したHTMLなどのソースをそのまま表示（pre）'>|ここにコードの種類| ''''ここにコードを書く '||シンタックスハイライトをはてな仕様で利用するには、ソースコードを一度はてな記法で書いてか…

人間の都合で運命を翻弄されたチンパンジー、"ニム"の物語、第四夜へようこそ。さっそく進んでいきましょう。前回のはなしは下記に。 rubirubi.hateblo.jp 目次がちょっと多くなりました～ １つ１つは短いのでご安心を笑 人間の影、運命の轍 絶望の中で ボブの奮闘と執念 勝利の裏に潜む課題 牧場での日々 孤独な生活の始まり 振り回される運命 闘い続けるボブ 新たな希望と再会 勇気の瞬間 新たな友情の芽生え 再会。葛藤と選択 今宵はこの辺で それでは、始まり始まり～♪ …

View this post on Instagram A post shared by いなり寿子 (@heureux_yoppy) オープニング（茶番） １ 動物の自己鏡像認知：謎に包まれた能力の探求 ２ 動物行動学から脳神経科学まで ３ 自己鏡像認知を持つ動物の多様性と知られざる一面 ４ 動物と人間の自己意識の違い 自己意識の程度や種類 自己意識の発現や表現 自己意識の影響や効果 まとめ エンディング（茶番） 編集後記 オープニング（茶番） ※幕が開く・効果音※漫才ステ…