CSS– tag –

はじめに 「ボタンにマウスを乗せたとき、色がパッと切り替わるだけで味気ない」「読み込み中のくるくる回るアイコンをCSSだけで作りたい」「同じ動きを自動で繰り返すアニメーションを付けたい」という経験はありませんか？ これらはすべて、CSSのアニメ...

はじめに 「背景に画像を敷きたいけど、思った位置に表示されない」「背景画像がタイル状に繰り返されてしまう」「画面いっぱいに背景画像を敷いたのに、リサイズすると崩れる」という経験はありませんか？ これらはすべて、CSSの背景（background）関連プ...

はじめに 「マウスを乗せたときだけボタンの色を変えたい」「リストの1番目の要素だけ余白をなくしたい」「アイコンをCSSだけで追加したい」という経験はありませんか？ これらはすべて、疑似クラス（pseudo-class）と疑似要素（pseudo-element）というCSS...

はじめに 「スクロールしてもヘッダーを画面上部に固定したい」「バッジやアイコンを要素の右上にピタッと重ねたい」という経験はありませんか？ これらの多くは、position（ポジション）プロパティを使うことで簡単に解決できます。 前回の記事では、縦横...

はじめに 「flexboxだと縦横のレイアウトが思うように組めない」「カード一覧をきれいに整列させたい」という経験はありませんか？ これらの多くは、Grid（グリッド）レイアウトを使うことで簡単に解決できます。 前回の記事では、要素を1方向に並べるflex...

はじめに 「要素を横並びにしたいのに、思い通りにいかない」「中央揃えのやり方がいまいち分からない」という経験はありませんか？ これらの多くは、flexbox（フレックスボックス）を使うことで簡単に解決できます。 前回の記事では、CSSの基本となるボッ...

はじめに 「余白を設定したのにレイアウトが崩れた」「paddingとmarginの違いがよくわからない」という経験はありませんか？ これらの多くは、CSSのボックスモデルを理解することで解決できます。 前回の記事では、テキストの配置や装飾に関するプロパティ...

Webページで文字列の配置や装飾を制御する「CSSテキスト関連プロパティ」の基本についての解説です。 はじめに Webページで「文字の位置を変えたい」「下線を引きたい」「文字間隔を広げてスッキリ見せたい」と思ったことはありませんか？ こういった文字...

Webページの文字デザインを決める「CSSフォント」の基本を初心者向けに解説します。 はじめに 文字デザインは、Webサイトの印象を大きく左右します。CSSでフォントを正しく指定することは、サイトの見やすさ（視認性）だけでなく、サイトの雰囲気を伝える...

CSSセレクターとは、WebページのHTMLやXML文書内で、「どの要素に対してスタイル（デザインやレイアウトなど）を適用するか」を指定するためのパターンです。 はじめに CSSを書くうえで最も重要なのが「セレクタ」です。 セレクタを理解していれば、 特定...

Webページの基礎知識として、今回から「CSS (スタイルシート) 」について勉強します。 はじめに Webページを作るうえで欠かせないのが「CSS（スタイルシート）」です。HTMLが「骨組み」だとすれば、CSSは「見た目（デザイン）」を整える役割を担います。 ...

これまでWebページの基礎知識の無いままWordPressを使ってブログを運営してきました。 プラグインを追加したり、Web上に情報として公開されているCSSやJavaScriptのコードをコピペで利用させていただいたりしてきました。 しかし、これからもブログの運営...

さあ勉強開始です。 まずはWebページの基礎知識についてザックリと勉強します。 WebページとWebサイト 簡単に言うとWebページの集まりがWebサイトですね。今ご覧になっているこのページが「Webページ」で kurumico.com が「Webサイト」です。 Webページと...