CSS入門

このタグでブログを書く

言葉の解説

ネットで話題

CSS入門

このタグの解説について

この解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。

プログラミングとウェブデザインの勉強メモ•4年前

CSS|overflowプロパティの使い方

overflowプロパティの基本的な使い方について書きます。overflowプロパティは、要素の内容が表示領域に収まらない場合に、はみ出した部分をどのように表示するのかを指定するプロパティです。具体的な書き方は、サンプルコードを確認してください。記述の仕方 overflowプロパティの基本情報サンプルコード表示例まとめ記述の仕方 /* 記述例 */ セレクタ名{ overflow: 値; } セレクタ名{ overflow: x軸方向の値 y軸方向の値; } セレクタ名{ overflow-x: 値; } /* x軸(横)方向の指定 */ セレクタ名{ overflow-y: 値; …

#CSS入門#CSS

ネットで話題

160ブックマーク CSSリファレンス(CSS入門) - とほほのWWW入門 CSSとは？ CSSの例 CSSの指定方法 style属性で指定する方法 <style>～</style>で指定する方法 <link>を用いた外部CSSファイルで指定する方法 @importを用いた外部CSSファイルで指定する方法タグと要素とセレクタ継承セレクタ CSSネスティングコメント優先度の順位(詳細度) 長さの単位 CSSのメリット見栄えを一度に...

www.tohoho-web.com

136ブックマーク超初心者のためのHTML・CSS入門講座 - NO TITLE

www.notitle-weblog.com

113ブックマークとほほのCSS入門 - とほほのWWW入門とほほのCSS入門 (CSSリファレンス) トップ > CSSリファレンス [ABC順] 概要 CSS入門リンクサンプル表記について CSS3関連規約 CSS新機能セレクタ * { ... } E { ... } ns|E { ... } E, F { ... } E.class E#id E F { ... } E > F { ... } E + F { ... } E ~ F { ... } E || F { ... } [attr] [ns|attr] [attr="val"...

www.tohoho-web.com

77ブックマーク出来る限り短く説明する React + Tailwind CSS 入門（忙しい人向け）

zenn.dev

75ブックマークウェブの作り方。〜HTML入門,CSS入門,携帯電話向けウェブの作り方など〜

www.marguerite.jp

48ブックマークいまさらHTML,CSS入門講座方向アイコンと新規ウィンドウで開くアイコン 140色カラーコード / カラーネーム FFFTPの使い方相対単位と絶対単位絶対パスと相対パス Google アナリティクスに登録 Google アナリティクスとウェブマスターツールの関連付け Wi-Fi Nexus7(2012)の設定例 Wi-Fi iPhone5の設定例かめぞうブログで使えるHTMLタグ Window...

homepagelecture.web.fc2.com

42ブックマーク margin、paddingとは？：CSS入門・・・と言われても、何のことだか、まるで分からないと思います。 ▲ページの先頭に戻る 2：margin、paddingを図解まるで分からないと思うので図解します。margin、paddingは、次のように「border」を境にして、外側の余白と、内側の余白を指定することができるのです。記事「グループ化【<div>タグ】：HTML入門」で...

kumacrow.blog111.fc2.com

42ブックマーク【主要タグ一覧＆解説】5分でわかるHTML・CSS入門 -

paiza.hatenablog.com

41ブックマーク利用者爆増中初めてでもわかるTailwind CSS入門基礎編 | アールエフェクト

reffect.co.jp

関連ブログ

プログラミングとウェブデザインの勉強メモ•4年前

CSS|コメントの役割とコードの視認性

CSSの「コメントの役割」と「コードの視認性」について書きます。まず、コメントの役割を再確認します。その上で、コメントをデザイン化してコードを読みやすくしていくことを考えます。コメントの役割 CSSコードの視認性コメントのデザイン化 CSSが煩雑になってきたら考えることまとめコメントの役割スタイルを無効にするファイル内にメモを残すコメントは、一時的にスタイルを無効にして、デザインを見比べるときに用います。また、メモをコメントとして残すときに使います。 CSSコードの視認性 CSSの記述量が多くなると、どこに何を書いているのか分かりにくくなります。そこで、メモをコメントとして残して…

#CSS入門#CSS#コメント#視認性

プログラミングとウェブデザインの勉強メモ•4年前

CSS|box-shadowプロパティの使い方

box-shadowプロパティの基本的な使い方について書きます。box-shadowプロパティは、要素に影を付けるプロパティです。具体的な書き方は、サンプルコードを確認してください。記述の仕方 box-shadowプロパティの基本情報サンプルコード表示例使用例まとめ記述の仕方 /* 記述例 */ セレクタ名{ box-shadow: 水平方向の距離垂直方向の距離ぼかし距離広がり距離影の色 (inset); } box-shadowプロパティの基本情報 box-shadowプロパティが取る値について説明します。水平方向の距離水平方向の影の距離を指定する正の値だと右に、負…

#CSS入門#CSS

プログラミングとウェブデザインの勉強メモ•4年前

CSS|text-shadowプロパティの使い方

text-shadowプロパティの基本的な使い方について書きます。text-shadowプロパティは、テキスト(文字列)に影を付けるプロパティです。具体的な書き方は、サンプルコードを確認してください。記述の仕方 text-shadowプロパティの基本情報サンプルコード表示例表示の比較まとめ記述の仕方 /* 記述例 */ セレクタ名{ text-shadow: 水平方向の距離垂直方向の距離影のぼかし半径影の色; } text-shadowプロパティの基本情報 text-shadowプロパティが取る値について説明します。水平方向の距離水平方向の影の距離(px、emなど) 正の…

#CSS入門#CSS#text-shadow

プログラミングとウェブデザインの勉強メモ•4年前

CSS|box-sizingプロパティの使い方

box-sizingプロパティの基本的な使い方について書きます。box-sizingプロパティは、要素の幅と高さをどのように計算するのかを設定するプロパティです。つまり、要素の幅と高さにパディングとボーダーを含めるか含めないかを指定します。具体的な書き方は、サンプルコードを確認してください。記述の仕方 box-sizingプロパティの基本情報サンプルコード content-boxの場合表示例 border-boxの場合表示例余談まとめ記述の仕方 /* 記述例 */ セレクタ名{ box-sizing: 値; } box-sizingプロパティの基本情報 box-sizingが取る…

#CSS入門#CSS

プログラミングとウェブデザインの勉強メモ•4年前

CSS|border-radiusプロパティの使い方

border-radiusプロパティの基本的な使い方について書きます。border-radiusプロパティは、要素の角を丸くするプロパティです。具体的な書き方は、サンプルコードを確認してください。記述の仕方 border-radiusプロパティの基本情報サンプルコード 4つの角をまとめて指定する場合表示例 4つの角をそれぞれ指定する場合表示例 4つの角を個別に指定する場合表示例まとめ記述の仕方 /* 記述例 */ /* 4つの角をまとめて指定する場合 */ セレクタ名{ border-radius: 楕円の半径; } /* 4つの角をそれぞれ指定する場合 */ セレクタ名{ bo…

#CSS入門#CSS#角丸#border-radius

プログラミングとウェブデザインの勉強メモ•4年前

CSS|borderプロパティの使い方

borderプロパティの基本的な使い方について書きます。borderプロパティは、要素に枠線を付けるプロパティです。具体的な書き方は、サンプルコードを確認してください。記述の仕方 borderプロパティの基本情報サンプルコード表示例まとめ記述の仕方 /* 記述例 */ セレクタ名{ border: スタイルの種類太さ色; } 上記でボーダーのスタイル、太さ、色をまとめて指定します。上下左右のボーダーをそれぞれ記述する場合は、border-top、border-bottom、border-left、border-rightで指定します。また、「スタイルの種類」「太さ」「色」を個別に…

#CSS入門#CSS#border#枠線

プログラミングとウェブデザインの勉強メモ•4年前

CSS|z-indexの使い方

z-indexの使い方について書いています。z-indexで、要素の重なり順を指定します。「position」とセットで使います。記述の仕方下準備表示例 z-indexで重なり順を指定する表示例まとめ記述の仕方 /* 記述例 */ セレクタ名{ z-index: 数値; } z-indexで指定する数値は、大きい方が上になります。数値はマイナスも指定できます。下準備まず、赤、緑、青の四角形を用意して、positionで重ねます。デフォルトでは、あとに書いた要素が上に重なります。z-indexは、まだ使用しません。 <div id="sample1"> <div id="samp…

#CSS入門#CSS#z-index

プログラミングとウェブデザインの勉強メモ•4年前

CSS|リストのCSSについて

リストのCSSについて、まとめています。リストの先頭に表示される"黒丸"や"数字"のことをマーカーと言います。マーカーの種類や位置を変えることができます。 list-style-type 表示例 list-style-image 表示例 list-style-position 表示例 list-style 参考サイト list-style-type マーカーの種類を指定出来ます。 ul{ list-style-type: disc; /* 円形(初期値) */ } 文字やアイコンフォントも指定できます。下記以外にもあるので、各自で調べてください。 ul{ list-style-type: sq…

#CSS入門#CSS#list

プログラミングとウェブデザインの勉強メモ•4年前

CSS|aタグのCSSについて

aタグのCSSについて、基本的なことに絞って書いています。リンクの下線を消すマウスカーソルの種類 aタグの疑似クラスリンクの下線を消す aタグは、デフォルトで下線が付いています。下線を表示したくない場合は、text-decoration: none;を指定します。 <a href="https://shiroyuki2020.hatenablog.com/">元Webデザイナー兼コーダーの備忘録</a> a{ text-decoration: none; } マウスカーソルの種類マウスカーソルにはいくつか種類があります。詳しくは参考サイトを確認してください。aタグでカーソルの種類を指定…

#CSS入門#CSS#カーソル#マウスカーソル#マウスポインタ#:link#:visited#:hover#:active