どうかアドバイスお願いします。 <a href="コラム1.html"><font color="w

どうかアドバイスお願いします。

<a href="コラム1.html"><font color="white">１</font></a><td align="left" valign="top" width="0" style="padding:13px;">

というリンク？を横に10ヶホームページでならべることができたのですが11から二段目の一番初め(1の下に11が来る)に同じように並べてと下へ下へ載せていこうと思ったのですが横へしか行かず下へ行きません。
できればこの方法で、もし無理なら違うやり方があれば教えて頂けますか？
どうかお願いします。

No.1 ベストアンサー 回答者： Ogre7077 回答日時： 2018/06/27 11:59

<style>

ul.menu { padding:0; margin:0; display:flex; flex-flow:row wrap; }
ul.menu > li { list-style:none; flex:none; }
ul.menu > li { width:10%; } /* 10ヶ並べる = 1ヶあたり10% */
ul.menu > li > a:link,
ul.menu > li > a:visited { color:white; }
</style>

<ul class=menu>
<li><a href="#">1</a>
<li><a href="#">2</a>
...
<li><a href="#">10</a>
<li><a href="#">11</a>
<li><a href="#">12</a>
</ul>

この回答へのお礼

ありがとうございます。
ど素人ですみません。
これをそのまま打ち込めばいいですか？
もう少し詳しく教えてもらえますか？

お礼日時：2018/06/27 17:04

No.2 回答者： Ogre7077 回答日時： 2018/06/27 18:56

No.1 です

ご質問の内容は一般にテーブルレイアウトと呼ばれる技法でして、最近は望ましくないとされています。
その代わりに style 要素を使って、<ul> や <li> 要素の見栄えを書き換えてしまう技法が一般的ですので、
style 要素を使ったサンプルを回答しました。

しかし、その技法も使ってはいけない、わけでもないので、テーブルレイアウトでのサンプルも回答しておきます。

<table><tbody>
<tr>
<td><a href="#">1</a>
<td><a href="#">2</a>
<td><a href="#">3</a>
<td><a href="#">4</a>
<td><a href="#">5</a>
<td><a href="#">6</a>
<td><a href="#">7</a>
<td><a href="#">8</a>
<td><a href="#">9</a>
<td><a href="#">10</a>
</tr>
<tr>
<td><a href="#">11</a>
<td><a href="#">12</a>
</tr>
</tbody></table>

ただ、これでも結局は style 属性を使って見栄えを書き換える必要が出てくるでしょうから、
素直に style 要素を使った CSS という技法を一から勉強することを"強く"お勧めします。

この回答へのお礼

丁寧にありがとうございます。
自分でも勉強してみます。
このままを記述すればいいですか？
少し調べてみたのですが先程教えて頂いた<style>から</style>を今のhtmlのファイルの直ぐ上に書き込むという形でいいのでしょうか？
お手数ですが教えて頂けませんか？

お礼日時：2018/06/27 21:55