株式会社レクタス
ホームページアクセスログ解析
追跡・トラッキング機能
ページ閲覧解析システム
アンケートフォーム
認証付きダウンロード機能
会員制不要なオンライン展示会
メール配信システム
営業支援システム
ホームページ制作勉強会
ホームページ制作＆コンサル
商品企画コンサルティング
営業コンサルティング
ホームページメンテナンスCSS
CSS カテゴリー記事(更新日順)
-
レスポンシブな多階層ハンバーガーメニューの作り方【CSSのみ】
カテゴリ: CSS, HTML, ホームページ
更新日:スマホで現れるハンバーガーメニューとは スマホでホームページを見ていると右上に「三」のようなマークを見ることが多いと思う． これを見かけがハンバーガーのようだからハンバーガーメニューと呼ぶようだ． 恐らく，箇条書きのメニ […] -
【CSS】特定の子要素を含まない要素を指定する方法
カテゴリ: CSS
更新日:親要素や兄要素を指定する has セレクタ :has は疑似クラスで、:has が登場する前までは指定できなかった、参照している要素の親要素や前の兄弟要素 (兄要素) を指定できます。 div タグ直下に含む要素の背景を […] -
Youtube 動画の埋め込みで遅いページの高速化
カテゴリ: CSS, JavaScript, ホームページ
更新日:Youtube の複数の動画を埋め込むとページ自体が非常に遅くなる(重い)時の高速化(軽量化)の方法． 原因は iframe で各動画を読み込みに行くため． 「youtube 複数 埋め込み 高速化」「youtube 複 […] -
アコーディオンを CSS でシンプルに表示する
カテゴリ: CSS, HTML, システム
更新日:ウェブページでアコーディオン表示を使う場合は気をつけましょうというページを書いておいてどうなのかということだが，一応，javascript (jQuery) を使わない「アコーディオン表示」の書き方を説明する． アコーデ […] -
【CSS】レスポンシブ対応縦横ヘッダ固定テーブル(縦横スクロール)
カテゴリ: CSS, HTML, ホームページ
更新日:スマホ表示の時に画面からはみ出る table をスライドさせる方法に関して以前に書いたが，それらは IE11 で動くようにするために面倒くさいことをしていた． しかし，もうサポートも終了するので，IE11 は無視してもよ […] -
【CSS】画像クリックでポップアップウィンドウ(拡大画像)を表示する方法
カテゴリ: CSS, HTML, ホームページ
更新日:javascript を使用しないで CSS のみでウィンドウ・レイヤー(拡大・縮小)を表示する方法について，いろいろ調べていたが，うまく見つからなかったので考えて作ってみた．(当然だが HTML は使っている．) モー […] -
Lity を使った再生ボタン付き Youtube 動画再生
カテゴリ: CSS, ホームページ
更新日:Lity とは Lity とは、Web サイト上で画像や動画、インラインコンテンツなどをポップアップ表示させることができる jQuery ライブラリのこと。重くなりがちな jQuery のなかでは比較的軽めな設計のうえ、 […] -
開発者ツールで要素を書き換える方法
カテゴリ: CSS, HTML, 知識, 言語
更新日:Chromeの開発者ツールで書き換える方法 Chrome のデベロッパーツールで HTML を一時的に書き換える方法をご紹介します。HTML ファイルを直接書き換える前に、ブラウザ上で変更の実装前確認、変更箇所の特定を行 […] -
【WordPress】投稿の一覧ページにリセットされない連番を振る方法
カテゴリ: CSS, php
更新日:アーカイブページで連番を振る方法 wordpressで検索結果一覧を表示したいときや、人気度に応じてランキング形式で表示したいときなど、投稿タイトルの先頭に連番を振りたい場面があると思います。 しかし、1ページ目は問題な […] -
【CSS】ボタンクリックでパスワード(テキスト)の表示・非表示を切り替える
カテゴリ: CSS, HTML, 知識
更新日:【CSS】ボタンクリックでパスワード(テキスト)の表示・非表示を切り替える ログイン画面で、パスワード表示ボタンをクリックするとパスワードが表示されるという機能は、現在では当たり前になっています。 ですが、もしパスワード […] -
【CSS】文字に下線(アンダーライン)を引く方法【HTML】
カテゴリ: CSS, HTML
更新日:CSS で 文字に下線(アンダーライン)を引く方法 本文中のテキストや見出しに CSS で下線を付けたり下線の位置を調整したいときがあると思います。アンダーラインは text-decoration や border を利 […] -
【WordPress】新着情報で2週間以内の投稿記事に new をつける方法
カテゴリ: CSS, HTML, php, ホームページ
更新日:WordPress を使っている企業のホームページなどでは新着記事に new というマーク(アイコン)をつけて目立たせたいと思う方もいるだろう． しかし，プラグインはいろいろ面倒なので入れたくない． そういう場合にコピペ […] -
【HTML】アコーディオン表示をやめたほうがいい理由
カテゴリ: CSS, HTML, ホームページ
更新日:ウェブにおけるアコーディオン表示とは HTML 界でのアコーディオン表示とは呼んで字のごとく，楽器のアコーディオンのように折り畳みが出来るような表示の仕方を表す． (CSSだけでアコーディオン表示をするHTMLの書き方は […] -
Lightbox のような高級感を CSS のみで実現
カテゴリ: CSS, HTML, ホームページ
更新日:lightbox 風な動作を CSS のみで実現してみた．(javascript や jQuery を使わないで) ライトボックスは画像の拡大表示で手軽に高級感を醸し出せるので使っているサイトは結構あると思う． 前回書い […] -
【CSS】入れ子のリストを複数列に並べる
カテゴリ: CSS, HTML
更新日:入れ子のリストを複数列に並べる 下記のようなリストを画面幅に応じて複数列に並べます。 column-count で複数列に並べることもできますが、何列に並べるか指定する必要があり、画面幅に応じた列数に並べることはできませ […] -
CORS エラーが出たときの対処法
カテゴリ: CSS, 知識
更新日:No 'Access-Control-Allow-Origin' header is present on the requested resource. が出たときの対処法 font-awesome の呼び出し時、上記 […] -
【レスポンシブ対応】メガメニューの簡単な作り方【CSSのみ】
カテゴリ: CSS, HTML
更新日:【レスポンシブ対応】CSSのみでのドロップダウンメニューを作成 のページに「メガメニュー」で検索して辿り着く人がいるので，メガメニューという名前がついているドロップダウンメニューの作り方も合わせて記事にする． (2020 […] -
「背景色と前景色には十分なコントラスト比がありません」と言われた時
カテゴリ: CSS, ホームページ, 知識
更新日:新しいPageSpeed Insights 対策． PageSpeed Insights で ユーザー補助 という種別の中に「背景色と前景色には十分なコントラスト比がありません」という文言が出てくるときがある． 「背景色 […] -
【CSS】目のマークでパスワードの表示を切り替える実装方法
カテゴリ: CSS, HTML, 言語
更新日:目のマークでパスワードの表示非表示を切り替える 目のアイコンをクリックすることでパスワードの表示非表示の切り替える方法を今回は CSS で実装しました。 javascript での実装は【JavaScript】目のマーク […] -
【CSSのみ】ヘルプボタンを作成する
カテゴリ: CSS, HTML
更新日:画像を使用しないヘルプボタン 【CSSのみ】ヘルプボタンをクリックしたときに説明を表示する方法 では、ヘルプボタンは画像を使用していましたが、CSSのみでヘルプボタンを作成することができたのでご紹介します。チェックボック […]
