CSSで見出し固定＋レスポンシブ対応の表を作成
2022年4月27日 CSS, HTML, Webサイト制作 料金表やサービスプランの比較、タイムテーブルなどなど、使う場面が多い割には制限も多く、初心者には少しとっつきにくいと思われがちな表。今回はあると便利な表の見出し固定やレスポンシブ対応の方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 見出しの行を固定する 表の中の行が増えてくると、スクロールした時に表の見出しが画面から見えなくなり、なんの値だったのかがわかりづらくなります。そんな時のために、行数の多い表では一番上にくる見出しの行を固定しておくといいですね。 まずはベーシックな表を作成します。table タグに border-collapse: collapse; を指定することで、セル間のスペースがなくなってフラットな見た目になりますよ。 HTML <table> <tr class="heading"> <th>車
連続するリストを横並びに等分表示する方法 – イディア：情報デザインと情報アーキテクチャ
ECサイトの「商品一覧」や会社サイトの「お知らせ」などでは、連続する同格の情報をHTMLのリストアイテム要素を用いてマークアップし、横並びで表示させることが多い。固定幅での表示では厳密な計算によって美しく並べることができたが、レスポンシブなWebサイトのように画面幅が変化する環境では等分表示することは容易ではない。CSS3の疑似クラスを用いて、横並びさせたリストアイテムを美しく等分表示する方法のひとつを紹介する。なお、「連続するリストを横並びに等分表示する方法2」のほうがより簡単です。 前提となるHTMLとCSS HTML 次のようなHTMLでマークアップした「商品一覧リスト」について考える。 <html> <head> <title>商品一覧リスト</title> </head> <body> <h1>商品一覧リスト</h1> <div id="item-list"> <ul> <li>
横メニューの作り方
レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記 2014.03.19】 元々のタイトルは「レスポンシブWebデザインに対応した横メニューの作り方」でしたが、よく考えるとスマホ対応になったら縦メニューになりますのでタイトルを変更しました。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; paddi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
