サイト作ろう2


名目賃金上がるも実質賃金あがってない、か?

どうやら、そのようなのだがぁ・・・

ならば、

物価高による実質賃金目減り分を

サイトつくり + 広告 で、

なんとかならないだろうか・・・

なんとかなるっ! 可能性がある。

初期費用が少ないので

また、レンタルサーバー代など月々のランニングコスト少ないので、

リスクは小さめと評価できるだろう・・・

そこで、

ここ数回の記事はアフィリエイトサイト運営はいかが?という記事なのだ。

今回は、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効果が分散しないために書いた記憶なのだが、

削除したり、改良したり、ずいぶんと変わってしまったため、意味があるかどうかわからないので、

無視するか、本、サイトなどで学習してね。

スマホの場合は、

ソースの表示はできるのだろうか・・・

もしも、できない場合・・・

あとで、テキストファイルを作って公開しておこうかと・・・

わなくもない。

,

コメントを残す

メールアドレスが公開されることはありません。