2018年01月04日

まず始めに、スタイルシート(CSS)の編集について

 現在、ホームページやブログに使用されているプログラム(HTML)には、例えば文字の色を赤にするとかの表示方法を指定する為にスタイルシート(CSS)というのが使用され、HTMLの中で表示方法を指定することは行われなくなっています。

 これは、アクセサビリティを向上させるため、つまり色々な人(障害を持っている人とか)が、色々な機器、色々なブラウザからでもホームページやブログにアクセス出来て閲覧出来るようにするために、内容の構成(構造)を指定するのはHTMLにして、その表示方法を指定するのはHTMLから分離させたスタイルシート(CSS)にするようにWEB技術の標準化を進める“W3C”(World Wide Web Consortium)と言う組織が推奨しているためです。

 なので、皆さんが使っているブログも殆どがスタイルシートが外部ファイルとして別に存在して、それも編集可能になっているのもあると思います。

この、seesaaもそうなっています。

ですが、seesaaでは以下のような但し書きが書いてありました。

「弊社ではCSSに関する技術的サポートは一切行っておりませんので、知識のある方のみ編集等を行なっていただきますよう、お願いいたします。」まぁっ、自己責任でいいですよ〜。。。


 スタイルシートはHTML本文の中でも直接記述することも出来るので、スタイルシートのファイルを直接編集できないブログでも、使用することは可能です。

ただ、その方法もW3Cによって非推奨になってはいますが、ブログで予めメニュー等で設定されているフォントの色を変える等の機能は、この直接記述のスタイルシートが使用されているようです。

(数年後にはどうなっているか分かりませんが。。。)


と言う状況なので、ここでは、

@スタイルシートを編集する方法

AHTMLにスタイルシートを記述する方法

で、説明していきたいと思います。


試しにやってみます。

文字を赤にしてみます。


@スタイルシートの編集

クラスを使って適用させます。

スタイルシートに次の様に記述します。


「.font1 {color:#ff0000;}」

ここで、「.font1」がクラス名で自由に名前を付けれます。

このブログで実際に編集した様子です。

20180106-02.JPG


で、次にブログの本文(HTML)に次の様な記述をします。

「&ltp class="font1"&gt文字色に赤を指定&lt/p&gt」


実際のサンプルです

文字色に赤を指定



次は

Aブログ本文(HTML)にスタイルシートを記述する方法です。

「&ltp style="color:#ff0000;"&gt文字色に赤を指定&lt/p&gt」


実際のサンプルです

文字色に赤を指定



どうでしょう、今見ているブラウザで右クリしてプロパティか何か、ページのソースコードを表示して実際の記述を確認してみてください。

ちなみに、実際のこのブログのHTMLの内容です。

20180106-03.JPG


とりあえず現状をふまえて考えると、ブログ全体のページに共通する内容、今後作るページも含めて指定をしたい時はスタイルシートファイルを編集するのが簡単ですが、一時的に設定をするだけなら、本文に直接書き込んだ方が簡単ですね。


それから、スタイルシートを編集して保存しても、ブラウザ上で変更が反映されない場合があります。

それは、ブラウザがスタイルシートの前のファイルを保存してしまっているためなので、強制的に再読み込みを実施する必要があります。それを“スーパーリロード”と言います。

やり方は、「ctrl」+「F5」です。


次ページ:




関連ページ


posted by Yuuu69 at 18:44| 基本的なこと | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。