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| 基本的なこと | このブログの読者になる | 更新情報をチェックする

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 | このブログの読者になる | 更新情報をチェックする

2016年05月04日

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

同じページ内で指定した場所へジャンプさせる方法です。
よく、ページの最初にメニューがあって、そこから同じページの所定の場所にジャンプしたり、ページの下の方からページの先頭にジャンプしたりする時に使います。

実際の例として
"1へジャンプ"をクリックして、下の方の"1"にジャンプ(リンク)させてみます。

まず、ジャンプ先の"1"に名前を付けます。
名前は何でも構いません。ここでは"1"とします。
では、HTMLのソースコードの編集です。
"1"の前後に次のように追記します。

<a name="1">1</a>

次はジャンプ元(リンク元)の"1へジャンプ"への編集です。
"1"へリンクを張ります。
"1へジャンプ"の前後に次のように追記します。

<a href="#1">1へジャンプ</a>

以上で完了です。
では早速クリックしてみてください。

1へジャンプ




 ↓

  ↓

 ↓

  ↓

 ↓






1
っと、
飛んできましたね!


関連ページ
目次
ラベル:リンク
posted by Yuuu69 at 18:25| HTML | このブログの読者になる | 更新情報をチェックする