名目賃金上がるも実質賃金あがってない、か？
どうやら、そのようなのだがぁ・・・
ならば、
物価高による実質賃金目減り分を
サイトつくり + 広告 で、
なんとかならないだろうか・・・
なんとかなるっ! 可能性がある。
初期費用が少ないので
また、レンタルサーバー代など月々のランニングコスト少ないので、
リスクは小さめと評価できるだろう・・・
そこで、
ここ数回の記事はアフィリエイトサイト運営はいかが？という記事なのだ。
今回は、ＣＳＳファイルについて。
ＣＳＳファイル 書き方
ＣＳＳ（ カスケーディング スタイル シート ）、
それは、
ＨＴＭＬファイル（ 前回記事をよんで、ね 🐨）に
記述したサイト文章、写真・画像などを飾るもの。
書き出しは、
＠charset “utf-8”;
（ ＠ は、実際には半角英数で書いてね）
セレクタ
そして、
たとえば、文字を赤色にしたい・・・
その場合、
ＨＴＭＬファイルに書いた、
＜p＞今日は、ＨＴＭＬ５の書き方を記事にしています。＜/p＞
を赤色文字にしたい場合、
ＣＳＳファイルには、
＠charset “utf-8”;
p{ color:red; }
（オーソドックスには、
＜p＞ ＜/p＞ の親要素、＜body＞タグをセレクトして
body{ color:red; }
だとおもいますが説明の便宜上・・・）
pタグ（ ＜p＞ ＜/p＞）をセレクトして
color というプロパティ、プロパティ値 red を指定、
このように、
ＣＳＳファイルの書き方は、
飾りたい要素をセレクト（選択）して、
プロパティ：プロパティ値； というルールを適用する、
ということ。
セレクタ{ ルール } というルールセット（と、呼んだと思う）を 書くだけ、
基本的には、たった、これだけ。
クラス
しかし、
前回記事、ＨＴＭＬファイルには、
＜p＞ＨＴＭＬ５の書き方は・・・（すでに、表に書きましたあ～）＜/p＞
というｐ要素があり、こちらも赤色文字になります・・・
（こちらも赤色文字になってしまいます・・・ ）
こちらは黒色文字のまま、さきのｐ要素だけ赤色文字にしたい、
そのためには、ＨＴＭＬファイルを、
＜p class=”akairomoji”＞今日は、ＨＴＭＬ５の書き方を記事にしています。＜/p＞
と書き直す！！
そして、
ＣＳＳファイルには、
.akairomoji{ color:red; }
と書く。
. （ドット）は、class属性をセレクトするときの書き方。
赤色文字にしたいｐ要素にclass（クラス）属性 = “属性値（うえの例の場合、akairomoji ）” をつけておけば、
ＣＳＳルールセット 、 .akairomoji{ color:red; } で、同じクラスの要素は全部赤色文字！！
クラス属性ではなく、id 属性を使う方法もある。
やり方は同じなのだが、id 属性は１回しか使えないので、
ＣＳＳルールセット 、 #akairomoji{ color:red; } で、全部一挙に赤色文字、とはいかない・・・
なお、
クラス属性値（ＨＴＭＬファイルのほうの記述）は、 redmojiでもよく、
ただし、そのばあい、
セレクタ（ ＣＳＳファイルのほうの記述）は .redmoji にして
対応させておかないといけない・・・
aomojiというクラス、.aomoji{ color: red; } というルールセットの対応でも、
文字を赤色にできるとおもいますよ。
詳細度
ならば、クラス属性は便利だから、id 属性はいらない？
いいえ、
ＣＳＳ適用の優先度が id 属性のほうが高いんです、
たくさんの要素を飾っていると、
思うように文字などを飾れないことがある、
そのようなとき、より詳細度が大きいもの（ ちなみに id 属性は、詳細度１００だったとおもう）を使う。
承継
そのほか、承継ということがあって、
予想通りの表示にならないこともあるのだがぁ・・・
わすれちゃった😸
複雑な構造のサイトをつくらなければ、
いいんです（個人的主張 😀）
ブラウザ
左側に閲覧するたび１階ずつ階数が増えるマンション、 を表示する２カラムなのだがぁ～ 古いコーディングをしているので 閲覧する人が使うブラウザによっては、 そのように表示されていない可能性があることを予想しています・・・ 新しいものに若干修正する必要がないとは言い切れない・・・ しかし、 シングルカラムで、 上から下まで、スクロール（スマホなら、指でなぞって下のほうへ読み進んでもらう・・・）して、 読めれば、広告を見てもらえば、 サイトとして成立している のではないか？ むつかしく考えすぎず、 たのしくサイトをつくる、 そのほうが良いか、と・・・ 段組みとか、複雑な構造で かなり盛沢山なサイトは賑やかで魅力的なものだろうけど、 大手有名会社のサイトがシングルカラム だったりする・・・ このワードプレスで遊んでいますブログもシングルカラム🦙 書店、通販で本を買って学習したり、 スクールに通ったり、 ネットで情報をみつけたり、 発展が可能で面白いものだとおもう・・・ スマホ対応には、 スマホ用とパソコン用（もちろん、タブレットも、ですよ）で ＣＳＳファイルを違うものを使う方法、 ＠media ルールを使う方法、 などなどあるようですが、 振り分けよりも簡単な（と、思う＠media ルールでやっている。 数年前に買った何冊かの本に書かれていたが、 google の サイトにもあった。 スマホファーストでサイトをつくる、 それがフルードリキッドデザインの最新の（数年前に買った本だがぁ・・・🐶）方法らしいのだが、 多数の閲覧者がいるスマホサイトだけつくる、 （ＰＣ読者には読んでもらわなくてもいい、という割り切ったサイト） そのようなサイトもあったとおもう・・・ レンタルサーバーを間借りする（そのとき独自ドメインもセットで用意して設定してもらう?） そして、ＨＴＭＬファイル、ＣＳＳファイルを書いてアップロードして公開。 個人的経験では、 メモ帳（windowsのばあい）などのテキストエディタで書いたＨＴＭＬファイル、ＣＳＳファイルを アップロードするために、 別途ＦＴＰソフトを用意しなくて済んだ、 レンタルサーバー管理画面からアップできた！！ wanko-2021april1.sakura.ne.jpサイトを訪問して ソース（パソコンならば、ページ上を右クリックすると、ブラウザがそのためのメニューを用意してくれているとおもいます・・・）を 表示してみると、 だいたいサイトをすぐかけると思う・・・ なお、cannonical属性のところは、むかし複数のサイトでSEO効果が分散しないために書いた記憶なのだが、 削除したり、改良したり、ずいぶんと変わってしまったため、意味があるかどうかわからないので、 無視するか、本、サイトなどで学習してね。 スマホの場合は、 ソースの表示はできるのだろうか・・・ もしも、できない場合・・・ あとで、テキストファイルを作って公開しておこうかと・・・ おもわなくもない。スマホ対応
アップロード