言語

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

  1. 【レスポンシブ対応】CSSのみでの多階層ドロップダウンメニューを作成
    カテゴリ: CSS, HTML
    更新日:
    javascript 無しでナビゲーションメニューを作る 弊社のホームページはナビゲーションメニューとしてドロップダウンメニューを採用している. 当初は drawer.js を使用して作成されていた. しかし,このレスポ […]
  2. アンケートフォーム
    カテゴリ: HTML, JavaScript, システム, ホームページ, マーケティング
    更新日:
    問い合わせやアンケートを自由に簡単に作成したい! アンケートフォームとは 資料請求やお問い合わせなど引き合いを出したい時に必要な情報だけを記入して,ボタンを押すだけでそのホームページを持っている会社や人宛にメッセージを送 […]
  3. レスポンシブな多階層ハンバーガーメニューの作り方【CSSのみ】
    カテゴリ: CSS, HTML, ホームページ
    更新日:
    スマホで現れるハンバーガーメニューとは スマホでホームページを見ていると右上に「三」のようなマークを見ることが多いと思う. これを見かけがハンバーガーのようだからハンバーガーメニューと呼ぶようだ. 恐らく,箇条書きのメニ […]
  4. CSS のみでアコーディオン表示する
    カテゴリ: CSS, HTML, システム
    更新日:
    ウェブページでアコーディオン表示を使う場合は気をつけましょうというページを書いておいてどうなのかということだが,一応,javascript (jQuery) を使わない「アコーディオン表示」の書き方を説明する. アコーデ […]
  5. 開発者ツールで要素を書き換える方法
    カテゴリ: CSS, HTML, 知識, 言語
    更新日:
    Chromeの開発者ツールで書き換える方法 Chrome のデベロッパーツールで HTML を一時的に書き換える方法をご紹介します。HTML ファイルを直接書き換える前に、ブラウザ上で変更の実装前確認、変更箇所の特定を行 […]
  6. 【CSS】簡単な下線の引き方【HTML】
    カテゴリ: CSS, HTML
    更新日:
    本文中のテキストや見出しに下線を付けたい時があると思います。アンダーラインは text-decoration や border を利用してとても簡単に実装できますので、用途別に応じて解説します。 下線を引く まず、下線の […]
  7. アコーディオン
    アコーディオン表示をやめたほうがいい理由
    カテゴリ: CSS, HTML, ホームページ
    更新日:
    ウェブにおけるアコーディオン表示とは HTML 界でのアコーディオン表示とは呼んで字のごとく,楽器のアコーディオンのように折り畳みが出来るような表示の仕方を表す. なんとなくエレガント?にも見えるためか,いろんなページで […]
  8. 【CSS】レスポンシブ(スマホ)対応横スクロールテーブル(表)
    カテゴリ: CSS, HTML
    更新日:
    (2021/03/18 文章追加とコード微修正) レスポンシブ対応のホームページの制作で面倒なものの一つに表(table)がある. 横に並んだものを縦にする CSS はよく目にするが,横長のものだと項目が多い場合に訳が分 […]
  9. リッチリザルト への BlogPosting での対応
    カテゴリ: HTML, 知識
    更新日:
    リッチリザルトとは リッチリザルトは、通常の青色リンクよりも高度な機能を持つ、Google サービス(Google 検索など)での検索結果です。 引用: リッチリザルトテスト(google) つまり,より情報量の多い豊か […]
  10. 【Chrome】開発者ツールの使い方【デバッグ】
    カテゴリ: JavaScript, システム, 知識
    更新日:
    開発者ツールを使ったデバッグ方法 開発者ツールの各機能の使い方はわかったが、実際にどう使えばいいのかわからないという方向けに、javascript で作成した関数のデバッグを実践的に行います。 今回はボタンのクリックでパ […]
  11. 画像スライダー Swiper の使い方・設定(HTML, CSS, JavaScript)
    カテゴリ: CSS, HTML
    更新日:
    ホームページで使われる「画像スライダー」は種類が多数あり,どれを使うか迷う. 無料で商用利用可能な画像スライダー Swiper 少し調べてみた限り,Swiper というスライダーがとてもよく出来ていると思ったのでこのスラ […]
  12. CSSで円(丸)を描き,内側にテキスト(文字)を入れる
    カテゴリ: CSS, HTML
    更新日:
    円をかいて,中に文字を入れるとはこのような絵のこと. 上 左 中央 右 下 CSS と HTML による円とテキストの記述方法 中の文字の位置指定のポイント CSS は以下のようになる. 円は position: rel […]
  13. CSSで二重の目のマークを作成する
    カテゴリ: CSS, HTML
    更新日:
    CSSで二重の目のマークを作成する方法 CSSで目のマークを作成するで作成した目のマークを二重にしました。作成手順はCSSで目のマークを作成する手順に加えて実装方法を後述します。 サンプルコード HTML <div […]
  14. 左側メガメニューの作り方(横スライドタイプ)【レスポンシブ】【CSSのみ】
    カテゴリ: CSS, HTML, ホームページ
    更新日:
    【【レスポンシブ対応】メガメニューの簡単な作り方【CSSのみ】 のページで簡単な「メガメニュー」の作成方法を記事にしたが,これは一般的な縦スライドタイプのメガメニューだった. 今回,必要に迫られて横タイプも作ってみたので […]
  15. 【CSS】目のマークでパスワードの表示を切り替える実装方法
    カテゴリ: CSS, HTML, 言語
    更新日:
    目のマークでパスワードの表示非表示を切り替える 目のアイコンをクリックすることでパスワードの表示非表示の切り替える方法を今回は CSS で実装しました。 javascript での実装は【JavaScript】目のマーク […]
  16. CSSだけで外部サイトへのリンクにマーク(アイコン)をつける方法
    カテゴリ: CSS
    更新日:
    リンクが外部に飛ぶことを示すアイコン(リンクアイコン)をつけると「押すと別サイト(外部リンク)に行くこと」が分かりやすいので親切である. なぜ,このようなリンクアイコンを設ける必要があるのかというと「クリックすると別サイ […]
  17. 【WordPress】新着情報で2週間以内の投稿記事に new をつける方法
    カテゴリ: CSS, HTML, php, ホームページ
    更新日:
    WordPress を使っている企業のホームページなどでは新着記事に new というマーク(アイコン)をつけて目立たせたいと思う方もいるだろう. しかし,プラグインはいろいろ面倒なので入れたくない. そういう場合にコピペ […]
  18. CLS (Cumulative Layout Shift) の改善
    カテゴリ: HTML, ホームページ
    更新日:
    CLSとは(累積レイアウト変更とは) PageSpeed Insights に出てくる Cumulative Layout Shift 解説ページである Web Vitals を見てみると Cumulative Layo […]
  19. LCP (Largest Contentful Paint) について
    カテゴリ: CSS, HTML, ホームページ, 知識
    更新日:
    LCPとは(最大コンテンツの描画とは) PageSpeed Insights に出てくる Largest Contentful Paint 解説ページである Web Vitals を見てみると Largest Conte […]
  20. 【レスポンシブ対応】メガメニューの簡単な作り方【CSSのみ】
    カテゴリ: CSS, HTML
    更新日:
    【レスポンシブ対応】CSSのみでのドロップダウンメニューを作成 のページに「メガメニュー」で検索して辿り着く人がいるので,メガメニューという名前がついているドロップダウンメニューの作り方も合わせて記事にする. (2020 […]
Pagetop