2020年01月06日

目次

はじめに
そもそもブログ(blog)って何ってところから
まず始めに、スタイルシート(CSS)の編集について

リンク
ページ内にリンクを貼ってみた

文字(フォント)
蛍光ペンで書いたように文字の背景に色を付けてみた
posted by Yuuu69 at 00:00| HTML | このブログの読者になる | 更新情報をチェックする

2018年01月04日

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

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

 なので、皆さんが使っているブログも殆どがスタイルシートが外部ファイルとして別に存在して、それも編集可能になっているのもあると思います。
この、seesaaもそうなっています。
ですが、seesaaでは以下のような但し書きが書いてありました。
「弊社ではCSSに関する技術的サポートは一切行っておりませんので、知識のある方のみ編集等を行なっていただきますよう、お願いいたします。」まぁっ、自己責任でいいですよ〜。。。

 スタイルシートはHTML本文の中でも直接記述することも出来るので、スタイルシートのファイルを直接編集できないブログでも、使用することは可能です。
ただ、その方法もW3Cによって非推奨になってはいますが、ブログで予めメニュー等で設定されているフォントの色を変える等の機能は、この直接記述のスタイルシートが使用されているようです。
(数年後にはどうなっているか分かりませんが。。。)

と言う状況なので、ここでは、
@スタイルシートを編集する方法
AHTMLにスタイルシートを記述する方法
で、説明していきたいと思います。

試しにやってみます。
文字を赤にしてみます。

@スタイルシートの編集
クラスを使って適用させます。
スタイルシートに次の様に記述します。

「.font1 {color:#ff0000;}」
ここで、「.font1」がクラス名で自由に名前を付けれます。
このブログで実際に編集した様子です。
20180106-02.JPG

で、次にブログの本文(HTML)に次の様な記述をします。
「<p class="font1">文字色に赤を指定</p>」

実際のサンプルです

文字色に赤を指定



次は
Aブログ本文(HTML)にスタイルシートを記述する方法です。
「<p style="color:#ff0000;">文字色に赤を指定</p>」

実際のサンプルです

文字色に赤を指定



どうでしょう、今見ているブラウザで右クリしてプロパティか何か、ページのソースコードを表示して実際の記述を確認してみてください。
ちなみに、実際のこのブログのHTMLの内容です。
20180106-03.JPG

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

それから、スタイルシートを編集して保存しても、ブラウザ上で変更が反映されない場合があります。
それは、ブラウザがスタイルシートの前のファイルを保存してしまっているためなので、強制的に再読み込みを実施する必要があります。それを“スーパーリロード”と言います。
やり方は、「ctrl」+「F5」です。

次ページ:
前ページ:・そもそもブログ(blog)って何ってところから


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

2017年05月07日

蛍光ペンで書いたように文字の背景に色を付けてみた<background-color>

蛍光ペンでなぞった様に文字の背景に色を付けてみます。

こんな様なソースを記入します。
<span style="background-color:#ffff00;">この背景が黄色になります</span>

で、実際にやってみるとこうなります。

この背景が黄色になります

#ffff00は黄色の色番号(16進数)です。

代表的な色番号(カラー名 / 色番号)
black / #000000

gray / #808080

silver / #C0C0C0

white / #FFFFFF

blue / #0000FF

navy / #000080

teal / #008080

green / #008000

lime / #00FF00

aqua / #00FFFF

yellow / #FFFF00

red / #FF0000

fuchsia / #FF00FF

olive / #808000

purple / #800080

maroon / #800000



関連ページ
目次
posted by Yuuu69 at 17:41| HTML | このブログの読者になる | 更新情報をチェックする

広告


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

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

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


×

この広告は180日以上新しい記事の投稿がないブログに表示されております。