HTML&CSS

HTML&CSS

HTMLでscriptタグはなぜbodyタグの最後に配置するのか?その理由を説明

はじめに この記事ではHTMLに記述するscriptタグが、なんでbodyタグの最後に書かれているのか、その理由を説明します。 ページの表示速度を速くするため scriptタグがbodyタグの最後に書かれている理由は、ページの表示速度...
HTML&CSS

【HTML・CSS】文章の最初の行だけ見た目を変更するにはどうやれば良いか

はじめに この記事では、HTML内に記述したテキストの1行目だけスタイルを変更したいときに、CSSでどうすれば実現できるかの例を紹介します。 疑似要素の::first-lineを使用する方法 divタグやpタグ等で囲んだテキストにCS...
HTML&CSS

【HTML・CSS】複数のボタンや画像を同じ間隔(等間隔)で横並びに配置する方法

はじめに この記事ではボタンや画像を複数並べたときに、同じ間隔(等間隔)を空けて配置する方法を紹介します。 等間隔で横並びにボタンを並べる(flexbox) 複数の要素を等間隔で並べるには、CSSの display:flex と ju...
HTML&CSS

【HTML・CSS】selectタグで作ったプルダウンメニューの横幅を統一する方法

はじめに HTMLのフォームでは、selectタグとoptionタグを使ってプルダウンメニューを作成できます。 このプルダウンメニューですが、メニューを複数作成したときに、横幅が選択肢の長さになってしまい、それぞれのプルダウンメニューの横...
HTML&CSS

【HTML・CSS】ulタグのリストでli(箇条書き)の先頭の記号(点)を好きな記号に変更する

はじめに HTMLのulタグで箇条書きのリストを作ったとき、li要素の先頭にはデフォルトで点(・)の記号が表示されます。 この記事では、デフォルトの点の記号を好きな記号や文字に変更する方法を紹介します。 CSSでulリストにlist-...
HTML&CSS

【HTML】番号付きの箇条書きリストで開始番号を1以外の途中からの番号に変更する

はじめに HTMLでは、olタグを使うと番号付きの箇条書きリストを作れます。 この記事では、olタグの箇条書きリストを2つに分けたときに、2つ目の箇条書きリストの開始番号を、1以外の途中の番号に変更する方法を紹介します。 開始番号を1以...
HTML&CSS

【CSS・JavaScript】HTMLで要素を指定するためのセレクタの書き方まとめ

セレクタとは CSSやJavaScriptを使ってHTMLのDOMを修飾したり取得・操作したりする際、セレクタを指定することになります。 セレクタはHTMLのタグであったり、id属性やclass属性だったりと様々な種類があります。 ま...
HTML&CSS

【HTML&CSS】Flexboxを使って要素を上下左右に中央揃えにする方法

今回はFlexboxを使って、要素を上下や左右に中央揃えする方法を紹介します。 まずFlexboxを使用するためには、要素に対して"display: flex"を設定する必要があります。 そして、調整したい位置によって"display:...
HTML&CSS

【HTML&CSS】フッターを常に画面の最下部(一番下)に表示する方法

この記事では、フッターを画面の最下部(一番下)に固定して表示する方法を紹介します。 「フッターが画面の最下部に表示できず、困っている」という方は、本記事で紹介している方法を試してみてください。 次の表示内容をご覧ください。このHTMLでは...
HTML&CSS

【HTML・CSS】画像の上に画像や文字を重ねる方法

この記事では、「画像の上にアイコンや文字、画像を重ねて表示する方法」を紹介します。 まずは次の画像をご覧ください。 この画像では、右下に「いいね」ボタンを表示しています。 この表現はCSSの"position: absolute"...