実装

  1. レクタス
  2. 実装

実装タグ記事(更新日順)

  1. 開発者ツールで要素を書き換える方法
    タグ: ,
    更新日:
    Chromeの開発者ツールで書き換える方法 Chrome のデベロッパーツールで HTML を一時的に書き換える方法をご紹介します。HTML ファイルを直接書き換える前に、ブラウザ上で変更の実装前確認、変更箇所の特定を行 […]
  2. レスポンシブな多階層ハンバーガーメニューの作り方【CSSのみ】
    タグ: , ,
    更新日:
    スマホで現れるハンバーガーメニューとは スマホでホームページを見ていると右上に「三」のようなマークを見ることが多いと思う． これを見かけがハンバーガーのようだからハンバーガーメニューと呼ぶようだ． 恐らく，箇条書きのメニ […]
  3. 【CSS】ボタンクリックでパスワード(テキスト)の表示・非表示を切り替える
    タグ:
    更新日:
    【CSS】ボタンクリックでパスワード(テキスト)の表示・非表示を切り替える ログイン画面で、パスワード表示ボタンをクリックするとパスワードが表示されるという機能は、現在では当たり前になっています。 ですが、もしパスワード […]
  4. 【CSS】文字に下線(アンダーライン)を引く方法【HTML】
    タグ:
    更新日:
    CSS で 文字に下線(アンダーライン)を引く方法 本文中のテキストや見出しに CSS で下線を付けたり下線の位置を調整したいときがあると思います。アンダーラインは text-decoration や border を利 […]
  5. 【WordPress】リッチリザルト対応の自動パンくずリスト生成
    タグ: , , , , ,
    更新日:
    このところ，リッチリザルトの投稿が続いている． そこで今更ではあるが「パンくずリスト」についても書いてみる． 折角なので WordPress を使っている場合に自動でパンくずリストを生成する方法を書いてみよう． プラグイ […]
  6. 【WordPress】新着情報で2週間以内の投稿記事に new をつける方法
    タグ: , ,
    更新日:
    WordPress を使っている企業のホームページなどでは新着記事に new というマーク(アイコン)をつけて目立たせたいと思う方もいるだろう． しかし，プラグインはいろいろ面倒なので入れたくない． そういう場合にコピペ […]
  7. 認証付きダウンロード機能
    タグ: , , ,
    更新日:
    自社のホームページで CAD図面 やカタログ・パンフレットをダウンロードできるようにしていますか？ 会員制をとらない制限付きダウンロード機能 ダウンロード認証とは PDF などの資料を普通にリンクを張るだけでおくと誰でも […]
  8. CSS のみでアコーディオン表示する
    タグ:
    更新日:
    ウェブページでアコーディオン表示を使う場合は気をつけましょうというページを書いておいてどうなのかということだが，一応，javascript (jQuery) を使わない「アコーディオン表示」の書き方を説明する． アコーデ […]
  9. Lightbox のような高級感を CSS のみで実現
    タグ: ,
    更新日:
    lightbox 風な動作を CSS のみで実現してみた．(javascript や jQuery を使わないで) ライトボックスは画像の拡大表示で手軽に高級感を醸し出せるので使っているサイトは結構あると思う． 前回書い […]
  10. 【CSS】入れ子のリストを複数列に並べる
    タグ:
    更新日:
    入れ子のリストを複数列に並べる 下記のようなリストを画面幅に応じて複数列に並べます。 column-count で複数列に並べることもできますが、何列に並べるか指定する必要があり、画面幅に応じた列数に並べることはできませ […]
  11. 【JavaScript】目のマークでパスワードの表示を切り替える実装方法
    タグ:
    更新日:
    目のマークでパスワードの表示非表示の切り替え実装 以前、表示・非表示ボタンでパスワードの表示を切り替える方法をご紹介しましたが、今回は目のマークを使用したパスワード表示非表示の実装方法をご紹介します。 javascrip […]
  12. 【開発者ツール】紫の斜線の意味とは【Chrome】
    タグ: ,
    更新日:
    Chrome のデベロッパーツールで確認できる紫の斜線の意味とは 検証ツールでセレクタモードから要素を選択するとき、要素に紫の斜線が表示されているのを見たことがないでしょうか。以下の画像の紫の斜線部分です。 ボックスモデ […]
  13. サイトマップ
    【WordPress】サイトマップ生成をプラグインなしで実装
    タグ: , , , ,
    更新日:
    ふと，サイトマップのファイルを見てみたら，制御文字(タブとか)が XML の中に紛れ込んでいることに気が付いた． WordPress のプラグインで，最近 Google XML Sitemaps の更新があったな，と設定 […]
  14. 大きな再生ボタン
    VIDEO タグの動画で大きな再生ボタンを配置する方法
    タグ: , ,
    更新日:
    動画をホームページに置きたい場合，Youtube を利用するのが手軽ではあるが，自分のサイトにファイルを置きたい場合の方法を書く． 再生ボタンを中心に配置した VIDEO タグでの動画表示 Chrome で video […]
  15. CORS エラーが出たときの対処法
    タグ:
    更新日:
    No 'Access-Control-Allow-Origin' header is present on the requested resource. が出たときの対処法 font-awesome の呼び出し時、上記 […]
  16. Youtube 動画の埋め込みで遅いページの高速化
    タグ: , , , ,
    更新日:
    Youtube の複数の動画を埋め込むとページ自体が非常に遅くなる(重い)時の高速化(軽量化)の方法． 原因は iframe で各動画を読み込みに行くため． 「youtube 複数 埋め込み 高速化」「youtube 複 […]
  17. 【レスポンシブ対応】メガメニューの簡単な作り方【CSSのみ】
    タグ: ,
    更新日:
    【レスポンシブ対応】CSSのみでのドロップダウンメニューを作成 のページに「メガメニュー」で検索して辿り着く人がいるので，メガメニューという名前がついているドロップダウンメニューの作り方も合わせて記事にする． (2020 […]
  18. 【WordPress】目次自動作成スクリプト改良版【javascript少な目】
    タグ: , ,
    更新日:
    以前，「【WordPress】目次を自動生成するには」という目次自動生成スクリプトを紹介したことがあった． 今回，「A タグの href に javascript:void(0); とか入れんな」という突っ込みを Pag […]
  19. 【CSS】目のマークでパスワードの表示を切り替える実装方法
    タグ:
    更新日:
    目のマークでパスワードの表示非表示を切り替える 目のアイコンをクリックすることでパスワードの表示非表示の切り替える方法を今回は CSS で実装しました。 javascript での実装は【JavaScript】目のマーク […]
  20. CSSで目のマークを作成する
    タグ:
    更新日:
    パスワード表示非表示用、CSSのみで目のマークを作成する 画像の目のマークと比べるとかなりシンプルになりますが、できる限り簡単に CSS のみで実装できる目のマークを作成しました。パスワードの表示、非表示のために用いられ […]
  21. CSSで二重の目のマークを作成する
    タグ:
    更新日:
    CSSで二重の目のマークを作成する方法 CSSで目のマークを作成するで作成した目のマークを二重にしました。作成手順はCSSで目のマークを作成する手順に加えて実装方法を後述します。 サンプルコード HTML <div […]
  22. 【CSS】矢印の中に文字を書く方法
    タグ:
    更新日:
    矢印の中に文字を書く実装方法 今回は矢印の上に文字を書く方法を紹介します。図形の上に文字を書く時の参考にしていただければと思います。矢印も CSS のみで作成していますので、その方法も併せてご紹介します。 サンプルコード […]
  23. 【CSS】マーカー風の下線(アンダーライン)を引く方法
    タグ:
    更新日:
    マーカー風の下線(アンダーライン)を引く css では【CSS】簡単な下線(アンダーライン)の引き方【HTML】にあるように簡単に下線の実装ができます。今回実装したいマーカー風の下線(アンダーライン)ですが、少し css […]
  24. 【Chrome】開発者ツールの使い方【デバッグ】
    タグ: ,
    更新日:
    開発者ツールを使ったデバッグ方法 開発者ツールの各機能の使い方はわかったが、実際にどう使えばいいのかわからないという方向けに、javascript で作成した関数のデバッグを実践的に行います。 今回はボタンのクリックでパ […]
  25. 【レスポンシブ対応】CSSのみでの多階層ドロップダウンメニューを作成
    タグ: , , , , ,
    更新日:
    javascript 無しでナビゲーションメニューを作る 弊社のホームページはナビゲーションメニューとしてドロップダウンメニューを採用している． 当初は drawer.js を使用して作成されていた． しかし，このレスポ […]
  26. 【WordPress】アイキャッチ画像を設定しないでもサムネイルを表示する方法
    タグ: , ,
    更新日:
    WordPress でいちいちアイキャッチ画像を設定するのは面倒くさいと思ったことはないだろうか． 「アイキャッチ画像 いらない」で検索している人がかなり多い．やはり面倒なのだろう． ただ，テーマによっては様々な場所でア […]
  27. 【CSS】FlexBoxで縦に中央揃えさせる方法
    タグ: ,
    更新日:
    FlexBoxで縦に中央揃えさせる方法 FlexBox を使って要素を縦並びかつ、中央揃えさせる方法を紹介します。 例は以下の通りです。開発者ツールから FlexBox で要素を縦に中央揃えさせていることも確認いただけま […]
  28. 【CSS】五角形の矢印を作成する
    タグ:
    更新日:
    CSSで五角形の矢印を作成する方法 状態の遷移を表す際などに用いられる、五角形の矢印をCSSで簡単に実装する方法をご紹介します。 以下、五角形の矢印のサンプルです。 HTML <div class="ar […]
  29. サーチコンソール(速度)
    「オフスクリーン画像の遅延読み込み」への対策
    タグ: , , , , , ,
    更新日:
    PageSpeed Insights の「改善できる項目」の中の「オフスクリーン画像の遅延読み込み」で 「オフスクリーンの非表示の画像は、重要なリソースをすべて読み込んだ後に遅れて読み込むようにして、操作可能になるまでの […]
  30. 【CSS】レスポンシブ(スマホ)対応横スクロールテーブル(表)
    タグ: , , ,
    更新日:
    (2021/03/18 文章追加とコード微修正) レスポンシブ対応のホームページの制作で面倒なものの一つに表(table)がある． 横に並んだものを縦にする CSS はよく目にするが，横長のものだと項目が多い場合に訳が分 […]
Apache Chrome 拡張機能 Git PageSpeed Insights SEO WordPress Youtube z-index お問い合わせフォーム アウトライン アナリティクス アニメーション アンケートフォーム ウェビナー キーボード サーチコンソール サーバー管理 スライダー セミナー タグマネージャー テレワーク データベース ヒアリング ヒアリングシート プラグイン ページ閲覧解析 メール配信 リッチリザルト レスポンシブ対応 ログ解析 分析 制作例 勉強会 商品企画 商談 営業 営業力 営業支援システム 失注 実装 検索順位 検索順位チェックツール 構造化データ 追跡 開発者ツール
Pagetop
​