ブログカスタマイズに必要なCSS基礎知識のまとめ（初級者向）

-
自分のブログの見栄えを少し変更するための「CSSの基礎知識」を整理しました。
スタイルを適用するHTML対象を記述するのが「セレクタ」ですが、「パターン」と呼ばれる選択条件が40種類以上あるので、よく使うであろう10数種類を選びました。

CSSの書式と名称

セレクタがスタイル適用の対象になります。
プロパティがスタイル属性です。

空白や改行をプロパティや値の前後に記述できます。
セレクタ {
  プロパティ: 値;
  プロパティ: 値;
  プロパティ: 値;
}

複数のプロパティに値を設定する場合、最後のセミコロンは省略可能ですが、省略しないほうが追記等で不具合を防げます。

よく使うセレクタパターン一覧表

セレクタパターン 例 補足
1 全指定 *{ } 全体が対象
2 タグ指定 p{ } 特定の要素
3 子孫指定 ul li{ } スペース区切り
親下の子孫指定
4 子指定 P>strong{ } >区切り
親下の子指定
子孫は適用外
5 直後要素指定 H2+P{ } +区切り
直後要素のみ
6 id指定 #lead{ } 前＃
7 class指定 .notice｛ ｝ class名前にピリオド
8 class付タグ指定 a.totice｛　｝ タグclass間にスペース不可
9 複数指定 p , li ,ol{ } カンマ区切り
10 リンクテキスト指定 a:hover { } hover マウスをのせた状態
link通常のリンク
active クリックした状態
visitedアクセス済み
11 特定の属性付要素 TD [width]{ } タグ[属性]
12 特定の属性で値が一致 P[align="right"]{ } タグ[属性＝"値"]
13 最初の兄弟要素 table tr td:first-child{ } 表の項目行指定など
14 奇数/偶数行指定 table tr:nth-child(odd/even){ } 表の奇数/偶数行指定

適用されるHTML例
class指定　<h2 class="notice"> class属性の追加方法</h2>
iｄ指定　<h3 id="lead"> id属性の指定方法</h2>
　クラス名と異なり、同じHTML内で複数の要素が同じID名をもつことは許されません。
特定の属性　
<TS width="50"> 日付 </TD>
<P align="right"> ～</P>

複数class名の注意❗
要素は複数のclassを同時に持つことができます、その場合class名を半角スペースで区切ります。
例　<h2 class="post-body entry-content"> ～</h2>

この場合、h2要素は「post-body」と「entry-content」のclass 名持っています。
この要素の指定は、.post-bodyまたは.entry-contentで行えます。

どちらか一方でなく、「post-body」と「entry-content」の両方を持った要素で指定する場合は、.post-body.entry-content{ ... }とclassセレクタを続けて記述します。
セレクタ間にスペースを入れると、子孫要素指定になるので、スペースを空けてはいけません。


CSSの記述箇所は以下の３つです

  1. タグに直接style属性を記述する。
    　例　<h1 style="font-size:16px;">見出し１</h1>
  2. styleタグをhtml　<head>タグ内に記述する。
    　例　<head> ...<style> h2 {color: blue;}</style>...</head>
  3. CSSファイルをhtmlからリンクする。
    　例　<head>タグの間に
    　　　　<link rel="stylesheet" href="css/style.css">

CSSの約束

  1. 1つの要素に対して同じプロパティが複数定義されている場合、後から出てきたほうが優先する。　上書き規則
  2. 記述場所での優先順位は
    タグに直接記述したstyle属性　＞　<head>タグ内styleタグ　＞　外部CSSファイル
  3. コメントは　/* コメント */
  4. @charset "UTF-8"などの @ルールが存在する
  5. CSSの単位　px % em

CSSのボックスモデル

要素が生成する範囲をボックスとして、以下のスタイルを指定できます。

コンテンツ
　widthプロパティとheightプロパティで指定する領域です。
　この部分にテキストや画像などの要素内容が表示されます。

Padding
　paddingプロパティで指定する内側余白です。

Border
　borderプロパティで指定する境界線です。
　太さ・線種・色を指定することができます。

Margin
　marginプロパティで指定する外側余白です。

Padding-left,top,right,bottomで四編を指定して値を指定できます。が

値を1つ指定した場合： [上下左右]の指定。
値を2つ指定した場合： [上下]　[左右]の指定
値を3つ指定した場合： [上]　[左右]　[下]の指定
値を4つ指定した場合： [上]　[右]　[下]　[左]　と時計回りで指定します。


CSSは実際に使ってみて慣れるのが一番ですね。
　

コメント

コメントを投稿

このブログの人気の投稿

分かりにくいAlexaコミュニケーション機能。呼びかけ・アナウンス・コール・メッセージの違いを整理した

-
イメージ
図：EchoShowの、ディスプレイの右外側から左方向へスライドして コミュニケーションを選択すると表示されるメニュー画面 Alexaのコミュニケーション機能は 呼びかけ・アナウンス・コール・メッセージ　と4つの機能があり（2020.9現在） 利用シーンがわかりにくいので、 既存の類似製品 と紐付けてみました。 また発信デバイス→受信デバイスの関係を整理しました。 機能 発信 → 受信 音声での利用例 アナウンス =　 宅内音声放送 Echo、スマホ → 全 Echo 全デバイスに強制音声放送する。 アレクサ、夕食だよって アナウンス して 呼びかけ =　 自動接続音声/ビデオ通話 相手の応答ボタンなしで自動で繋がる通話機能 Echo、スマホ →  指定 Echo 受信デバイスが EchoShowだと ビデオカメラ映像も自動で表示 される 。 アレクサ、リビングに 呼びかけ て コール（通話） =　 LINEの音声通話/ビデオ通話 通話するには相手が応答ボタンを押す必要がある Echo、スマホ→ 指定 Echo、連絡先 Alexaユーザー同士は互いに連絡先として登録が必要。 アレクサ、子供部屋に 電話して 、 かけて アレクサ、 電話にでて、電話を切って メッセージ 　 =　 LINEのボイスメッセージ Echo、スマホ → 連絡先 スマホではマイク入力または文字入力を、 相手には音声で伝える。 アレクサ、 メッセージ を送って 連絡先 =コールとメッセージの宛先 Alexaアプリで追加します。 アレクサ、 連絡先 を教えて スマホ は Alexaアプリ と Amazonアカウント が必要です。 全Echo＝同一アカウントで設定したEchoデバイス アナウンスと呼びかけは家にEchoが複数あれば便利 アナウンス は、使い方が簡単な...
続きを読む

ノートPCでバッテリー寿命を延ばす使い方の考察 (HP Spectre x360)

-
イメージ
リチウムイオンバッテリーバッテリーは100％まで充電したり、 逆に0％のまま放置すると劣化の原因になるといわれています。 バッテリー駆動のご使用が多い人は80％、 ACアダプターでの使用が多い人はさらに50%で、充電を止める運用ができれば寿命を延ばすのに効果的だそうです。 調べたら私のPＣではBIOSの設定で可能でしたのでレポートします。 BIOSのバッテリーの設定で充電量を変更する 機種： HP Spectre x360 Convertible 13-ap0xxx BIOSバージョン　（wmic bios get biosversion　管理者で実行） {"HPQOEM - 1072009", "F.34", "American Megatrends - 5000D"} BIOS起動手順　再起動後 esc キー＞Startup Memuが現れたら＞ f10 キーを押す BIOS > Coniguration > Battery Care Function で充電量を変更します。 ＡＣアダプター利用がメインの為、デフォルト100%から50%に変更しました。 ＡＣアダプターで利用するとでバッテリーは49%程度を維持して動作しています。 Battery Remaining Time を Enabled にすると バッテリー利用では、 バッテリーの残り時間を表示します。 50%運用ではモバイル利用でのバッテリ切れは早まりますが 付属の ACアダプターは65WのUSB-PDアダプターで 30分で50％の急速充電ができるのでこの運用を続けてみます。 バッテリー寿命の長持ち機能はブランドや機種で異なります。 他社参考 →　 「バッテリーいたわり充電モード」｜ VAIO お手元のＰＣの機能を調べてみてください。 バッテリの劣化の種類 リチウムイオンバッテリーの 劣化 は 「サイクル劣化」と「保存劣化」の2つです。 サイクル劣化 　→　 劣化は防げない バッテリーが充電と放電を繰り返すうちに、内部の化学反応などによって劣化が進むこと。 一般的には300～500回程度の充電と放電を繰り返すと容量が約半分になる。 保存劣化 　→　 改善が可能 　　　 使わずに放置したままでも劣化する現象。 温度の高い状態、満充電...
続きを読む

USB Type Cハブ 使用レビュー　dodocool 7in1とHP Spectre

-
イメージ
新しく買った薄型ノートＰＣはHDMIポートがないため、 HDMI外部ディスプレイを接続するために dodocool USB C ハブ 7in1 を購入しました。 \3500程度の廉価なハブですが、PowerPD100W対応で 特に不具合もなく、配線もすっきり使えているのでレビューします。 HDMI接続外部ディスプレイ PC： HP Spectre x360 外部ディスプレイ： I-O DATA EX-LDQ241D　(HDMI接続) 24インチのWQHDモニターですが WQHDの2560 x1440 を問題なく表示でき、当初の目的は達成しました。 ハブは 4K をサポートしていますが 4K 3840x2160モニターは持ってないので試していません。 PowerPD　100W 電源供給 PC付属のACアダプターは 65W のUSB-Cタイプ でした。 ハブが100 Wサポートなので、ACアダプター出力をハブに接続できて ACアダプター配線がすっきりしました。充電しながら利用できます。 USB 3.0とSD /Micro SD USB3.0は三つで外付けHDなどを接続使用できます。 最大転送速度は5Gbp/sです。 SD/Micro SDカードリーダーが付いています。 遭遇したUSB障害について PCを使っていて、はじめに障害に気づいたのは 外部ディスプレイが表示されなくなった 時です。 次に ACアダプター接続なのにバッテリーがどんどん減っていく のに気づきました。 PCを再起動しても、少し休ませても改善しませんでした。 ACアダプターをPCに直接接続しても、症状が同じなので 原因はUSB C ハブではないと判断。 PCのデバイスマネジャーを見てみると USBコネクターマネジャーにエラー が出ていました。 UCM-UCSI ACPIデバイスがエラーでメッセージは 問題が発生したのでこのデバイスは停止しました。(コード43) ネットを調べると、 Microsoft が提供する、組み込みコントローラーを備えた USB Type-C システム用のインボックス UCSI ドライバーのようです。 対策としてUSBドライバーをアップデートするとか、 バッテリをはずして再起動するとか情報が多く特定できません。 PCを連続稼働していて結構熱くなっていたので、 シャットダウンして明日症...
続きを読む