CSS

2024/8/1

【CSS text-alignの使い方】文字の行揃え・寄せ指定をする方法

今回はtext-alignプロパティの使って文字(テキスト)を左揃え・中央揃え・右寄せ揃えにしたりする方法を解説していきます。 CSSを勉強し始めたばかりの頃だと「text-alignプロパティが上手く効かない…。」といった方も多いので、本記事を参考にしてみてください。 text-alignは行揃えのスタイルCSS text-align(テキストアライン)プロパティは、指定した要素の中にあるテキストや画像などの水平方向の配置を指定することができるプロパティです。 text-al ...

2024/8/18

CSSの書き方・基本ルールを解説【インライン/内部/外部】

今回は、初心者の方を対象にCSSの基本的な書き方・ルールを説明します。なお、HTML・CSSはテキストなのでテキストエディターであればなんでも記述することはできますが、Visual Studio Code (以下VS Code)などの開発用エディターを利用するのが一般的です。VS Codeのインストール方法は「【VSCode】Visual Studio Codeのインストール・設定手順」をご参照ください。 CSSとはWebページの見た ...

2024/8/18

CSS 枠線borderの使い方・要素に枠線をつけるやり方

要素に枠線を入れるにはborder:red solid 5pxのようにborderプロパティで枠線の色＋枠線の種類＋枠線の太さを指定します。今回は、CSSの枠線borderの基本と注意点や角の丸さを設定するborder-radiusについて説明します。枠線 borderで枠線を入れる方法枠線 borderの基本的な使い方 borderは、要素に枠線を設定するCSSプロパティです。枠線の色、枠線の種類、そして枠線の太さと3つの値を指定して利用します。関連CS ...

2024/8/18

【初心者向け】CSS 内部余白paddingタグの使い方の基本を解説

HTML要素の内側に余白をつけるには、padding:100px;のようにpaddingを指定します。今回は、CSSの内部余白paddingタグの基本と注意点、外部余白marginとの違いを説明します。内側余白 paddingタグの使い方内側余白 paddingの基本下記は内部余白paddingの一番シンプルな例、「padding:100px」と内部余白を指定した例です。 ■使用例 divタグの内部余白を100pxとる ■表示例 ...

2024/8/18

【CSS 外部余白】marginの書き方・autoでの真ん中寄せ

今回は、CSSの外部余白marginの基本的な書き方、およびmargin:autoを利用した要素の真ん中寄せの方法・text-align:centerとの違いを説明します。外部余白marginの基本的な書き方 marginは、要素の外部余白(外側の余白)を調整するCSSです。margin:100px;のように設定すると、対象要素の対して100pxの外側余白をとってくれます。 ■使用例 divタグの外部余白を100pxとる [crayo ...

2024/8/18

【CSS display:flex】フレックスボックスの使い方

フレックスボックス(フレキシブルボックス)は、CSSの新しいレイアウト技法で、HTMLブロックを横並びにすることができます。フレックスボックスは、display:flexで実現でき、従来のfloatよりも柔軟なレイアウトを組むことができます。フレックスボックス display:flexの使い方フレックスボックス(フレキシブルボックス)は、CSSの新しいレイアウト技法で、HTMLブロックを横並びにすることができます。 display:flexを設定することで、 ...

2024/8/18

【CSS transition】transitionの使い方・簡単アニメーション

今回は、CSSのtransitionプロパティを利用して、下記のように手軽にアニメーションを作成する方法を紹介します。 transitionの使い方 CSSのtransitionプロパティを利用すると、あるHTML要素の状態の変化をアニメーションとして動作させることができます。 3秒間で、右に伸びていって、色が水色からオレンジ色に変化します。カーソルを外すと(スマホの方は別のところにタッチすると)、元に戻っていきます。 & ...

2024/8/18

インライン要素・ブロックレベル要素とCSS「display」の使い方

divやaなどのHTML要素は、大きくブロックレベル要素とインライン要素のどちらかに分類することができます。 CSSでレイアウト装飾するためには上記の違いを理解している必要があります。ここでは、インライン要素・ブロックレベル要素の説明と要素のブロックレベル・インラインの表示形式を変更する際に利用するCSS「display」をについて説明していきます。 HTMLのブロックレベル要素とインライン要素の違い <div>や<a>などの ...

2024/8/18

CSS positionで位置指定する方法・位置調整の使い方

ここでは、HTML要素をpxや%で位置を調整できるCSSプロパティ「position」の使い方について説明します。位置に関するスタイル position 基準位置を設定してから、要素をpxや%で配置する方法として「position」というスタイルがあります。 positionで配置方法を指定しつつ、位置指定のプロパティ「top(上)、bottom(下)、left(左)、right(右)」と合わせて要素の位置を指定することができます。 ■positi ...

2024/8/18

CSS backgroundの使い方・背景設定方法を徹底解説

CSSでbackgroundプロパティを利用すれば背景色を設定したり、背景画像を設定することができます。ここでは、CSSの背景プロパティbackgroundの使い方について紹介します。よく使うbackgroundプロパティここで説明するbackgroundプロパティ一覧は下記の通りです。カテゴリプロパティ意味背景に関するスタイルbackground-color背景の色 background-image背景の画像 background-repeat背景の画 ...

2024/10/4

CSSメディアクエリとViewPortによるレスポンシブデザインの作り方

PCやタブレット用のレイアウトとスマートフォン用のレイアウトをそれぞれ分けて画面表示しているホームページは多いと思います。そこで今回はCSSのメディアクエリとViewPort(ビューポート)という機能を利用してレスポンシブデザインを作る方法についてご紹介します。メディアクエリとViewPortを使ったレスポンシブデザイン CSSメディアクエリを使って横幅サイズで場合分けする PC用の画面とスマートフォン用の画面を切り替えたい人は多い ...

2024/8/1

CSSのfloatプロパティで要素を横並びにする方法

今回は、CSSのfloatを使った要素を横並びにする方法とfloatを解除するclearプロパティをご紹介します。 floatを利用して要素を横並びにする方法 floatを使った横並び <div>タグなどのブロックレベル要素は、基本的に上から下に向かって順番に縦に並んで表示されます。 ■縦に並ぶdivタグ(水色とピンク色)　 ■上記のソースコード [cra ...

2024/8/18

【初心者向け】CSS セレクタの優先順位・詳細度・継承

HTMLやCSSを学習している初心者の方で必ずと言っていいほどつまずくのが「CSSで指定しているのに設定が効かない」というトラブルです。 CSSでうまくスタイルを適用するためには、セレクタの優先順位や詳細度、継承の特性を理解する必要があります。今回はCSSセレクタの優先順位・詳細度や継承について紹介します。 ◾️CSSセレクタの優先順位の決まり方 !important インラインスタイルシート形式 style="...." IDセレクタ　 #top{... ...

2024/8/1

CSS擬似クラスと擬似要素および併用可否について

ここでは、知っておきたいCSSの擬似クラスと擬似要素の基本と併用可否について説明します。代表的な擬似クラスある要素が特定の状態にあるときにスタイルを指定する方法に擬似クラスがあります。例) ある要素に対して、クリックされた状態にある時ある要素に対して、カーソルが上に乗っている時などなど。擬似クラスは、以下のように指定します。セレクタ:擬似クラス{ 　任意のCSS設定 } で指定します。代表的なものとしてマウ ...

2024/8/18

【CSS HTML】CSSコードの書き方とプロパティ・タグ一覧

今回は、これから自分でホームページ作成しようとCSSの勉強を始めた初心者の方向けに、CSSの基本と書き方やよく使うプロパティ一覧を紹介します。 ※HTMLを勉強したい方は「【初心者向け】知っておきたいHTMLの基本とよく使うタグ一覧」の記事をご参考ください。 HTML・CSSを書く際は開発用エディターを利用すると便利 HTML・CSSはテキストなのでテキストエディターであればなんでも記述することはできますが、Visual Studio Code (以下VS Code)などの開発用エディターを ...

« Prev 1 2