言語

言語 カテゴリー記事(更新日順)

  1. カテゴリ CSS, HTML, 言語
        【CSS】目のマークでパスワードの表示を切り替える実装方法
    目のマークでパスワードの表示非表示を切り替える 目のアイコンをクリックすることでパスワードの表示非表示の切り替える方法を今回は CSS で実装しました。 javascript での実装は【JavaScript】目のマーク […]
  2. カテゴリ CSS, HTML, JavaScript
        【JavaScript】目のマークでパスワードの表示を切り替える実装方法
    目のマークでパスワードの表示非表示の切り替え実装 以前、表示・非表示ボタンでパスワードの表示を切り替える方法をご紹介しましたが、今回は目のマークを使用したパスワード表示非表示の実装方法をご紹介します。 以下に動かせるサン […]
  3. カテゴリ HTML, 知識
        【WordPress】自分のサイトのURLが勝手に変換される場合の対応策
    ちょっとしたことだが,困ったことがあって解決したので備忘録として書いておく. WordPress は自分のサイトのURLをそのまま記述すると勝手に Aタグ で囲ってしまう仕様のようだ. これはビジュアルモードを使っていて […]
  4. カテゴリ CSS, HTML
        【CSS】レスポンシブ(スマホ)対応横スクロールテーブル(表)
    (2021/03/18 文章追加とコード微修正) レスポンシブ対応のホームページの制作で面倒なものの一つに表がある. 横に並んだものを縦にする CSS はよく目にするが,横長のものだと項目が多い場合に訳が分からなくなる. […]
  5. カテゴリ CSS, HTML, ホームページ
        【CSS】レスポンシブ対応縦スライダーテーブル(表)
    レスポンシブ対応のホームページの制作で面倒なものの一つに表がある. 以前,横に長いテーブルを左端を固定してスクロール(スライド)させるテーブルの作り方は紹介したが,今度は縦に長いテーブルで上端を固定して縦にスクロール(ス […]
  6. カテゴリ JavaScript, ホームページ, 知識
        FID (First Input Delay) の改善
    PageSpeed Insights 対策の一環.他の対策は以下を見てください. Youtube の動画を複数埋め込みしたページの高速化 オフスクリーン画像の遅延読み込み ウェブフォント読み込み中の全テキストの表示 次世 […]
  7. カテゴリ CSS, HTML, 知識
        【CSS】ボタンクリックでパスワード(テキスト)の表示・非表示を切り替える
    概要 ログイン画面で、パスワード表示ボタンをクリックするとパスワードが表示されるという機能は、現在では当たり前になっています。 ですが、もしパスワード表示ボタンが無く、表示・非表示が切り替えられなかったらとても不便に感じ […]
  8. カテゴリ CSS, HTML, ホームページ, 知識
        LCP (Largest Contentful Paint) について
    PageSpeed Insights 対策の一環.他の対策は以下を見てください. Youtube の動画を複数埋め込みしたページの高速化 オフスクリーン画像の遅延読み込み ウェブフォント読み込み中の全テキストの表示 次世 […]
  9. カテゴリ HTML, ホームページ
        CLS (Cumulative Layout Shift) の改善
    PageSpeed Insights 対策の一環.他の対策は以下を見てください. Youtube の動画を複数埋め込みしたページの高速化 オフスクリーン画像の遅延読み込み ウェブフォント読み込み中の全テキストの表示 次世 […]
  10. カテゴリ HTML, ホームページ
        「オフスクリーン画像の遅延読み込み」への対策
    PageSpeed Insights 対策の一環.他の対策は以下を見てください. Youtube の動画を複数埋め込みしたページの高速化 次世代フォーマットでの画像の配信 ウェブフォント読み込み中の全テキストの表示 第三 […]
  11. カテゴリ CSS
        「ウェブフォント読み込み中の全テキストの表示」問題の解決方法
    PageSpeed Insights 対策の一環.他の対策は以下を見てください. Youtube の動画を複数埋め込みしたページの高速化 オフスクリーン画像の遅延読み込み 次世代フォーマットでの画像の配信 第三者コードの […]
  12. カテゴリ CSS, JavaScript, ホームページ
        Youtube の動画の複数埋め込みをしたページの高速化
    PageSpeed Insights 対策の一環.他の対策は以下を見てください. オフスクリーン画像の遅延読み込み 次世代フォーマットでの画像の配信 ウェブフォント読み込み中の全テキストの表示 第三者コードの影響を抑えて […]
  13. カテゴリ CSS, HTML
        【CSSのみ】レスポンシブな多階層ハンバーガーメニューの実装方法(サンプル付き)
    ハンバーガーメニューとは スマホでホームページを見ていると右上に「三」のようなマークを見ることが多いと思う. これを見かけがハンバーガーのようだからハンバーガーメニューと呼ぶようだ. 恐らく,箇条書きのメニューを遠くから […]
  14. カテゴリ CSS, HTML
        【CSS】z-index が効かない場合の注意点
    z-index が効かない場合に z-index は要素の重ね合わせの順番を定義できます。 以下のように使いますが、数字が大きいほど上に表示されます。 #test { z-index: 1; } スタイルシートを使って、 […]
  15. カテゴリ CSS, HTML
        【レスポンシブ対応】CSSのみでの多階層ドロップダウンメニューを作成
    javascript無しでナビゲーションメニューを作る 弊社のホームページはナビゲーションメニューとしてドロップダウンメニューを採用している. 当初は drawer.js を使用して作成されていた. しかし,このレスポン […]
  16. カテゴリ CSS, php
        【wordpress】投稿の一覧ページにリセットされない連番を振る方法
    概要 wordpressで検索結果一覧を表示したいときや、人気度に応じてランキング形式で表示したいときなど、投稿タイトルの先頭に連番を振りたい場面があると思います。 しかし、1ページ目は問題なく番号が表示されますが、次ペ […]
  17. カテゴリ CSS, HTML
        【CSS】テキスト(見出し,タイトル)に横線をつける方法
    HTMLのコーディングで必要になり,ちょっと調べたので備忘録. 見出しなどの文字列の両側(両端,左右)に横線(ハイフン・横棒)をつけて,中央にもっていきたい場合がある. - を使うと ------ のように切れ切れになっ […]
  18. カテゴリ CSS, HTML
        CSSで円を描き,内側にテキストを入れる
    円をかいて,中に文字を入れるとはこのような絵のこと. 上左中央右下 中の文字の位置指定のポイント CSS は以下のようになる. 円は position: relative と相対指定にして,中の文字は position: […]
  19. カテゴリ CSS, HTML
        上部に固定メニューがある場合にページの途中にジャンプする方法
    ページジャンプの方法 ページ内の特定の場所に飛ぶ方法は昔は a タグの name 属性を使っていたが,今は id で飛ぶ方法をとることが多い. つまり,以前は <a href="#jump"&g […]
  20. カテゴリ CSS
        CSSだけで外部サイトへのリンクにマーク(アイコン)をつける方法
    リンクが外部に飛ぶことを示すアイコン(リンクアイコン)をつけると押すと別サイト(外部リンク)に行くことが分かりやすいので親切である. なぜ,このようなリンクアイコンを設けるのかという必要性の観点からすると「クリックすると […]
Pagetop