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