[HTML/CSS] 意外と忘れやすいリストの設定

すみません、かなり長い間、ブログサボっておりました。
スタッフ「ほ」です。
いや、ほんとすみません。

といいつつ、今回もブログにがっつり時間がとれず、ちょいネタです。
すみません。

HTMLでマークアップするリストには「箇条書きリスト」「番号リスト」そして「定義リスト」の3つがあります。
今回、定義リストはちょっと置いておいて、箇条書きリストと番号リストにスポットを当てます。

まず、それぞれの違いですが、「箇条書きリスト」は以下のようなマークアップを行います。


<ul>
  <li>箇条書きリスト</li>
  <li>箇条書きリスト</li>
  <li>箇条書きリスト</li>
</ul>

すると、こんな感じのリストができます。

項目に順序がないリストを作成できます。

それに対して「番号リスト」は以下のマークアップです。


<ol>
  <li>番号リスト</li>
  <li>番号リスト</li>
  <li>番号リスト</li>
</ol>

結果、こんな感じのリストができあがります。

内容に順序がある場合に使用します。

このリスト項目の頭についているマーク、実はCSSで変更ができます。

list-style-typeというプロパティを利用するのですが、利用できる値は以下の通りです。
disc 黒丸
circle 白丸
square 四角
decimal 数字

upper-alpha アルファベット(大文字)
lower-alpha アルファベット(小文字)
upper-roman ローマ数字(大文字)
lower-roman ローマ数字(小文字)

また、ブラウザやバージョンを選びますが、以下のような指定もあります。

desimal-leading-zero 2桁数字
cjk-ideographic 漢数字
hiragana ひらがな
katakana カタカナ
hiragana-iroha いろは
katakana-iroha イロハ

こちらにサンプルファイルを用意しました。
いろいろなブラウザで見てみてください。

また、番号リストの開始番号を変更することが可能です。
こちらはCSSではなく、HTMLの属性で行います。


<ol start="6">
  <li>番号リスト</li>
  <li>番号リスト</li>
  <li>番号リスト</li>
</ol>

こんな感じで指定した数字からスタートするリストになります。

また、使うシーンが思い浮かびませんが、途中から番号を変更することも可能です。


<ol>
  <li>番号リスト</li>
  <li>番号リスト</li>
  <li>番号リスト</li>
  <li value="10">番号リスト</li>
  <li>番号リスト</li>
  <li>番号リスト</li>
</ol>

こんな感じで、value属性で数値を指定した部分から番号が変化します。

「シランカッター!」という方は、ぜひお試しあれ!

「そもそもHTMLとかCSS自体がよくわかんない」という方は、バンフートレーニングスクールのWEB基礎講座にてお待ちしております。


バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎!ステップアップ編としてDreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

バンフーセミナーのお知らせ

 
スクールの母体である
「株式会社帆風」が定期的に実施する
<<無料>>のセミナー!!!
 
 今回は・・・
 『プリントメディアに従事する人も
             最低限抑えておきたい
                       Web制作の基本

 ePubなど、HTMLとCSSの基本をおさえておくことは
 社会人にとってもはや必要なスキル!?
 今回は、プリントメディアに従事する方も
 最低限抑えておきたい『Web制作の基本』を解説。
 講師には株式会社スイッチの鷹野氏を迎え
 WebとDTPを比較しながらお話します。
 
 バンフーセミナー138

 毎回募集後すぐに満席となってしまう 大人気のセミナーです!

  
   ==【セミナー詳細】============
    日時: 2012/07/18(水) 19:00~20:45
    会場: ベルサール神保町3F ROOM 1+2
    講師: 鷹野 雅弘 氏
       (株式会社スイッチ 代表取締役)
    定員: 180人(先着)
    お問合せ:03-5229-8523 ※
   =====================

 ☆ 詳細、お申込はこちら (セミナー参加費は無料!)
   ⇒ http://www.vanfu-vts.jp/seminar/index.php
 ☆ お問合せ先(※スクールとは異なりますのでご注意ください
   ⇒ TEL : 03-5229-8523

  

  

 実際にWEB制作のスキルを身に付けたい!という方は・・・

     ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

 

 バンフートレーニングスクールの

 
   ★ WEB基礎講座
   ★ ドリームウィーバー講座
   ★ WEBパック(WEB基礎講座+ドリームウィーバー講座)

がオススメです☆☆

 

 どのように受講したらいいの?という方、
 どの講座が自分にあってるの?という方。
 お気軽にスクールまでご相談ください!

 ☆スクール、各種講、キャンペーンについてはコチラから☆
   ⇒ http://www.vanfu-vts.jp/

 

 
仕事で使える制作スキルがすぐ身につく!!
短期間×低価格×バンフートレーニングスクール
―☆入学金0円☆教材費0円☆ ―

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

Illustrator CS6 新機能【線にグラデーション】

いい感じで蒸してきました。

これから夏にかけての季節がこの上なく好きなスタッフ『の』です。

さて、CS6新機能も今回はイラレでいきます。

目玉は何と言っても今までは【塗り】にしかかけられなかったグラデーションが、【線】にもかけられるようになった事ではないでしょうか。

そこでこんな絵を描いてみました。

線にかけられるグラデーションには3種類ありまして、上図は【パスに交差してグラデーションを適用】モードです。

↑こちらは【線にグラデーションを適用】モードです。

↑ちょっと差が分かりにくいですが【パスに沿ってグラデーションを適用】モードです。

 

↓この絵をアートワーク表示するとこのような感じです。

Illustrator CS6を購入したら、是非使ってみたい機能の一つと思います。

さて、そもそも新機能よりもIllustratorの基本操作から学びたい!という方、【Illustrator講座】でお待ちしております。

以上、

スタッフ『の』でした。

 

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[オススメセミナー]INDD 2012 Tokyo

INDD 2012 Tokyo(InDesignユーザーの祭典)来る2012年7月20日(金)に、ベルサール汐留にて、InDesignユーザーの祭典「INDD 2012 Tokyo」が開催されます。

当日は、「InDesignトラック」と「電子書籍トラック」の2トラック構成になっており、いずれのトラックも聞き逃せないセッションばかり!

魅力的なセッションの詳細は公式サイトをご覧ください。

http://indd.jp/2012/tokyo.html

バンフートレーニングスクールでInDesignの基礎を学んだけれど、さらに上級に進んでみたい!という方に最適なセミナーです。

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ