記事一覧 - WEBST8のコードブログ

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 3