株式会社レクタス
ホームページアクセスログ解析
追跡・トラッキング機能
ページ閲覧解析システム
アンケートフォーム
認証付きダウンロード機能
会員制不要なオンライン展示会
メール配信システム
営業支援システム
ホームページ制作勉強会
ホームページ制作＆コンサル
商品企画コンサルティング
営業コンサルティング
ホームページメンテナンスCSS
CSS カテゴリー記事(更新日順)
-
【CSS】入れ子のリストを複数列に並べる
カテゴリ: CSS, HTML
更新日:入れ子のリストを複数列に並べる 下記のようなリストを画面幅に応じて複数列に並べます。 column-count で複数列に並べることもできますが、何列に並べるか指定する必要があり、画面幅に応じた列数に並べることはできませ […] -
CORS エラーが出たときの対処法
カテゴリ: CSS, 知識
更新日:No 'Access-Control-Allow-Origin' header is present on the requested resource. が出たときの対処法 font-awesome の呼び出し時、上記 […] -
「背景色と前景色には十分なコントラスト比がありません」と言われた時
カテゴリ: CSS, ホームページ, 知識
更新日:新しいPageSpeed Insights 対策． PageSpeed Insights で ユーザー補助 という種別の中に「背景色と前景色には十分なコントラスト比がありません」という文言が出てくるときがある． 「背景色 […] -
「不適切なアスペクト比の画像が表示されています」と言われる時
カテゴリ: CSS, HTML, ホームページ, 知識
更新日:PageSpeed Insights の結果の「おすすめの方法」の中で 「不適切なアスペクト比の画像が表示されています」 と言われる時． img タグには正しい width height を指定しているのになぜか「アスペ […] -
「タップ ターゲットのサイズが適切に設定されていません」と言われるとき
カテゴリ: CSS, 知識
更新日:PageSpeed Insights の仕様がまた変わっていたので，新しいPageSpeed Insights 対策． 新たに「ユーザー補助」「おすすめの方法」「SEO」の項目が現れた． その中の SEO の中に「タップ […] -
【CSS】マーカー風の下線(アンダーライン)を引く方法
カテゴリ: CSS, HTML
更新日:マーカー風の下線(アンダーライン)を引く css では【CSS】簡単な下線(アンダーライン)の引き方【HTML】にあるように簡単に下線の実装ができます。今回実装したいマーカー風の下線(アンダーライン)ですが、少し css […] -
擬似要素 focus-within を使う時に気を付けること
カテゴリ: CSS, HTML, ホームページ
更新日:先日，「キーボードナビゲーションの実現」という記事を投稿した後に気づいたのだが，擬似要素 focus-within を使って，ドロップダウンメニューを制御すると問題があることが判明した． 条件は少し限定されるが，それはド […] -
スキップリンクとは(Skip Link)
カテゴリ: CSS, ホームページ, 知識
更新日:WordPress の公式テーマ登録時に知ったことを少し書いてみる． テーマを投稿するとレビュアーからのダメ出しが来る． 自分の時間もあるだろうに大変ありがたいことである． そこで指摘されたものにスキップリンクというもの […] -
【CSS】簡単なアニメーションの作り方【animation】【keyframes】
カテゴリ: CSS, ホームページ
更新日:今まで CSS で簡単にアニメを作れるという話を書いてきた． 【CSS】簡単なアニメーションの作り方【transition】 【CSS】簡単なアニメーションの作り方【transform】 CSS だけを使ってもアニメーシ […] -
【CSS】簡単なアニメーションの作り方【transform】
カテゴリ: CSS, ホームページ
更新日:アニメーションについて書いた他の記事は以下で． 【CSS】簡単なアニメーションの作り方【transition】 【CSS】簡単なアニメーションの作り方【animation】【keyframes】 CSS だけを使ってもア […] -
【CSS】簡単なアニメーションの作り方【transition】
カテゴリ: CSS, ホームページ
更新日:アニメーションについて少し書いてみた．続きは以下で． 【CSS】簡単なアニメーションの作り方【transform】 【CSS】簡単なアニメーションの作り方【animation】【keyframes】 CSS だけを使って […] -
【CSS】FlexBoxで縦に中央揃えさせる方法
カテゴリ: CSS, HTML
更新日:FlexBoxで縦に中央揃えさせる方法 FlexBox を使って要素を縦並びかつ、中央揃えさせる方法を紹介します。 例は以下の通りです。開発者ツールから FlexBox で要素を縦に中央揃えさせていることも確認いただけま […] -
【CSS】矢印の中に文字を書く方法
カテゴリ: CSS, HTML
更新日:矢印の中に文字を書く実装方法 今回は矢印の上に文字を書く方法を紹介します。図形の上に文字を書く時の参考にしていただければと思います。矢印も CSS のみで作成していますので、その方法も併せてご紹介します。 サンプルコード […] -
【CSS】五角形の矢印を作成する
カテゴリ: CSS, HTML
更新日:CSSで五角形の矢印を作成する方法 状態の遷移を表す際などに用いられる、五角形の矢印をCSSで簡単に実装する方法をご紹介します。 以下、五角形の矢印のサンプルです。 HTML <div class="ar […] -
CSS のみでアコーディオン表示する
カテゴリ: CSS, HTML, システム
更新日:ウェブページでアコーディオン表示を使う場合は気をつけましょうというページを書いておいてどうなのかということだが，一応，javascript (jQuery) を使わない「アコーディオン表示」の書き方を説明する． アコーデ […] -
アコーディオン表示をやめたほうがいい理由
カテゴリ: CSS, HTML, ホームページ
更新日:ウェブにおけるアコーディオン表示とは HTML 界でのアコーディオン表示とは呼んで字のごとく，楽器のアコーディオンのように折り畳みが出来るような表示の仕方を表す． なんとなくエレガント？にも見えるためか，いろんなページで […] -
開発者ツールで要素を書き換える方法
カテゴリ: CSS, HTML, 知識, 言語
更新日:Chromeの開発者ツールで書き換える方法 Chrome のデベロッパーツールで HTML を一時的に書き換える方法をご紹介します。HTML ファイルを直接書き換える前に、ブラウザ上で変更の実装前確認、変更箇所の特定を行 […] -
左側メガメニューの作り方(横スライドタイプ)【レスポンシブ】【CSSのみ】
カテゴリ: CSS, HTML, ホームページ
更新日:【【レスポンシブ対応】メガメニューの簡単な作り方【CSSのみ】 のページで簡単な「メガメニュー」の作成方法を記事にしたが，これは一般的な縦スライドタイプのメガメニューだった． 今回，必要に迫られて横タイプも作ってみたので […] -
CSSで二重の目のマークを作成する
カテゴリ: CSS, HTML
更新日:CSSで二重の目のマークを作成する方法 CSSで目のマークを作成するで作成した目のマークを二重にしました。作成手順はCSSで目のマークを作成する手順に加えて実装方法を後述します。 サンプルコード HTML <div […] -
CSSで目のマークを作成する
カテゴリ: CSS, HTML
更新日:パスワード表示非表示用、CSSのみで目のマークを作成する 画像の目のマークと比べるとかなりシンプルになりますが、できる限り簡単に CSS のみで実装できる目のマークを作成しました。パスワードの表示、非表示のために用いられ […]
