忍者ブログ
moshimoさんのショップ(ホームページ)作成ツール超できすぎくんの便利な使い方をここに記載していきます。
[38]  [37]  [36]  [35]  [34]  [33]  [32]  [31

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

超初心者の方のためのHTML入門その4

おはようございます、toshihiroです。



超初心者のためのHTML講座


私自身が独学で得た知識です。
基本も何もあったものではないかもしれません。
解りやすく進めていくつもりです。
ご不明な点については、遠慮なくコメントに質問をして下さい。



前回、初めてのHTMLソースを皆さんご自身で作っていただきました。
うまくできましたか?

HTMLはタグで記載します。必ず開始タグと終了タグを記載します。

今回は、文字の大きさを変えたり、文字や背景に色を付ける方法を解説します。




文字の大きさを変えたり、文字に色を付けたりする方法には、2つの方法があります。
HTMLで直接指定する方法とスタイルシートで指定する方法です。

HTMLで指定する方法は、現在あまり勧められていません。
新しいブラウザソフトでは、未対応となっている場合があるようですので、確認が必要です。
文字の大きさを変える方法は、<font size="サイズ">表示したい文字<⁄font>このサイズは、1~7を指定します。標準サイズは、3です。この他に-2~+4で指定する方法もあります。
文字の大きさを変えるのは、<small>文字を小さく<⁄small>や<big>文字を大きく<⁄big>があります。

それでは、スタイルシートでは、どのように指定するのでしょうか?

まず、<head>の中で指定する方法とタグの中で指定する方法それに別ファイルにする方法があります。

別ファイルにする方法と<head>に記載する方法はその指定方法に大差はなく、同じ指定を何度もしなくて済みその指定を呼び出して使うことが可能です。
具体的には、超できすぎくんでは、別ファイルにできすぎくんでは、<head>に記載されています。もちろん、できすぎくんの<head>に記載されているスタイルシートも別ファイルにする方法をおすすめします。
<head>にスタイルシートを指定するためには、
<style type="text/css">
.catch-copy {
font-size: 25px;
}
<⁄style>

このように、指定します。
HTMLでは、どのように指定をするのか?
<p class="catch-copy">キャッチコピーです< ⁄p>
別ファイルでは、ファイル名に「top」・「common」・「main」などですが、拡張子はCSSとします。つまり、「top.css」・「common.css」・「main.css」となります。

では、HTMLに直接書き込む方法は?
HTMLのタグにスタイルシートを書き込みます。

タグの種類は、「div」・「span」などの他色々なタグに書き込みができます。
<p style="font-size:18px;">キャッチコピーです<⁄p>のように指定します。

カラーはどのように指定をするのか?
こちらもHTMLで、直接してする方法は勧められていません。
<font color="red">または<font color="#FF0000">もしくは<font color="#F00">となります。

カラーは、redのように、いくつか名前で使えるものもありますが、ブラウザソフトによってはこの指定がされていない場合がありますので、名前で指定するのはやめた方が良いようです。
この他に、RGBそれぞれ00~FFの2桁で表示するか、000~255の3桁の数字で表示します。が、2桁で表示するのが通常のようです。ただし、この2桁の00~FFが同じ場合は、1桁で表示が可能となっています。

スタイルシートでは、次のように表示します。
.red {
color:#FF0000;
}
となります。
HTMLでは、フォントサイズと同じようにします。

<p class="red">赤色<⁄p>

このようになります。

同じように背景に色を付けるためには、HTMLでは、<text="#0000FF" bgcolor="#FF0000">となりますが、HTMLの指定では、ページ全体の色の指定になってしまいます。
スタイルシートでは、部分毎に背景色を変えることも可能です。
設定は、次のように行います。
p {
margin: 5px;
color: #FF0000;
background-color:#e0FFFF;
}

.bg-color-red {
margin: 5px;
color: #0000FF;
background-color:#FF0000;
}

そして、HTMLでは、次のように記載します。
<p>文字の色は赤で、背景色はライトシアンです<⁄p>

<div class="bg-color-red">文字の色は青で、背景色は赤色です<⁄div>

次回は、実際に超できすぎくんの自由テキストで行う設定方法を解説します。

拍手[0回]

PR

ショップできすぎくん
こんにちは!
もしも初心者で、こちらの方法を頼りにショップ作りをさせて頂いていた者です。
いつもどうもありがとうございます。
ところで、ショップできすぎくんがリリースされて、自分のショップを全てこちらに移行したのですが、使い勝手がよく分からず困っています。
忍者ツールのアクセス解析タグを各ページに埋め込む方法が分からなくなってしまいました。
超できすぎ君の時は、タグをそのまフリースペースに貼りつければOKだったのですが、今はそうするとアルファベットががそのままサイトに表示されるだけです。
ショップできすぎ君の方もアドバイス頂けると助かります。宜しくお願い致します。
お名前
タイトル
文字色
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
非公開コメント
この記事にトラックバックする:
カレンダー
09 2017/10 11
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
フリーエリア

超できすぎ君を使いこなしているショップです。
とても参考になる素敵なショップです。
私のブログと合わせてご参考にしてください。



最新トラックバック
プロフィール
HN:
toshihiro
性別:
男性
バーコード
ブログ内検索
アクセス解析
カウンター

忍者ブログ [PR]

graphics by アンの小箱 * designed by Anne