i-8jo.com（Yahoo!blog入門）

テーブルテスト

こんにちは

１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目１行目　　１行目１行目　１行目 ２行目 ３行目

記事本文を飾り付けてみよう「（その２５）Wiki超入門１５」

前回はテーブルの色やサイズの変更をしましたが、今回はそのテーブル内での文字の位置を変えてみたいと思います。
テーブルの中で改行ができないので、あまり使い勝手は良くありませんが、工夫次第でもしかしたら凄いレイアウトが出来るかもしれません。是非試してみてくださいね。

※Wikiを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

基本的なルールとしては

||||
||<#色の値' width=横幅 height=高さ align=横の揃え方 valign=縦の揃え方 ``表の文

[align属性]
左揃え => left
中央揃え => center
右揃え => right

[valign属性]
上寄せ => top
中央揃え => middle
下寄せ => bottom

です。

・"|"は縦棒です（何て言うのか判りません）。私のキーボードでは右上の"\"キーをShiftと一緒に押すと出てきます。
・色の値の次にあるのは['](シングルクォーテーション)です。私のキーボードでは"7"キーをShiftと一緒に押すと出てきます。
・表の文の前にあるのは[`](何て言うのか判りません)。私のキーボードでは右側の"@"とshiftを一緒に押すと出てきます。

基本の位置は、横＝左揃え・縦＝中央揃えになっています。それ以外に変更したい時は以下の様に設定してください。

■テーブルの文字の横の位置を変える（align属性）

文法）
||||
||<#ccffff' width=100 height=100 align=left ``左揃え
||<#ccffff' width=100 height=100 align=center ``中央揃え
||<#ccffff' width=100 height=100 align=right ``右揃え

結果）

左揃え	中央揃え	右揃え

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■テーブルの文字の縦の位置を変える（valign属性）

文法）
||||
||<#ccffff' width=100 height=100 valign=top ``上寄せ
||<#ccffff' width=100 height=100 valign=middle ``中央揃え
||<#ccffff' width=100 height=100 valign=bottom ``下寄せ

結果）

上寄せ	中央揃え	下寄せ

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■テーブルの文字の位置を変える（いろいろ組み合わせてみる）

文法）
||||
||<#ccffff' width=100 height=100 align=left valign=top ``左・上揃え
||<#ccffff' width=100 height=100 align=left valign=middle ``左・中央揃え
||<#ccffff' width=100 height=100 align=left valign=bottom ``左・下揃え
||||
||<#ccffff' width=100 height=100 align=center valign=top ``中央・上揃え
||<#ccffff' width=100 height=100 align=center valign=middle ``中央・中央揃え
||<#ccffff' width=100 height=100 align=center valign=bottom ``中央・下揃え
||||
||<#ccffff' width=100 height=100 align=right valign=top ``右・上揃え
||<#ccffff' width=100 height=100 align=right valign=middle ``右・中央揃え
||<#ccffff' width=100 height=100 align=right valign=bottom ``右・下揃え

結果）

左・上揃え	左・中央揃え	左・下揃え
中央・上揃え	中央・中央揃え	中央・下揃え
右・上揃え	右・中央揃え	右・下揃え

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

如何でしょうか？
ますます細かい設定が出てきてしまいましたが、少しずつやっていけばそんなに難しいことではありません。一つ一つやってみてくださいね。

※ここでは、例として色や大きさを設定していますが、ご利用の際にはお好きな色と大きさを指定してください。

参考
色見本はこちらをご覧ください。
色見本１
色見本２

また、Yahoo!blogの場合、記事の部分の横幅は560pxに設定されているようです。
テーブルの大きさを設定する時は、横幅の合計をそれ以下にしておいた方が良いでしょう。

[感謝]
この記事は「きろくぶろぐ」さんの記事を参考にさせていただきました。
もしも、参考になりましたら「きろくぶろぐ」さんのページにて、ボタンをお願いします。
「きろくぶろぐ」さんの研究の成果に感謝！！

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。

記事本文を飾り付けてみよう「（その２４）Wiki超入門１４」

今回はテーブルの色やサイズの変更の仕方をご説明します。
テーブルの中で改行ができないので、あまり使い勝手は良くありませんが、見た目にアクセントを付けるにはアイディア次第で有効な方法だと思います。それでは、やってみましょう。

※Wikiを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

基本的なルールとしては

||||
||<#色の値' width=横幅 height=高さ ``表の文

です。

・"|"は縦棒です（何て言うのか判りません）。私のキーボードでは右上の"\"キーをShiftと一緒に押すと出てきます。
・色の値の次にあるのは['](シングルクォーテーション)です。私のキーボードでは"7"キーをShiftと一緒に押すと出てきます。
・表の文の前にあるのは[`](何て言うのか判りません)。私のキーボードでは右側の"@"とshiftを一緒に押すと出てきます。

■テーブルの色と大きさを変える（1行で横幅100px・高さ100pxの時）

文法）
||||
||<#ff0000' width=100 height=100 ``赤色です
||<#00ff00' width=100 height=100 ``緑色です
||<#0000ff' width=100 height=100 ``青色です

結果）

赤色です	緑色です	青色です

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■テーブルの色と大きさを変える（2行で横幅100px・高さ50pxの時）

文法）
||||
||<#ff0000' width=100 height=50 ``赤色です
||<#00ff00' width=100 height=50 ``緑色です
||<#0000ff' width=100 height=50 ``青色です
||||
||<#ffff00' width=100 height=50 ``黄色です
||<#00ffff' width=100 height=50 ``水色です
||<#ff00ff' width=100 height=50 ``ピンクです

結果）

赤色です	緑色です	青色です
黄色です	水色です	ピンクです

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

如何でしょうか？上手く表示されましたか？
いろいろと細かい設定がでてきて、難しく感じるかもしれませんが、一つ一つやっていけばそんなに難しいことではないと思います。恐れずに試して見てくださいね。

参考
色見本はこちらをご覧ください。
色見本１
色見本２

また、Yahoo!blogの場合、記事の部分の横幅は560pxに設定されているようです。
テーブルの大きさを設定する時は、横幅の合計をそれ以下にしておいた方が良いでしょう。

[感謝]
この記事は「きろくぶろぐ」さんの記事を参考にさせていただきました。
もしも、参考になりましたら「きろくぶろぐ」さんのページにて、ボタンをお願いします。
「きろくぶろぐ」さんの研究の成果に感謝！！

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。

cssテスト

こんにちは	こんにちは	こんにちは
	こんにちは	こんにちは

記事本文を飾り付けてみよう「（コラム）CSS超入門はじめる前に」

今まで、html、wikiとご説明してきましたが、次回よりCSSの説明に入りたいと思っています。
ここで、少し整理をしておきたいと思います。

まず、これらが一体何なのか？という話です。

皆さんがインターネットをする時に見ているホームページやブログは「html」という言語で書かれています。（正確には違うページなどもありますが、大まかにはそう言えます。）
なので、このhtmlがあくまでも基本だと思ってください。
ちなみに、これまで説明してきたhtml文法はその中でも文字などを飾りつける機能の一部分です。

それでは、「wiki」とは一体何なのでしょうか？

wikiとは、文法が複雑なhtmlを簡単にする為のものだと考えてください。（本当は違うのですが、大まかにそう考えておいてください。）

例えば、文字を太字にする場合

＜htmlの場合＞
<b>太字にする</b>

＜wikiの場合＞
'''太字にする'''

という風になります。どちらが便利で使いやすいか？というのは議論が分かれる部分ですが、わざわざhtmlタグを打つよりもwikiを使った方が簡単になる部分もやはりあると思います。

Yahoo!blogがなぜwikiを採用したかは分かりませんが、初心者を重視するYahoo!にとってhtmlよりもwikiの方が分かりやすいと判断したのかもしれませんね。

ここで、皆さんに知っていて頂きたいのは、実はwikiも裏ではhtmlに変換されているということです。
文法的には違って見えますが、上の場合もwikiで入力した文法はhtmlに変換されて、皆さんが見るページになっているのです。

なので、やはりhtmlが基本となる訳ですね。

さて、それでは次に出て来たCSSとなんでしょうか?
CSSとは「Cascading Style Sheets（カスケーディング スタイルシート）」の略で、一般に「スタイルシート」とも呼ばれています。この言葉も覚えておいてくださいね。

このスタイルシートはhtmlで記述した文章を細かく飾りつけするための言語なのです。

これまでもご説明したようにhtmlで文章を飾りつけすることも可能なのですが、それだといろいろと不都合なことがでてきます。（ここでは細かく説明しません。）
そこで、htmlは文章を書くものに専念させて、飾りつけを担当する言語としてスタイルシートが登場してきました。

本来、スタイルシートを利用すると様々な表現が可能になります。
しかし、Yahoo!blogの場合はwikiを利用しているので、その利用できる部分が限られています。

限られた範囲ですが、いよいよ次回からはこのスタイルシートの説明に入りたいと思います。