MAJIDEKA.COM－レイアウト

● ３時限目 ●



[テキスト構成] or [★ HTML講座 ★] or [線]

[レイアウト]

　中央に表示するには

　縦方向の中央に表示するには

・<center>タグを使用して中央に表示する方法(<center>～</center>)

　中央に表示するには、<center>タグを使用します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<center>MAJIDEKA</center> MAJIDEKA
　ブラウザにはこのように表示されます。

・<div>タグにalign属性にcenterを指定する方法(<div align="center">～</div>)

　中央に表示するには、<div>タグにalign属性にcenterを指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<div align="center">MAJIDEKA</div><br> MAJIDEKA
　ブラウザにはこのように表示されます。

・<div>タグにstyle属性にtext-align: center;を指定する方法
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　(<div style="text-align; center;">～</div>)

　中央に表示するには、<div>タグにstyle属性にtext-align; center;を指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<div style="text-align: center;">MAJIDEKA</div><br> MAJIDEKA
　ブラウザにはこのように表示されます。

縦方向の中央に表示するには

・<table>タグにheight属性を指定する方法(<table height="100%">～</table>)

　縦方向の中央に表示するには、<table>タグにheight属性を指定します。
　height属性には100%と記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<table height="100%"> <tr> <td>MAJIDEKA</td> </tr> </table>
　ブラウザにはこのように表示されます。

▲ページトップへ

右寄せするには

・<div>タグにalign属性にrightを指定する方法(<div align="right">～</div>)

　右寄せするには、<div>タグにalign属性にrightを指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<div align="right">MAJIDEKA</div><br> MAJIDEKA
　ブラウザにはこのように表示されます。

・<div>タグにstyle属性にtext-align: right;を指定する方法
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 (<div style="text-align; right;">～</div>)

　右寄せするには、<div>タグにstyle属性にtext-align; right;を指定します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<div style="text-align: right;">MAJIDEKA</div><br> MAJIDEKA
　ブラウザにはこのように表示されます。

段組にするには

・<multicol>タグを使用して段組にする方法(<multicol cols="n">～</multicol>)

　段組にするには、<multicol>タグを使用します。
　ただし、Netscapeブラウザにしか対応していません。
　cols="n"のnには段組にする数を記入してください。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<multicol cols="2">MAJIDEKA.COMがMAJIMEGA.COMになったと思ったらMAJIMEGANE.COMになってたよ。でもよ～く見たらMAJIDEKA.COMに戻ってたよ。</multicol>
　ブラウザにはこのように表示されます(Nのみ)。

・<table>タグを使用して段組にする方法(<table>～</table>)

　Internet Explorerブラウザでも段組にするには、<table>タグを使用します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<table> <tr> <td valign="top">MAJIDEKA.COMがMAJIMEGA.COMになったと思ったらMAJIMEGANE.COMになってたよ。でもよ～く見たらMAJIDEKA.COMに戻ってたよ。</td> <td valign="top">MAJIDEKA.COMがMAJIMEGA.COMになったと思ったらMAJIMEGANE.COMになってたよ。でもよ～く見たらMAJIDEKA.COMに戻ってたよ。</td> </tr> </table>
　ブラウザにはこのように表示されます。

▲ページトップへ

文章を縦書きにするには

・<font>タグにstyle属性にwriting-modeを指定する方法
　　　　　　　　　　　　　　　　　　　　　　　　　　　　 (<font style"writing-mode: tb-rl;">～</font>)

　文章を縦書きにするには、<font>タグにstyle属性にwriting-modeを指定します。
　ただし、Internet Explorerブラウザにしか対応していません。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<font style="writing-mode: tb-rl;">まじでか</font>
　ブラウザにはこのように表示されます。

・<div>タグにstyle属性にwriting-modeを指定する方法
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 (<div style"writing-mode: tb-rl;">～</div>)

　文章を縦書きにするには、<div>タグにstyle属性にwriting-modeを指定します。
　ただし、Internet Explorerブラウザにしか対応していません。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<div style="writing-mode: tb-rl;">まじでか</div>
　ブラウザにはこのように表示されます(IEのみ)。

・<table>タグを使用して文章を縦書きにする方法(<table>～</table>)

　Netscapeブラウザでも文章を縦書きにするには、<table>タグを使用します。
　ただし、音声読み上げブラウザなどでは最後の行から読んでしまうので、アクセシビリティ的には問題があります。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<table> <colgroup span="100" valign="center" style="width: 1em; font-family: monospace;"> <tr> <td>まじのすけ</td><td>まじでよ</td><td>まじでか</td> </tr> </table>
　ブラウザにはこのように表示されます。

・アクセシビリティに問題なく文章を縦書きにする方法(<tt>～</tt>)

アクセシビリティに問題なく文章を縦書きにするには、スタイルシートを使用します。
　例えば、テキストエディタに下記のような記述を<head>～</head>の間にしてから、ブラウザで確認してください。
　　<style type="text/css">  </style> <div class="vw" style="left: 30em;">まじでか</div> <div class="vw" style="left: 28em;">まじでよ</div> <div class="vw" style="left: 26em;">まじのすけ</div>
　ブラウザにはこのように表示されます。

等幅フォントで表示するには

・<tt>タグを使用して等幅フォントで表示する方法(<tt>～</tt>)

　等幅フォントで表示するには、<tt>タグを使用します。
　例えば、テキストエディタに下記のような記述をしてから、ブラウザで確認してください。
　　<tt>MAJIDEKA</tt><br> MAJIDEKA
　ブラウザにはこのように表示されます。

▲ページトップへ

Copyright (c) 2006～ MAJIDEKA.COM. All Rights Reserved.