SEIの部屋(完成率12%)

現在製作中です。(完成率12%) ゲーム(PSP・PS3・DS・Wiiなど)と日常などの事をします。
お勧め記事

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | トラックバック(-) | コメント(-)

【ブログ】ブログを書くときのテクニック≪Part 01≫文字を囲もう!

livedoor logoFC2 logo

最近はブログでも結構派手で、文章を囲んだり、画像の横に文章を書いたりなど、さまざまな方法で見やすくしています。
それはHTMLというコンピュータ言語で行っています。
僕は言語を全く使えないので、この技法を覚えたいのですが、ノートに取るのもあれなので、自分のブログで紹介することにしました。

ブログを書いてる方や、HTML言語に興味のある方は是非参考にしてください。

今日は文字を囲むやり方を学んでいこうと思います。
僕も今までは文字を線で囲んでいなかったのでこの方法を覚えて今日から今から使っていこうと思います。

ちなみに今使った文字に線を引く(これ)のやり方は次回ぐらいに紹介しようと思います。



線を引くためにはいきなりなかなか高度な言語を学ぶことになります。
線を引くぐらいなら簡単で、プログラムが長いだけです。文字の上に線を引くぐらいなら一瞬で覚えれるのでここで諦めないようにしましょう。

では早速プログラムを見ていきましょう。

四辺の枠線の種類をまとめて指定する場合
<タグ名 style="border-style:枠線の種類"></タグ名>
上辺の枠線の種類のみを指定する場合
<タグ名 style="border-top-style:枠線の種類"></タグ名>
下辺の枠線の種類のみを指定する場合
<タグ名 style="border-bottom-style:枠線の種類"></タグ名>
左辺の枠線の種類のみを指定する場合
<タグ名 style="border-left-style:枠線の種類"></タグ名>
右辺の枠線の種類のみを指定する場合
<タグ名 style="border-right-style:枠線の種類"></タグ名>

上に囲ってあるのが枠を作るプログラムです。
使い方は以下の通りです。
※わからない方はもっと下に簡単に書いています。

  1. タグ名:P、DIV および SPAN タグなどが一般的ですが、ほとんどのブロックタグおよびインラインタグが使用可能です。
  2. 枠線の種類:下記の中から指定できます。
    枠線の種類説明サンプル
    noneなし
    hiddenなし
    dotted丸い点線
    dashed四角い点線
    solid実線

    枠線の種類説明サンプル
    double二重線
    groove凹んだような立体枠
    ridge尖ったような立体枠
    inset中央が凹の立体枠
    outset中央が凸の立体枠

サンプルです。この中から、『 double 』で枠線を指定してみます。





=わからない方用=
以上の説明ではあまり分かりにくかったと思います。
なので簡単にまとめてみました。
<div style="border-style:枠線の種類"></div>
これは覚えてください。
そして枠線の種類の部分に自分が囲みたい枠の形を以下から選んで、入れます。

枠線の種類説明サンプル
noneなし
hiddenなし
dotted丸い点線
dashed四角い点線
solid実線

枠線の種類説明サンプル
double二重線
groove凹んだような立体枠
ridge尖ったような立体枠
inset中央が凹の立体枠
outset中央が凸の立体枠

例として上から4つ目を選んだとします。
すると以下のように書けば囲いができます。
<div style="border-style:dashed"></div>


これを応用すれば枠内に枠を作ることも色を付けるできます。
a
a



=覚え方=
簡単な覚え方はありませんが、読み方を知っているだけでも覚えやすくなります。

<div style="border-style:枠線の種類">
</div>

divディブ(ディビジョンの略)
styleスタイル
borderボーダー

<div style="border-style:枠線の種類"></div>

枠線の種類説明読み方
noneなしナン
hiddenなしヒドン
dotted丸い点線ドット
dashed四角い点線ダッシュ
solid実線ソリッド

<div style="border-style:枠線の種類"></div>

枠線の種類説明読み方
double二重線ダブル
groove凹んだような立体枠グループ
ridge尖ったような立体枠リッジ
inset中央が凹の立体枠インセット
outset中央が凸の立体枠アウトセット


=参考サイト=
MITSUE-LINKS
http://www.mitsue.co.jp/case/design/h_056.html
ブログでもだいたい使えるHTMLタグ リファレンス
http://html.appelle.jp/2006/02/post_89.html
[ 2010/04/19 19:27 ] ブログ | TB(0) | CM(0)
コメントの投稿












管理者にだけ表示を許可する
検索フォーム
FC2カウンター
ノーマルカレンダー
<< 10
2017
>>
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 - - - -
FXチャート
デイトレード コツ
広告等
アフィリエイトはアクセストレード 7年以上の運用実績があり、広告主は1400社以上の大手ASP。
スポンサードリンク
初音ミク 名曲メドレー


presented by 初音ミク オリジナル



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。