実装

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

  1. 認証付きダウンロード機能
    タグ: , , , , ,
    作成日:
    会員制をとらない制限付きダウンロード機能 ダウンロード認証とは PDF などの資料を普通にリンクを張るだけでおくと誰でも自由にダウンロードして持っていくことが出来ます. この機能はダウンロードした方の素性を知りたい場合に […]
  2. CSSで円(丸)を描き,内側にテキスト(文字)を入れる
    タグ:
    作成日:
    円をかいて,中に文字を入れるとはこのような絵のこと. 上 左 中央 右 下 CSS と HTML による円とテキストの記述方法 中の文字の位置指定のポイント CSS は以下のようになる. 円は position: rel […]
  3. チェックボックスのデザインをカスタマイズする
    タグ: , ,
    作成日:
    チェックの切り替えでデザインが変わるチェックボックス チェックボックスの切り替え時に、デザインを変更したい場合はないでしょうか。例えば会員登録情報の変更時に、登録済みの情報とは別の情報を選択した場合、変更したことが目に見 […]
  4. 【WordPress】リッチリザルト対応の自動パンくずリスト生成
    タグ: , , , , , , , , ,
    作成日:
    このところ,リッチリザルトの投稿が続いている. そこで今更ではあるが「パンくずリスト」についても書いてみる. 折角なので WordPress を使っている場合に自動でパンくずリストを生成する方法を書いてみよう. プラグイ […]
  5. Lightbox のような高級感を CSS のみで実現
    タグ: ,
    作成日:
    lightbox 風な動作を CSS のみで実現してみた. ライトボックスは画像の拡大表示で手軽に高級感を醸し出せるので使っているサイトは結構あると思う. 前回書いた記事は高級感というところまではいっていないので,さらに […]
  6. 【WordPress】新着情報で2週間以内の投稿記事に new をつける方法
    タグ: , , , ,
    作成日:
    WordPress を使っている企業のホームページなどでは新着記事に new というマーク(アイコン)をつけて目立たせたいと思う方もいるだろう. そういう場合にコピペで張り付けて動かすスクリプトを紹介する. 【CSS】テ […]
  7. 【CSS】簡単な下線の引き方【HTML】
    タグ:
    作成日:
    本文中のテキストや見出しに下線を付けたい時があると思います。text-decoration や border を利用してとても簡単に実装できますので、用途別に応じて解説します。 下線を引く まず、下線のサンプルを用意しま […]
  8. 【比較】ソースコード表示用ライブラリ
    タグ: , , , , , , , ,
    作成日:
    今回は wordpress のソースコード表示用ライブラリを選ぶときに一度は目にするであろう Prism.js、highlight.js、google-code-prettify について書きました。 上記3つは軽量のラ […]
  9. 「オフスクリーン画像の遅延読み込み」への対策
    タグ: , , , , , , ,
    作成日:
    PageSpeed Insights 対策の一環.他の対策は以下を見てください. Youtube の動画を複数埋め込みしたページの高速化 次世代フォーマットでの画像の配信 ウェブフォント読み込み中の全テキストの表示 第三 […]
  10. 【JavaScript】ボタンクリックでパスワード(テキスト)の表示・非表示を切り替える
    タグ: ,
    作成日:
    パスワードを入力する機会が増えた昨今では必須の機能と言える、パスワード表示ボタンのクリックでテキストの表示・非表示をjavascriptを使って切り替える方法を紹介します。 今回のサンプルコードではパスワード入力欄を作成 […]
  11. 【CSS】ボタンクリックでパスワード(テキスト)の表示・非表示を切り替える
    タグ: ,
    作成日:
    概要 ログイン画面で、パスワード表示ボタンをクリックするとパスワードが表示されるという機能は、現在では当たり前になっています。 ですが、もしパスワード表示ボタンが無く、表示・非表示が切り替えられなかったらとても不便に感じ […]
  12. 【JavaScript】目のマークでパスワードの表示を切り替える実装方法
    タグ: , ,
    作成日:
    目のマークでパスワードの表示非表示の切り替え実装 以前、表示・非表示ボタンでパスワードの表示を切り替える方法をご紹介しましたが、今回は目のマークを使用したパスワード表示非表示の実装方法をご紹介します。 javascrip […]
  13. 【CSS】目のマークでパスワードの表示を切り替える実装方法
    タグ: ,
    作成日:
    目のマークでパスワードの表示非表示を切り替える 目のアイコンをクリックすることでパスワードの表示非表示の切り替える方法を今回は CSS で実装しました。 javascript での実装は【JavaScript】目のマーク […]
  14. リッチリザルトの ロゴ への対応
    タグ: , , ,
    作成日:
    引き続き,リッチリザルトへの対応の記事. 弊社(レクタス)のロゴ Google ではロゴ | Google 検索セントラル | Google Developersで記述方法を説明している. ロゴと言っても https:/ […]
  15. 【CSSのみ】レスポンシブな多階層ハンバーガーメニューの実装方法(サンプル付き)
    タグ: , , , ,
    作成日:
    ハンバーガーメニューとは スマホでホームページを見ていると右上に「三」のようなマークを見ることが多いと思う. これを見かけがハンバーガーのようだからハンバーガーメニューと呼ぶようだ. 恐らく,箇条書きのメニューを遠くから […]
  16. Youtube の動画を複数埋め込んだページの高速化
    タグ: , , , ,
    作成日:
    PageSpeed Insights 対策の一環.他の対策は以下を見てください. オフスクリーン画像の遅延読み込み 次世代フォーマットでの画像の配信 ウェブフォント読み込み中の全テキストの表示 第三者コードの影響を抑えて […]
  17. 【レスポンシブ対応】CSSのみでの多階層ドロップダウンメニューを作成
    タグ: , , , , , , , ,
    作成日:
    javascript無しでナビゲーションメニューを作る 弊社のホームページはナビゲーションメニューとしてドロップダウンメニューを採用している. 当初は drawer.js を使用して作成されていた. しかし,このレスポン […]
  18. webページにチャット機能を入れる方法
    タグ: , , , , ,
    作成日:
    弊社のお客様で Smallchat を入れられている方がおられて,引き合いが来たことがあるということを聞いたので早速このサイトにも入れてみたのだが,PageSpeed Insights の点数が 30点ぐらい悪くなるので […]
  19. 【CSS】レスポンシブ(スマホ)対応横スクロールテーブル(表)
    タグ: , , ,
    作成日:
    (2021/03/18 文章追加とコード微修正) レスポンシブ対応のホームページの制作で面倒なものの一つに表(table)がある. 横に並んだものを縦にする CSS はよく目にするが,横長のものだと項目が多い場合に訳が分 […]
  20. 【Chrome】開発者ツールの使い方【デバッグ】
    タグ: , ,
    作成日:
    開発者ツールを使ったデバッグ方法 開発者ツールの各機能の使い方はわかったが、実際にどう使えばいいのかわからないという方向けに、javascript で作成した関数のデバッグを実践的に行います。 今回はボタンのクリックでパ […]
Pagetop