htmlタグ divタグって何だ？
div div div
このdivタグって何だ？
と前々から思っていました。
ワードプレスだったり
htmlのテンプレートをいじっていると
良く出てくるのが<div>というタグです。
適当にあしらっていたんですが、
ちょっと気になっていたので概要だけ調べてみました。
<div>
nnnnnnnn
mmmmm
bbbbbbb
</div>
と囲うことで<div>~</div>の間が
グループ化されるのです。
ーーーーーーNMB４８グループーーーーーーーーー
<div style="border: 1px solid #555;">
nnnnnnnnnnnnn
mmmmmmmmmmmmmm
bbbbbbbbbbbbbbb
</div>
この例でいくと、
ーーーーーーNMB４８グループーーーーーーーーー
nnnnnnnnnnnnn
mmmmmmmmmmmmmm
bbbbbbbbbbbbbbb
こんな感じになります。
・ある領域を指定したい。
・ある領域だけ色を変えたいなど
領域を指定する場合に使うのが
この<div>~</div>です。
この<div>~<div>はタグをとじ忘れると
大きくレイアウトを崩すことが多いです。
領域が崩れるので。
なのでレイアウトが大きく崩れちゃったと
いう時にはこの<div>~</div>が正しくなっているか
チェックしてみて下さいね。
まだ概要なので
もうちょっと詳しく調べたいと思います。
本日もご訪問ありがとうございました～。
最近、お腹だけ巨人化しています。
htmlタグ画像の大きさを変える方法
ｈｔｍｌタグで画像の大きさを変える方法について。
なんとなく適当にやっていても
なんとかなりますが、一応復習できるようにまとめておきます。
ではバッタちゃんに登場していただきます。
ジャーン！
画像を使うには次の img タグ を使います。
<img src="画像URL" />
<img src=""/>の ” と " の間に
http://～から始まる画像URLを入れます。
画像のサイズの変更の仕方
では次に画像のサイズの変更の仕方ですが、
サイズを指定するときには次のように width と height を使います。
例
<img src="http://zen-affiliate.com/wp-content/uploads/2013/06/P6140006.jpg"
width=180 height=120>
width は横幅 height は縦幅を表します。
ここの数字を変えることで縦長にしたり横長にすることができます。
タテヨコを同じ比率で拡大、縮小したい場合には
％表示を使います。（ブラウザに対する比率を表します）
<img src="http://zen-affiliate.com/wp-content/uploads/2013/06/P6140006.jpg"
width=50% height=50%>
まとめ
１ 画像のタテヨコの比を変えたい場合
width height を変更する
２ 画像のタテヨコを同じ比率で表示したい場合
width height に ％で大きさを指定する。
最後まで読んでいただき
ありがとうございました。
htmlタグ 文字の色を変える方法
htmlタグ 文字の色を変える方法について。
こんにちは、ぜんです。
文字の色を変える方法に
ついてお伝えします。
文字の色を変える方法
文字の色を変えるには
大きく分けて２つの方法があります。
下記の黄色の部分をいろいろ変えてみてください。
１ <font color="色番号もしくは色名称">色を変える文字</font>
２ <span style="color:色番号もしくは色名称">色を変える文字</span>
例
色名称で変えてみます。
１ 赤色 <font color="red">色を変える文字</font>
色を変える文字
色番号で変えてみます。
２ 青色 <span style="color:#0000ff">色を変える文字</span>
色を変える文字
htmlでは１６の基本的な色を次のように定義しています。
| 色名称 | 色番号 | 色 |
| white | #ffffff | white #ffffff |
| silver | #c0c0c0 | silver #c0c0c0 |
| gray | #808080 | gray #808080 |
| black | #000000 | black #000000 |
| red | #ff0000 | red #ff0000 |
| maroon | #800000 | maroon #800000 |
| yellow | #ffff00 | yellow #ffff00 |
| olive | 808000 | olive 808000 |
| lime | #00ff00 | lime #00ff00 |
| green | #008000 | green #008000 |
| aqua | #00ffff | aqua #00ffff |
| teal | #008080 | teal #008080 |
| blue | #0000ff | blue #0000ff |
| navy | #000080 | navy #000080 |
| fuchsia | #ff00ff | fuchsia #ff00ff |
| purple | #800080 | purple #800080 |
このような代表的な色は英語もしくは＃色番号で表すことができます。
他の色はGIMPなどの無料のツールやソフトで色番号を取得できます。
色の使い方
文字の色を変える方法がわかったなら
あとは実際に使ってみて
見栄えが良くなるようにしていきましょう。
基本的な色の使い方
基本的な使い方としましては
あまりたくさんの色を使いすぎないということです。
いろんな色があり過ぎると訪問者さんの目も疲れますし
どの色を見ていいのかわからなくなります。
一般的に
文字は黒
リンクには青
強調したいところは赤
がいいと思います。
緑色の文字も比較的見やすいので
赤文字と違ったニュアンスを表現したいならば
使ってみてもいいかもしれません。
他には栗色も赤の変わりに見やすいかと思いますね。
見やすくする使い方
１ 赤文字は普通に使うより
<b>や<strong>などの強調タグを使うとくっきりして見やすいです。
そのまま普通の赤
<b><span style="color:red;">強調した赤色</span></b>
強調した赤色
２ 背景色を黄色にするのも効果的です。
背景色を黄色にする
文字色のタグの前に
background-color:色番号を入れると背景色を変えることができます。
<span style="background-color: #ffff00"><span style="color: #000000">背景色を黄色にする</span></span>
背景色を黄色にする
強調タグは背景色のタグの前につけます。
<strong><span style="background-color: #ffff00"><span style="color: #ff0000">背景色を黄色にする</span></span></strong>
大事なところは
こんなふうに背景色を黄色にすると目立ちます。
ただ私、個人的には
これもあまり使い過ぎたり
あまり大き過ぎたりしない方がいいかと思います。
この記事では説明するために
多めに使っていますが
やはり黄色は刺激が強いので
大事なところにポイントを絞って使っていきましょう。
デカ過ぎ
このように
色だけですでに強調しているのに
大きさでさらに強調すると圧が強くなるので
あまり文字サイズは大きくしない方が
良いように私は思います。
こんな感じで実際に使ってみて
訪問者さんが見やすい色の使い方を
いろいろ考えてみてください。
本日もご訪問ありがとうございました～。
htmlタグ 文字の大きさを変える方法
文字の大きさを変える方法ついて。
こんにちは、ぜんです。
今日はhtmlタグを使って
文字の大きさを変える方法について
書いていきますね。
なんだそんな基本的なことかよって
思われるかもしれませんが、
このテーマで
検索エンジンからアクセスが
たびたび来ているので、
基本的ことからしっかり
押さえていただきたいと思います。
文字の大きさを変えるには
おおよそ３つの方法があります。
探せばもっとあるでしょうが、
数を知れば良いってもんでもないので。
１ アルファベットを使って変える
２ 数字を使って変える
３ px単位を使う
アルファベットを利用して変える
下記のアルファベットを利用して変えます。
FC2ブログの高機能テキストエディタなどはこの形式ですね。
| medium | 標準 |
| xx-large | 超特大 … 最も大きいサイズ |
| x-large | 特大 |
| large | 大 |
| small | 小 |
| x-small | 極小 |
| xx-small | 超極小… 最も小さいサイズ |
<span style="font-size: large">サイズ</span>
この黄色のところに上記のアルファベットを入れます。
xx-small サイズ
x-small サイズ
small lサイズ
medium サイズ
large サイズ
x-large サイズ
xx-large サイズ
数字を使う
<font size="数値">文字サイズ</font>
数値のところに１～７の数字を入れます。
1 文字サイズ
2 文字サイズ
3 文字サイズ
4 文字サイズ
5 文字サイズ
6 文字サイズ
7 文字サイズ
px 単位を使う
px ピクセルという単位を使っても
文字の大きを変えることができます。
<span style="font-size:16px;">文字サイズ</span>
px の前の黄色いところに数字を入れてみましょう。
10 文字サイズ
11 文字サイズ
12 文字サイズ
14 文字サイズ
16 文字サイズ
32 文字サイズ
こんな風に文字の大きさを変えるのにも
いろんなやり方があります。
テキストエディタやツールを使ってできたりしますが、
細かい編集をする時のために知っておきましょう。
最後まで読んでいただき
ありがとうございました。
htmlタグを覚えよう
日記などの簡単な作業をしながら、
ｈｔｍｌとかタグを覚えていきましょう。
ブログやhtmlサイトなどは
このhtmlだったりスタイルシートなどで記述されています。
無料ブログに搭載されている
テキストエディタであれば
ある程度は覚えていなくても使えるんですが、
自分でレビューページを編集したり
ランディングページを作ったりする場合、
ある程度知っていて、
ストレスなく使える状態でないと
ムキーってなっちゃいます。
私の場合はツール使わずに
手打ちで打ち込むことが多いですね。
タグがややこしい場合は
ツールを使ったりしますが、
思うようにいかない時がやっぱりあるんです。
そんな時にはやはり自分で
修正する力が必要なので
最低限のhtml タグの知識は頭に入れておいた方がいいです。
テンプレート使っても
ここだけちょっと変えたいなって時は
変え方を知っていると、自分の好きなようにできますしね。
シリウスを使うとわかりますが、
シリウスのイエローマーカーは
デフォルトでは肌色っぽい色なんですよね。
もうちょっと普通の黄色が良いなと思ったら
ちょっととある箇所を修正するだけで
黄色にすることができるんですよね。
ｈｔｍｌとかＣＳＳスタイルシートとかを知っていると
自分の好きなように構成できるので
できるだけ知っておいた方がいいです。
良く使う簡単なものをマズ覚えて、
たまに使うややこしいけど大事なものも覚えておきましょう。
って言っていながら僕も
勉強していこうかと思っているので
今後、ブログに書いていきますね。
最近はメルマガの方もひんぱんに発行しております。
今日はメルマガ読者さん限定の
書くので、下記より登録よろしくです。
↓
