今ではもう、ブログの記事に編集・装飾がある程度できるようになりました。さらに、seesaablogのコンテンツも充実し、最新記事下のカテゴリーごとのご紹介が効果的に表せるようになりましたので、これを機に過去の記事も改めて修正し直し、整理して、同様な記事を繰り返し書かずに、上書きのみにして、カテゴリごとに学びやすいようにします。

カテゴリことの表記は→ 【テーブル】・・・ とします。

それぞれの記事タイトルも
【テーブル】@表組みの基本から・・・のような表記にします。 ○番号で続きの学びが確実にできるように表していきます。最初から学ぶときは@からたどってみてください。

従って、記事更新の日付は参考にせずに、【カテゴリ】から学びたい項目を探して進んでいってください。 今後とも末永くいつでも戻ってきて学んでみてください。

2012年03月22日

【リスト】リスト(箇条書き)マークをさらに紹介します。


リスト(箇条書き)マークは前回に扱ったほかにも、いろいろな現し方がありましたので練習しましょう。

まずは復習から
Disk・・・小さい黒丸、circle・・・小さい白丸、square・・・小さい黒い四角、でした。
今回はHTMLも新たなのを紹介します。
<UL ”list−style−type:@”>
<LI ”list−style−type:@”>
@にはリストマークのHTMLが入ります
「UL」「LI」については、前の記事を参考にしてください。
新しく練習するリストマーク
・decimal・・・算用数字
・decimal−leading−zero・・・0をつけた算用数字(00、01、02、…98、99)
・lower−roman・・・英小文字(a,b,c・・・)
・upper−roman・・・英大文字(A,B,C・・・)
・lower−alpha・・・ローマ数字/小文字( 「◆「」・・・)
・upper−alpha・・・ローマ数字/大文字(T、U、V・・・)
紹介したとおりに、復習したリストマークも含めて使ってみます。
では、実際に使って見ましょう⇒続きをクリック
ラベル:リスト 箇条書き

【リスト】用語(小見出し)と、説明文を箇条書きリストに挑戦!


用語(小見出し)と、説明文を箇条書きリストのスタイルにする練習をします。次のようになります。
<DL> ・・・@・・・用語とその説明を組にして使う場合に定義するのに使用するHTMLです。
<DT> ・・・A・・・用語あるいは小見出しといったほうが分かりやすいかもしれません。その際に使用するHTMLです。
  <DD> ・・・「DT」を受けてその内容を説明する文章を定義します。
<DT>
  <DD>
  ・
  ・
</DL>
用語が短い場合は、このようにします。
<DL compact> ・・・「compact」は用語が短い場合に使用して、改行されずに間隔が空きます。
<DT> 
  <DD> 
<DT> 
  <DD>
  ・
  ・
</DL>
@ ・・・見出し用テキスト
A ・・・内容を説明するテキスト
では、実際に使って見ましょう⇒ここをクリック
ラベル:段落 箇条書き

【リスト】リストの(最初の)数字を指定したいときの練習


箇条書きリストにて途中、数字を指定してリスタートさせる場合を練習します。

<OL start=”@”>
<LI>
<LI>
  ・
  ・
  ・
</OL>
あるいは、
<OL value=”@”>
<LI>
<LI>
  ・
  ・
  ・
</OL>
「OL」は文頭に付いた数字の序列を定義します。指定のない場合は「1」から始まります。
「value」は「OL」に対して個別にリスト開始番号を指定する際に使うHTMLです。
@ ・・・文頭の開始数字
となります。
では、実際に使って見ましょう⇒ここをクリック
ラベル:リスト 文頭文字

【リスト】リストの数値のタイプの種類


機能練習した箇条書きリストの種類をいくつか紹介します。
<OL>
<LI type=”@”>
<LI>
<LI>
<LI>
</OL>
として、@にはいる種類にどんなのがあるのかですが、

  1. A・・・英字大文字
  2. a・・・英字小文字
  3. T・・・ローマ字大文字
  4. 。・・・ローマ字小文字 Seesaaさんでは表記されないようです
  5. 1・・・算用数字

のようになります。
では、実際に使って見ましょう⇒ここをクリック
ラベル:段落 リスト

【リスト】文頭に番号のついたリスト表示に挑戦しよう!


今日は文頭に番号の序列の付いたリストに挑戦してみよう。

<OL> ・・・は文頭に番号が付いた序列、番号月のリストを定義します。
<LI> ・・・各リストの項目に使用する
<LI>
  ・
  ・
  ・
</OL>
「OLで定義されたリストはブラウザ上でリスト項目の文頭に番号が付きます。これは「1」から始まって順に増えていきます。
では、実際に使って見ましょう⇒ここをクリック

【リスト】リストマーク(文頭のマーク)の練習をしよう


文章をデザインする際のリストマーク(文頭のマーク)の練習をします。


<UL> ・・・は文章のリスト(箇条書きの状態)表示を定義します。
<LI> ・・・は文章の中のリストされる各項目を指定します。
<LI>
<LI>
 ・
 ・
 ・
</UL> ・・・これでリストを閉じることになります。←で閉じるこてで</LI>は省略できます。

<LI type=”@”>
@に入るHTMLには、disk・・・黒い丸、circle・・・白開き丸、square・・・黒い四角、となります。
typeが指定されない場合は黒い丸になります。
<UL></UL>の前後は一行開きになります。

残念ながら「UR」ではSeesaaさんでは反映されませんでしたので、《確認段階では反映されませんでしたが、投稿したら反映されていました<MENU></MENU>で囲んでみたら反映しました。
「MENU」も同様に文頭のマークについたリスト(箇条書きの状態)表示を定義します。

では、実際に使って見ましょう⇒ここをクリック

【リスト】段落をつける、文章のまとまりを表す


昨日の続きをメイン画面で試して見ましょう。<div>と<p>と、新たに<span>を試してみます。

秋冬の新作パソコンを見ると、テレビチューナーが装備されていたり、インターナットで映画が見れる設定になっていたり、オンライン3Dゲームを十分に楽しめるようになっていました。 ・・・@

DVD録画ができるようになっているなど高機能が売りになってます。 ・・・@’

特に、ワイド画面になり、大きなサイズになってきました。17型ディスプレイまで当たり前のように登場している。液晶テレビがますます大型化していて、値段が安くなっている中、それに呼応するように、との流れだと思う。 ・・・A


液晶画面もテレビと変わらない高機能のものが登場し、若い人たちに中には、テレビを持たずにテレビパソコンだけの人も増えてくると思います。 ・・・A’


あなたは、大型液晶テレビを選びますか。 ・・・BAVパソコンにしますか ・・・B’

@並び@’には<div>文章</div>を入れました。一つのまとまりを表します。その間は普通の改行幅です。
AとA’こちらは<p>文章</p>を入れましたので一行分の間が開いています。段落としてのまとまりをあらわしたHTMLです。
BとB’は<span>と</span>で囲みました。こちらは一行の中でそれぞれのまとまりをあらわします。
Bは ・・・<span>文章</span>
B’には下のボタンの「大」を入れて囲んであります。<span style=font−size:large;”>文章</span>


分かりやすいように色をつけて対応させていますが、そのためのHTMLは説明に入れていません。またいつものように半角英数でご使用ください。

今日はここまで。
ラベル:段落 文章


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。