CSS

2024/8/18

【初心者向け】CSSセレクタの種類や指定方法を徹底解説

HTMLやCSSを勉強した際に、初期でつまづきやすいのがCSSセレクタの種類や指定方法です。 CSSを使って任意の要素に対して適切なスタイルを設定するには、CSSセレクタの種類や指定方法を理解しておく必要があります。今回はCSSセレクタの概要やセレクタの種類、指定方法を解説します。 CSSセレクタとは？ CSSセレクタとは、「どのHTML要素にスタイルを適用させるか」を決めるものです。たとえば、h2要素に背景色を設定したい場合は下記のように設定します。下記の ...

2024/8/1

【Sass入門】導入方法やSCSS記法の基本的な書き方

今回はSassの概要とともに、Visual Studio Codeを使ったSassの導入方法をはじめ、SCSS記法の基本的な書き方をいくつか紹介します。 Sassを利用するとCSSの記述量を減らせたり、管理が楽になりますので、CSSをある程度覚えたらSassも一度勉強してみてください。 Sassとは？使用するメリット Sassの概要と特徴 Sassは「Syntactically Awesome Style Sheets（和訳: 構文的に優れたスタイルシート）」の ...

2024/8/18

【CSS calc()関数の使い方】幅や高さを計算式で指定する方法

今回は、要素の幅や高さなどを足し算、引き算などの計算式を使って指定できるcalc()関数の使い方について紹介していきます。 calc関数が使えるようになると、pxや%など異なる単位を使って幅を計算・指定することができるようになります。

.sample{
  width: calc(100% - 40px);
  height: calc(300px + 20vw);
}

.sample{

width: calc(100% - 40px);

height: calc(300px + 20vw);

}

CSSのcalc()関数とは？ CSSのcalc()関数の意味と概要 calc()関数は、CSSで数学の四則演算（足し算・引き算・掛け算・割り算）を可能にする関数です ...

2024/8/18

【HTML CSS】classとid属性の意味や違い・使い方を解説

今回はHTML・CSSを勉強し始めた時に、htmlタグにid名やclass名が出てきますが何のことかよくわからない方も多いのではないでしょうか。 classやid属性は、HTML・CSSを勉強する上で必ず必要になる知識です。今回はHTML・CSSを使ってコーディングをしていく上で非常に重要なclass、id属性の意味や違い・使い方を解説していきます。

<div id="main" class="container">サンプルサンプル</div>

1	<div id="main" class="container">サンプルサンプル</div>

classとid属性の役割とは？ classと ...

2024/8/1

【CSS グリッドレイアウト】display: gridの使い方

今回はCSSのグリッドレイアウト(display: grid)の使い方を解説していきます。グリッドレイアウトを利用すると、要素を格子状に並べて自由に配置することができるので、レイアウトを組むのにとても便利です。 CSSグリッドレイアウト(display: grid)とは？ Grid Layout(display: grid)は、CSSでレイアウトを組む手法の1つで、要素を格子状に並べて配置することができます。 Grid Layoutでは列数と行数をあらかじめ指定 ...

2024/8/1

【CSS border-imageの使い方】枠線に画像表示する方法

border-imageは、要素の枠線に好きな画像を表示させることができるCSSプロパティです。下記の5つのCSSプロパティを同時に指定できます。なお、border-imageで一括指定する際には、「border-image-slice」「border-image-width」「border-image-outset」の値の間に「/（スラッシュ）」が必要です。

.sample {
  border-image-source: url(画像のURL) ;
  border-image-slice: 100;
  border-image-width: 50px;
  border-image-outset: 10px;
  border-image-repeat: round;
}

/* 上の記述をborder-imageで以下のようにまとめることができます。 */

.sample {
  border-image: url(画像のURL) 100 / 50px / 10px round;
}

.sample {

border-image-source: url(画像のURL) ;

border-image-slice: 100;

border-image-width: 50px;

border-image-outset: 10px;

border-image-repeat: round;

}

/* 上の記述をborder-imageで以下のようにまとめることができます。 */

.sample {

border-image: url(画像のURL) 100 / 50px / 10px round;

}

border-imageを利用すると以下のようなオ ...

2024/8/1

【keyframes animation】CSSでアニメーションする方法

今回はCSSだけでアニメーションを実装することができるCSSのkeyframesとanimationプロパティの使い方を紹介していきます。 CSSで簡単なアニメーションはtransitionでも実装できますが、keyframesとanimationを利用すると、より多様なアニメーションが実装できます。 (参考)【CSSでアニメーション】transitionプロパティの使い方 CSSのkeyframesとanimationとは？両者の役割 keyframesとanimationプ ...

2024/8/1

【CSS vertical-alignの使い方】テキストの縦・上下方向の位置変更

今回は行内やセル内の縦方向の位置を変更することができるCSSプロパティ、vertical-alignの使い方やよく使用される値を紹介します。

<div>行<span style="vertical-align: baseline;">baseline</span></div>

1	<div>行<span style="vertical-align: baseline;">baseline</span></div>

div { font-size: 50px; background-color: #ccc; }
span { font-size: 12px; background-color: #ffccff; }

1 2	div { font-size: 50px; background-color: #ccc; } span { font-size: 12px; background-color: #ffccff; }

<div>行<span style="vertical-align: top;">top</span></div>

1	<div>行<span style="vertical-align: top;">top</span></div>

<div>行x<span style="vertical-align: middle;">middle</span></div>

1	<div>行x<span style="vertical-align: middle;">middle</span></div>

<div>行<span style="vertical-align: bottom;">bottom</span></div>

1	<div>行<span style="vertical-align: bottom;">bottom</span></div>

[crayon-674f40ef059a ...

2024/8/1

【CSS transform skewの使い方】要素に傾斜をつける方法

今回は要素に傾斜をつけることができるCSS関数、skew関数の使い方を紹介します。 transformで利用するskew関数とは skewはtransformプロパティの値として使用する関数の一つで、要素に傾斜を付けることができます。 ■(参考)skew()を使用してx軸方向に傾斜を付けている例なお、skew()はCSSプロパティではなく関数なので、transformプロパティの値として使用します。また引数を2つ取ることができ、1つ目の値にはx軸方向、2つ目の値にはy軸方向 ...

2024/8/1

【CSS transform scaleの使い方】要素の拡大・縮小方法

今回は要素を拡大・縮小させることができるCSS関数、scale関数の使い方を紹介していきます。 scale関数が使えるようになると、ホバー時に拡大されるボタンや画像の中央部分がゆっくりズームされるといった実装ができるようになります。 transformで利用するscale関数 scale()は要素をx軸、y軸方向に拡大・縮小させることができるCSS関数です。 ■(参考)scale()を使用してホバー時に要素をx軸・y軸方向に拡大している例なお、scale()はC ...

2024/8/1

【CSS transform rotateの使い方】要素を回転させる方法

今回は要素を回転させることができるCSS「transform:rotate()」の使い方を紹介します。 rotate()を使用すると、マウスホバー時に要素を好きな角度で回転させたりといった実装できるようになります。実際によく見る例では、ハンバーガーメニューの上下の棒を45度回転させたりといった実装が挙げられます。 transformで利用するrotate関数 rotateはCSS関数の1つで、要素を中心点や軸を基準に回転させることができます。 ■(参考)rotateを使用して ...

2024/8/1

box-sizing:border-boxの意味：余白を大きさに含めるCSS

box-sizing:border-box;を指定すると枠線borderや内側余白paddingの大きさを要素の幅・高さ(width・height)に含めることができます。今回はCSSプロパティbox-sizingの意味や使い方を解説します。 ■全ての要素に対してbox-sizing:border-box;を指定した一例

*, *:before, *:after {
  box-sizing: border-box
}

*, *:before, *:after {

box-sizing: border-box

}

■box-sizing:border-box;設定なしの場合 [crayon-674f40ef05d4a ...

2024/8/18

【CSS transform:translate()の使い方】xy軸上の移動方法

今回は要素をxy軸上で移動させることができるCSS関数、translate()の使い方を紹介します。 translateが使えるようになると、要素の位置調整ができたり、簡単にアニメーションを実装したりすることができ非常に便利です。 transformで利用するtranslate関数 translateはtransformプロパティの値として使用する関数の一つで、要素を水平方向や垂直方向に移動することができます。 ■(参考)translateを使用してホバー時に要素 ...

2024/8/18

【CSS object-fitの使い方】CSSで画像トリミングする方法

今回はCSSで簡単に画像をトリミングする事ができるCSSプロパティ「object-fit」の使い方をご紹介します。 object-fitが使えるようになれば、縦横比の異なる画像を高さを揃えて横一列に並べる事が可能で、CSSだけで簡易的な画像トリミングすることができます。 object-fitプロパティとは？ object-fitプロパティは、画像をトリミングする事ができるCSSです。通常、縦横比の異なる画像を横一列に並べる場合、横幅を揃えて表示させると以下のよう ...

2024/8/18

【CSS font-familyの使い方】フォント種類・字体の変更方法

今回は、フォントの種類・字体を変更することができるCSSプロパティ「font-family」の使い方を解説していきます。 PCやモバイル端末には、游ゴシック、游明朝、ヒラギノゴシックなど、いろいろなフォントがインストール・用意されており、CSSで表示される文字フォントを指定することができます。 font-familyはフォントの種類を指定できるCSSプロパティ font-familyはフォントの種類を変更する事ができるCSSプロパティです。以下のように「fon ...

2024/8/18

【CSS letter-spacingの使い方】テキスト文字の字間調整

今回はCSSプロパティの1つ「letter-spacing」の使い方をご紹介します。 letter-spacingを使用すると、選択したテキスト全体の文字間隔の調整をすることが可能です。 letter-spacingの使い方 letter-spacingは、文章の字間を調整することができるCSSプロパティです。標準の字間よりもより字間を空けたい・狭めたい場合にletter-spacingを使用します。 letter-spacingを使って字間を調整 ...

2024/8/18

【CSS font-weightの使い方】文字の太さの変更方法

今回は、CSSプロパティの1つで文字の太さを変更できるプロパティ「font-weightプロパティ」の使い方を解説していきます。 font-weightプロパティは、テキストの一部だけ文字を太くして目立たせたい場合や、もとから太字で表示されている部分を通常の太さに戻したい場合などに利用することができます。 font-weightは文字の太さを変更できるCSSプロパティ font-weightは文字の太さを変更することができるプロパティです。テキストの一部だけ太字や細字にしたい ...

2024/8/18

【CSS font-sizeの使い方】文字サイズ変更(px rem em %)

今回は文字サイズを変更するのに使用されるCSSプロパティ「font-size」の使い方を紹介します。 font-sizeを利用するとテキスト文字の大きさを変更することができます。フォントサイズの指定方法には、pxやrem、em、%など使える単位が多く、今回は各単位の意味や使用例について解説していきます。 font-sizeプロパティの使い方 font-sizeは、文字のフォントサイズを変更するのに使用されるプロパティです。フォントサイズを指定していない場合、pタ ...

2024/8/18

【CSS box-shadowの使い方】ボックス要素や画像に影をつける方法

今回は画像やボックスにドロップシャドウのシャドウ効果を付けることができるCSSプロパティ「box-shadow」の使い方を解説していきます。 box-shadowで要素に影をつける方法 box-shadowは、画像やボックスの周りにドロップシャドウのような影の効果を付けることができるCSSプロパティです。複数の値を半角スペースで区切って指定することができ、こうすることで影の位置の調整や色の変更、大きさの調整など様々な設定をすることができます。 [crayon-674f40ef ...

2024/8/18

【CSS text-shadowの使い方】文字に影を付ける方法

今回はテキスト文字に影(シャドウ)を付ける事ができるCSSプロパティ「text-shadow」の使い方を解説していきます。 text-shadowでテキストに影をつける方法 text-shadowプロパティはCSSプロパティの1つで、テキストに影を付けることができます。下記は、h1タグにtext-shadowで影をつけた例です。

<h1>テキストシャドウの使い方</h1>

1	<h1>テキストシャドウの使い方</h1>

h1{
  text-shadow: 6px 3px #bbb;
}

h1{

text-shadow: 6px 3px #bbb;

}

& ...

2024/8/1

CSS position:stickyの使い方と動かない時の対処法

position:stickyを利用すると、javascriptなしで、表テーブルやサイドバーの特定要素の位置を途中で固定することができます。

    <header>Header</header>
    <div class="container">
      <div class="flex-wrap">
        <main>Main Contents</main>
        <aside>
          <div class="sidebar-element se1">サイドバー要素1</div>
          <div class="sidebar-element se2">サイドバー要素2</div>
          <div class="sidebar-element se3">サイドバー要素3</div>
        </aside>
      </div>
    </div>

<header>Header</header>

<main>Main Contents</main>

<aside>

<div class="sidebar-element se1">サイドバー要素1</div>

<div class="sidebar-element se2">サイドバー要素2</div>

<div class="sidebar-element se3">サイドバー要素3</div>

</aside>

</div>

body { text-align: center; }
.container {
  width: 1000px;
  margin: 0 auto;
}
 
header {
  background-color: pink;
  line-height: 80px;
  margin-bottom: 60px;
}
.flex-wrap {
  display: flex;
  justify-content: space-between;
}
main {
  background-color: bisque;
  line-height: 2000px;
  width: calc(60% - 30px);
}
aside { width: calc(40% - 30px); }
.sidebar-element{
  line-height: 300px;
  margin-bottom: 30px;
}
.se1{ background-color: rgb(198, 229, 255); }
 
.se2{ background-color: rgb(172, 214, 251); }
 
.se3{
  background-color: rgb(129, 192, 247);
  position: sticky;
  top: 0;
}

body { text-align: center; }

.container {

width: 1000px;

margin: 0 auto;

}

header {

background-color: pink;

line-height: 80px;

margin-bottom: 60px;

}

.flex-wrap {

display: flex;

justify-content: space-between;

}

main {

background-color: bisque;

line-height: 2000px;

width: calc(60% - 30px);

}

aside { width: calc(40% - 30px); }

.sidebar-element{

line-height: 300px;

margin-bottom: 30px;

}

.se1{ background-color: rgb(198, 229, 255); }

.se2{ background-color: rgb(172, 214, 251); }

.se3{

background-color: rgb(129, 192, 247);

position: sticky;

top: 0;

}

今回はposition: stickyの使い方を解説します。 ※本記事ではpositionプロパティのstatic・relative・absolute・fixedの使い方について解説していません。これらにつ ...

2024/8/18

【CSS colorの使い方】テキスト文字色を変更する方法

HTMLやCSSを勉強し始めた初心者やWordPressを運用している方で「この部分だけは赤色文字で表示したい」といったことがあります。文字色を変更するには、CSSの「colorプロパティ」を利用します。今回は、colorプロパティでの文字色を変更する方法や使用できる値を解説します。 CSSのcolorプロパティの使い方 colorプロパティは、テキスト文字色を変更するCSSのプロパティです。 colorプロパティの使い方は簡単で、文字色を変更したい要素に対して以下のように ...

2024/8/18

【CSS widthとheightの使い方】横幅と高さの指定方法

今回はCSSのwidthプロパティ・heightプロパティの使い方をご紹介します。 widthやheightを指定することで、要素の横幅や高さを指定・変更することができます。 width・heightプロパティの意味 width・heightは、要素の横幅や高さを変更する際に使用されるCSSプロパティです。 width・heightプロパティの使い方 width・heightプロパティを使って横幅・高さを指定するには、変更したい要素を選択し、以下のように記述してあ ...

2024/8/18

【CSS overflowの使い方】hiddenやscrollの違い

今回はCSSのoverflowプロパティの使い方について紹介していきます。 overflowプロパティとは？ overflowプロパティは、要素がボックスの外側にはみ出てしまった際に、はみ出た部分をどのように表示させるかを指定する事ができるプロパティです。基本的に要素がボックスからはみ出るということはないのですが、以下のように横幅(width)や高さ(height)を指定している場合、要素がボックスからはみ出てしまうことがあります。 [crayon-674f40 ...

2024/8/18

【CSS text-decorationの使い方】文字テキストの装飾方法

今回はテキストに下線・上線・訂正線などの装飾する際に使用するCSStext-decorationの使い方を解説します。 ■text-decorationでは線の位置や種類、色、太さを一括指定することができます。

<p>ここに<span style="text-decoration: underline solid red 3px;">テキスト</span>が入ります。</p>

1	<p>ここに<span style="text-decoration: underline solid red 3px;">テキスト</span>が入ります。</p>

■よく使う例の一つはリンクaタグの下線を消す例です。text-decorationを指定し、値を「none」としてあげればOKです。

<p>ここは<span style="text-decoration: none;">リンク</span>です。</p>

1	<p>ここは<span style="text-decoration: none;">リンク</span>です。</p>

&n ...

2024/8/18

p{
  line-height: 40px;
}

line-height: 40px;

}

line-heightは行間・行の高さ調整のCSS line-heightプロパティは行の高さを指定するのに使用されるCSSプロパティです。冒頭で行間を調整したい場合に使用す ...

1 2 Next »

YouTubeチャンネル

個別指導Webスクール

CSS

【初心者向け】CSSセレクタの種類や指定方法を徹底解説

【構造化データとは？】メリットやタイプ・基本的な書き方を解説

【HTMLセマンティック要素とは】意味付けされた要素・意味と使い方

HTML改行タグbrの使い方・文中に改行を入れる方法

【Sass入門】導入方法やSCSS記法の基本的な書き方

WEBST8のコードブログ