CSS

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

LCP (Largest Contentful Paint) について
カテゴリ: CSS, HTML, ホームページ, 知識
更新日: 2020年06月04日
LCPとは(最大コンテンツの描画とは) PageSpeed Insights に出てくる Largest Contentful Paint 解説ページである Web Vitals を見てみると Largest Conte […]
【レスポンシブ対応】メガメニューの簡単な作り方【CSSのみ】
カテゴリ: CSS, HTML
更新日: 2020年03月23日
【レスポンシブ対応】CSSのみでのドロップダウンメニューを作成のページに「メガメニュー」で検索して辿り着く人がいるので，メガメニューという名前がついているドロップダウンメニューの作り方も合わせて記事にする． (2020 […]
画像スライダー Swiper の使い方・設定(HTML, CSS, JavaScript)
カテゴリ: CSS, HTML
更新日: 2020年01月31日
ホームページで使われる「画像スライダー」は種類が多数あり，どれを使うか迷う．無料で商用利用可能な画像スライダー Swiper 少し調べてみた限り，Swiper というスライダーがとてもよく出来ていると思ったのでこのスラ […]
「ウェブフォント読み込み中のテキストの表示」問題の解決方法
カテゴリ: CSS
更新日: 2019年11月21日
引き続き，PageSpeed Insights の診断で表示される問題について扱う．いつの間にか「ウェブフォント読み込み中の全テキストの表示」から「ウェブフォント読み込み中のテキストの表示」に表記が変わっていたので修正 […]
CSSだけで外部サイトへのリンクにマーク(アイコン)をつける方法
カテゴリ: CSS
更新日: 2019年10月29日
リンクが外部に飛ぶことを示すアイコン(リンクアイコン)をつけると「押すと別サイト(外部リンク)に行くこと」が分かりやすいので親切である．なぜ，このようなリンクアイコンを設ける必要があるのかというと「クリックすると別サイ […]
Youtube 動画の埋め込みで遅いページの高速化
カテゴリ: CSS, JavaScript, ホームページ
更新日: 2019年10月29日
Youtube の複数の動画を埋め込むとページ自体が非常に遅くなる(重い)時の高速化(軽量化)の方法．原因は iframe で各動画を読み込みに行くため．「youtube 複数埋め込み高速化」「youtube 複 […]
【CSS】z-index が効かない場合の注意点
カテゴリ: CSS, HTML
更新日: 2019年10月28日
z-index が効かない場合に z-index は要素の重ね合わせの順番を定義できます。以下のように使いますが、数字が大きいほど上に表示されます。 #test { z-index: 1; } スタイルシートを使って、 […]
レスポンシブな多階層ハンバーガーメニューの作り方【CSSのみ】
カテゴリ: CSS, HTML, ホームページ
更新日: 2019年08月14日
スマホで現れるハンバーガーメニューとはスマホでホームページを見ていると右上に「三」のようなマークを見ることが多いと思う．これを見かけがハンバーガーのようだからハンバーガーメニューと呼ぶようだ．恐らく，箇条書きのメニ […]
上部に固定メニューがある場合にページの途中にジャンプする方法
カテゴリ: CSS, HTML
更新日: 2019年07月19日
ページジャンプの方法ページ内の特定の場所に飛ぶ方法は昔は a タグの name 属性を使っていたが，今は id で飛ぶ方法をとることが多い．つまり，以前は <a href="#jump"&g […]
CSSで円(丸)を描き，内側にテキスト(文字)を入れる
カテゴリ: CSS, HTML
更新日: 2019年05月15日
円をかいて，中に文字を入れるとはこのような絵のこと．上左中央右下 CSS と HTML による円とテキストの記述方法中の文字の位置指定のポイント CSS は以下のようになる．円は position: rel […]
【CSS】テキスト(見出し，タイトル)に横線をつける方法
カテゴリ: CSS, HTML
更新日: 2019年03月06日
HTMLのコーディングで必要になり，ちょっと調べたので備忘録．見出しなどの文字列の両側(両端，左右)に横線(ハイフン・横棒)をつけて，中央にもっていきたい場合がある． - を使うと ------ のように切れ切れになっ […]
【レスポンシブ対応】CSSのみでの多階層ドロップダウンメニューを作成
カテゴリ: CSS, HTML
更新日: 2019年02月27日
javascript 無しでナビゲーションメニューを作る弊社のホームページはナビゲーションメニューとしてドロップダウンメニューを採用している．当初は drawer.js を使用して作成されていた．しかし，このレスポ […]