言語

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

  1. 【WordPress】サイトマップ生成をプラグインなしで実装
    【WordPress】サイトマップ生成をプラグインなしで実装
    カテゴリ: php, ホームページ
    更新日:
    ふと,サイトマップのファイルを見てみたら,制御文字(タブとか)が XML の中に紛れ込んでいることに気が付いた. WordPress のプラグインで,最近 Google XML Sitemaps の更新があったな,と設定 […]
  2. VIDEO タグの動画で大きな再生ボタンを配置する方法
    VIDEO タグの動画で大きな再生ボタンを配置する方法
    カテゴリ: HTML, JavaScript
    更新日:
    動画をホームページに置きたい場合,Youtube を利用するのが手軽ではあるが,自分のサイトにファイルを置きたい場合の方法を書く. 再生ボタンを中心に配置した VIDEO タグでの動画表示 Chrome で video […]
  3. CORS エラーが出たときの対処法
    CORS エラーが出たときの対処法
    カテゴリ: CSS, 知識
    更新日:
    No 'Access-Control-Allow-Origin' header is present on the requested resource. が出たときの対処法 font-awesome の呼び出し時、上記 […]
  4. 【レスポンシブ対応】メガメニューの簡単な作り方【CSSのみ】
    【レスポンシブ対応】メガメニューの簡単な作り方【CSSのみ】
    カテゴリ: CSS, HTML
    更新日:
    【レスポンシブ対応】CSSのみでのドロップダウンメニューを作成 のページに「メガメニュー」で検索して辿り着く人がいるので,メガメニューという名前がついているドロップダウンメニューの作り方も合わせて記事にする. (2020 […]
  5. 「リンクに識別可能な名前が指定されていません」と言われた時
    「リンクに識別可能な名前が指定されていません」と言われた時
    カテゴリ: HTML, ホームページ
    更新日:
    新しいPageSpeed Insights 対策. PageSpeed Insights で ユーザー補助 という種別の中に「リンクに識別可能な名前が指定されていません」という文言が出てくるときがある. 「リンクに識別可 […]
  6. 「背景色と前景色には十分なコントラスト比がありません」と言われた時
    「背景色と前景色には十分なコントラスト比がありません」と言われた時
    カテゴリ: CSS, ホームページ, 知識
    更新日:
    新しいPageSpeed Insights 対策. PageSpeed Insights で ユーザー補助 という種別の中に「背景色と前景色には十分なコントラスト比がありません」という文言が出てくるときがある. 「背景色 […]
  7. 【WordPress】目次自動作成スクリプト改良版【javascript少な目】
    【WordPress】目次自動作成スクリプト改良版【javascript少な目】
    カテゴリ: JavaScript, php, ホームページ, 知識
    更新日:
    以前,「【WordPress】目次を自動生成するには」という目次自動生成スクリプトを紹介したことがあった. 今回,「A タグの href に javascript:void(0); とか入れんな」という突っ込みを Pag […]
  8. 【CSS】目のマークでパスワードの表示を切り替える実装方法
    【CSS】目のマークでパスワードの表示を切り替える実装方法
    カテゴリ: CSS, HTML, 言語
    更新日:
    目のマークでパスワードの表示非表示を切り替える 目のアイコンをクリックすることでパスワードの表示非表示の切り替える方法を今回は CSS で実装しました。 javascript での実装は【JavaScript】目のマーク […]
  9. 【CSSのみ】ヘルプボタンを作成する
    【CSSのみ】ヘルプボタンを作成する
    カテゴリ: CSS, HTML
    更新日:
    画像を使用しないヘルプボタン 【CSSのみ】ヘルプボタンをクリックしたときに説明を表示する方法 では、ヘルプボタンは画像を使用していましたが、CSSのみでヘルプボタンを作成することができたのでご紹介します。チェックボック […]
  10. CSSで目のマークを作成する
    CSSで目のマークを作成する
    カテゴリ: CSS, HTML
    更新日:
    パスワード表示非表示用、CSSのみで目のマークを作成する 画像の目のマークと比べるとかなりシンプルになりますが、できる限り簡単に CSS のみで実装できる目のマークを作成しました。パスワードの表示、非表示のために用いられ […]
  11. CSSで二重の目のマークを作成する
    CSSで二重の目のマークを作成する
    カテゴリ: CSS, HTML
    更新日:
    CSSで二重の目のマークを作成する方法 CSSで目のマークを作成するで作成した目のマークを二重にしました。作成手順はCSSで目のマークを作成する手順に加えて実装方法を後述します。 サンプルコード HTML <div […]
  12. 【CSS】矢印の中に文字を書く方法
    【CSS】矢印の中に文字を書く方法
    カテゴリ: CSS, HTML
    更新日:
    矢印の中に文字を書く実装方法 今回は矢印の上に文字を書く方法を紹介します。図形の上に文字を書く時の参考にしていただければと思います。矢印も CSS のみで作成していますので、その方法も併せてご紹介します。 サンプルコード […]
  13. 【CSS】マーカー風の下線(アンダーライン)を引く方法
    【CSS】マーカー風の下線(アンダーライン)を引く方法
    カテゴリ: CSS, HTML
    更新日:
    マーカー風の下線(アンダーライン)を引く css では【CSS】簡単な下線(アンダーライン)の引き方【HTML】にあるように簡単に下線の実装ができます。今回実装したいマーカー風の下線(アンダーライン)ですが、少し css […]
  14. 【Chrome】開発者ツールの使い方【デバッグ】
    【Chrome】開発者ツールの使い方【デバッグ】
    カテゴリ: JavaScript, システム, 知識
    更新日:
    開発者ツールを使ったデバッグ方法 開発者ツールの各機能の使い方はわかったが、実際にどう使えばいいのかわからないという方向けに、javascript で作成した関数のデバッグを実践的に行います。 今回はボタンのクリックでパ […]
  15. 「リンクはクロールできません」と言われた時
    「リンクはクロールできません」と言われた時
    カテゴリ: HTML, JavaScript, ホームページ, 知識
    更新日:
    引き続き,新しいPageSpeed Insights 対策. PageSpeed Insights で SEO という種別の中に「リンクはクロールできません」という文言が出てくるときがある. 「リンクはクロールできません […]
  16. 「不適切なアスペクト比の画像が表示されています」と言われる時
    「不適切なアスペクト比の画像が表示されています」と言われる時
    カテゴリ: CSS, HTML, ホームページ, 知識
    更新日:
    PageSpeed Insights の結果の「おすすめの方法」の中で 「不適切なアスペクト比の画像が表示されています」 と言われる時. img タグには正しい width height を指定しているのになぜか「アスペ […]
  17. 「タップ ターゲットのサイズが適切に設定されていません」と言われるとき
    「タップ ターゲットのサイズが適切に設定されていません」と言われるとき
    カテゴリ: CSS, 知識
    更新日:
    PageSpeed Insights の仕様がまた変わっていたので,新しいPageSpeed Insights 対策. 新たに「ユーザー補助」「おすすめの方法」「SEO」の項目が現れた. その中の SEO の中に「タップ […]
  18. URLのルート相対パスとは
    URLのルート相対パスとは
    カテゴリ: HTML, ホームページ, 知識
    更新日:
    ホームページを作成する際,URL のパス(Path)をどうするかという問題がある. パスとはそのファイルまでのディレクトリ(フォルダ)を示すもので,これによってファイルがどこにあるかが分かる. ホームページを制作する際に […]
  19. スキップリンクとは(Skip Link)
    スキップリンクとは(Skip Link)
    カテゴリ: CSS, ホームページ, 知識
    更新日:
    WordPress の公式テーマ登録時に知ったことを少し書いてみる. テーマを投稿するとレビュアーからのダメ出しが来る. 自分の時間もあるだろうに大変ありがたいことである. そこで指摘されたものにスキップリンクというもの […]
  20. 擬似要素 focus-within を使う時に気を付けること
    擬似要素 focus-within を使う時に気を付けること
    カテゴリ: CSS, HTML, ホームページ
    更新日:
    先日,「キーボードナビゲーションの実現」という記事を投稿した後に気づいたのだが,擬似要素 focus-within を使って,ドロップダウンメニューを制御すると問題があることが判明した. 条件は少し限定されるが,それはド […]
  21. キーボードナビゲーションの実現
    キーボードナビゲーションの実現
    カテゴリ: HTML, ホームページ, 知識
    更新日:
    「Skip Link コンテンツをスキップ というナビゲーション」という記事でスキップリンクのことに言及したが,そもそもホームページはキーボードで全部操作出来るべきだという考えがあり,それがキーボードナビゲーションという […]
  22. 【CSS】簡単なアニメーションの作り方【transform】
    【CSS】簡単なアニメーションの作り方【transform】
    カテゴリ: CSS, ホームページ
    更新日:
    アニメーションについて書いた他の記事は以下で. 【CSS】簡単なアニメーションの作り方【transition】 【CSS】簡単なアニメーションの作り方【animation】【keyframes】 CSS だけを使ってもア […]
  23. 【CSS】画像クリックでポップアップウィンドウ(拡大画像)を表示する方法
    【CSS】画像クリックでポップアップウィンドウ(拡大画像)を表示する方法
    カテゴリ: CSS, HTML, ホームページ
    更新日:
    javascript を使用しないで CSS のみでウィンドウ・レイヤー(拡大・縮小)を表示する方法について,いろいろ調べていたが,うまく見つからなかったので考えて作ってみた.(当然だが HTML は使っている.) モー […]
  24. 【レスポンシブ対応】CSSのみでの多階層ドロップダウンメニューを作成
    【レスポンシブ対応】CSSのみでの多階層ドロップダウンメニューを作成
    カテゴリ: CSS, HTML
    更新日:
    javascript 無しでナビゲーションメニューを作る 弊社のホームページはナビゲーションメニューとしてドロップダウンメニューを採用している. 当初は drawer.js を使用して作成されていた. しかし,このレスポ […]
  25. 【CSS】簡単なアニメーションの作り方【animation】【keyframes】
    【CSS】簡単なアニメーションの作り方【animation】【keyframes】
    カテゴリ: CSS, ホームページ
    更新日:
    今まで CSS で簡単にアニメを作れるという話を書いてきた. 【CSS】簡単なアニメーションの作り方【transition】 【CSS】簡単なアニメーションの作り方【transform】 CSS だけを使ってもアニメーシ […]
  26. 【CSS】簡単なアニメーションの作り方【transition】
    【CSS】簡単なアニメーションの作り方【transition】
    カテゴリ: CSS, ホームページ
    更新日:
    アニメーションについて少し書いてみた.続きは以下で. 【CSS】簡単なアニメーションの作り方【transform】 【CSS】簡単なアニメーションの作り方【animation】【keyframes】 CSS だけを使って […]
  27. 【CSS】FlexBoxで縦に中央揃えさせる方法
    【CSS】FlexBoxで縦に中央揃えさせる方法
    カテゴリ: CSS, HTML
    更新日:
    FlexBoxで縦に中央揃えさせる方法 FlexBox を使って要素を縦並びかつ、中央揃えさせる方法を紹介します。 例は以下の通りです。開発者ツールから FlexBox で要素を縦に中央揃えさせていることも確認いただけま […]
  28. 【CSS】五角形の矢印を作成する
    【CSS】五角形の矢印を作成する
    カテゴリ: CSS, HTML
    更新日:
    CSSで五角形の矢印を作成する方法 状態の遷移を表す際などに用いられる、五角形の矢印をCSSで簡単に実装する方法をご紹介します。 以下、五角形の矢印のサンプルです。 HTML <div class="ar […]
  29. 「ウェブフォント読み込み中のテキストの表示」問題の解決方法
    「ウェブフォント読み込み中のテキストの表示」問題の解決方法
    カテゴリ: CSS
    更新日:
    引き続き,PageSpeed Insights の診断で表示される問題について扱う. いつの間にか「ウェブフォント読み込み中の全テキストの表示」から「ウェブフォント読み込み中のテキストの表示」に表記が変わっていたので修正 […]
  30. FID (First Input Delay) の改善
    FID (First Input Delay) の改善
    カテゴリ: JavaScript, ホームページ, 知識
    更新日:
    FIDとは(初回入力遅延とは) PageSpeed Insights に出てくる Core Web Vitals の一つ First Input Delay 解説ページである Web Vitals を見てみると Firs […]
Pagetop