雪ん子’s report

スマホの使い方(初級編)と日々のことをお伝えします。

雪ん子’s report

スマホだけでブログに挑戦！
トップ > CSS・HTML > はてなブログで表を載せる方法（デザイン編）

はてなブログで表を載せる方法（デザイン編）

CSS・HTML はてなブログ設定



こんばんは。雪ん子です。

前回の記事をUPした際に、試していなかったことがありました。
　
それは、大きな表を入れてみること。
　

f:id:snow0303:20170828123659j:plain
　
今回もブログテーマ「Innocent 」で試してみます。
レスポンシブデザインは使っていません。
スマホ用は標準のものです。
　
前回のCSSを設定してくださった方。
　
大変申し訳ありませんm(__)m
　
大きな表を入れる可能性のある方は、変更をお願いします。
　　
　

デザインを確認・変更していく　試行錯誤編

　
前回紹介したCSS
　

/* 表 */
table {
width: auto; /* 文字に合わせて大きさを自動に */
}
.section table caption{ /* タイトル */
font-size: 17px; /* 文字の大きさ */
padding: 0.5px; /* 文字周りの余白 */
}
.section table th { /* 見出しセル */
border: 1px solid #000000; /* 線の太さ・種類・色コード */
background: #B0DFFF; /* 背景色 */
text-align: center; /* 中央揃え */
padding: 0.5em; /* 文字周りの余白 */
}
.section table td { /* 普通のセル */
border: 1px solid #000000; /* 線の太さ・種類・色コード */
padding: 0.5em; /* 文字周りの余白 */
}
/* 表ここまで */

　
「table」「.section table ○○」でうまくいかない場合は
「table」→「.entry-content table」
「.section table ○○」→「.entry-content table ○○」
に変更してみてください。
　
　

大きな表を入れてみる

　
スマートフォン版

f:id:snow0303:20170819155248j:plainf:id:snow0303:20170819155304j:plain
　
PC版
f:id:snow0303:20170819155320j:plain
　
ひ、ひどい！！(゜ロ゜ノ)ノ
　
　

セル側にも幅を設定したらいいのか？

　
.section table th{～}
.section table td{～}
の中に、
width:auto;
を追加してみる
　
スマートフォン版、PC版共に上と変わらず。
　
ダメか……(ーー;)
　
　

文字を折り返さないようにしてみよう。

　
上でwidth:auto;を追加しましたが、
.section table th{～}
.section table td{～}
の中に、更に
white-space:nowrap;
を追加してみる
　
スマートフォン版

f:id:snow0303:20170819155445j:plainf:id:snow0303:20170819170707j:plain
　
スマホ版はスクロール可能に！
指で表をさわると、スクロールバーが出ました。
いいですね～
　
PC版
f:id:snow0303:20170819155526j:plainf:id:snow0303:20170819155536j:plainf:id:snow0303:20170819155545j:plain
　
あぁぁぁ！
果てしなく横に！
　
てことはPC版もスクロールできるようにすればいいわけね。
　
　

PC用もスクロールできるようにしてみよう

　
＜CSSに追加＞
　

/* スクロール */
#○○ {
box-sizing: border-box;　/* スクロール用の箱*/
overflow-x: scroll; /* 横スクロール */
 -webkit-overflow-scrolling: touch;
border-right:3px solid #E0E0E0; /* 右端の線の太さ・種類・色コード */
}
/* スクロールここまで */

　
＜文中＞
　
表を<div id=○○></div>で挟む。
　
<div id=○○>
～表～
</div>
　
一応スマホ版にも入れてみました。
　
スマートフォン版

f:id:snow0303:20170819170819j:plainf:id:snow0303:20170819170908j:plain
　
PC版
f:id:snow0303:20170819170946j:plainf:id:snow0303:20170819171015j:plain
　
PC版にもスクロールバーが出ました。
良い感じですね！
　
border-right:3px solid #E0E0E0; /* 右端の線の太さ・種類・色コード */
で右端に線（青矢印のところ）を入れていますが、これは省いても良さそうです。
　
　

文が長いところは改行する

　
文中の改行したい部分に<br />を入れるだけ。
　
スマートフォン版

f:id:snow0303:20170819160253j:plain
　
PC版
f:id:snow0303:20170819160255j:plain
　
更に良い感じ！
これだな。
　



　
　

CSS　完成編

　
CSSを貼り付ける場所はこちらの記事で紹介しています。
→文字サイズと行の高さを変更
　
　

スクロールを出来るようにするCSS

　

/* スクロール */
#○○ {
box-sizing: border-box;　/* スクロール用の箱 */
overflow-x: scroll; /* 横スクロール */
 -webkit-overflow-scrolling: touch;
border-right:3px solid #E0E0E0; /* 右端の線の太さ・種類・色コード */
}
/* スクロールここまで */

　
　

#○○

　
#○○が<div id=○○>となりますので、他で使っているものと被らないように好きな名前をつけます。
　
＜例＞
#demo01　→　<div id=demo01>
　
　

スマホ版

　
スマホ版は勝手にスクロールしてくれるので、追加しなくて大丈夫です。
　
スクロールができる目印として右端に線を入れたい方は、スクロール部分を丸ごと追加してもいいですし、下の省略パターンをご利用ください。

#◯◯の◯◯部分は上で説明したとおり好きな名前をつけて下さい。
　

#◯◯ {
border-right:3px solid #E0E0E0; /* 右端の線の太さ・種類・色コード */
}

　
　

表のCSS

　

/* 表 */
table {
width:auto; /* 大きさを自動に */
}
.section table caption{ /* タイトル */
font-size: 17px; /* 文字の大きさ */
padding: 0.5px; /* 文字周りの余白 */
}
.section table th { /* 見出しセル */
border: 1px solid #000000; /* 線の太さ・種類・色コード */
background: #B0DFFF; /* 背景色 */
text-align: center; /* 中央揃え */
padding: 0.5em; /* 文字周りの余白 */
width:auto;/* 大きさを自動に */
white-space:nowrap; /* 文字を折り返さない */
}
.section table td { /* 普通のセル */
border: 1px solid #000000; /* 線の太さ・種類・色コード */
padding: 0.5em; /* 文字周りの余白 */
width:auto;/* 大きさを自動に */
white-space:nowrap; /* 文字を折り返さない */
}
/* 表ここまで */

　
「table」「.section table ○○」でうまくいかない場合は
「table」→「.entry-content table」
「.section table ○○」→「.entry-content table ○○」
に変更してみてください。
　
　

出来上がり

　

はてな記法

　
枠内で改行したいところには<br />を入れます。
　
＜文中の例＞
　

|*丘を越え<br />行こうよ|*口笛ふきつつ|*空は澄み　青空|*牧場をさして|*歌おう　ほがらに|*ともに手を取り<br />ランラララ　ララララ|*ララララ あひるさん (ガアガア)|*ララララ 山羊さんも (メェー)|*ララ 歌声合わせよ|*足並み揃えよ|*今日は愉快だ|
|どんぐり|ころころ|ドンブリコ|お池にはまって|さあ大変|どじょうが出て来て|今日は|坊ちゃん|一緒に|遊びましょう| |
　
　

スクロールなし

　
※スマホでご覧になっている方はスクロールしてしまいます。
　

丘を越え
行こうよ		 口笛ふきつつ 空は澄み　青空 牧場をさして 歌おう　ほがらに ともに手を取り
ランラララ　ララララ		 ララララ あひるさん (ガアガア) ララララ 山羊さんも (メェー) ララ 歌声合わせよ 足並み揃えよ 今日は愉快だ
どんぐり ころころ ドンブリコ お池にはまって さあ大変 どじょうが出て来て 今日は 坊ちゃん 一緒に 遊びましょう

　
　

スクロールあり

　
<div id=○○>
～表～
</div>
　
で大丈夫なのですが、「スクロールしてご覧ください。」とか入れると親切かな。
　
<div id=○○>
スクロールしてご覧ください。
～表～
</div>
　

スクロールしてご覧ください。

丘を越え
行こうよ		 口笛ふきつつ 空は澄み　青空 牧場をさして 歌おう　ほがらに ともに手を取り
ランラララ　ララララ		 ララララ あひるさん (ガアガア) ララララ 山羊さんも (メェー) ララ 歌声合わせよ 足並み揃えよ 今日は愉快だ
どんぐり ころころ ドンブリコ お池にはまって さあ大変 どじょうが出て来て 今日は 坊ちゃん 一緒に 遊びましょう

　
　

HTML

　
枠内で改行したいところには<br />を入れます。

HTMLは<caption>◯◯</caption>で題名がつけられます。
　
＜文中の例＞
　

<div id=○○>スクロールしてご覧ください。
<table>
<caption>犬のおまわりさん</caption>
<tr>
<th>迷子の</th>
<th>迷子の</th>
<th>子猫ちゃん</th>
<th>あなたの</th>
<th>おうちは<br />どこですか</th>
<th>おうちを聞いても</th>
<th>わからない</th>
<th>名前を聞いても</th>
<th>わからない</th>
</tr>
<tr>
<td>にゃんにゃんにゃにゃん</td>
<td>にゃんにゃんにゃにゃん</td>
<td>泣いてばかりいる</td>
<td>子猫ちゃん</td>
<td>犬の<br />おまわりさん</td>
<td>困ってしまって</td>
<td>ワンワン　ワワン</td>
<td>ワンワン　ワワン</td>
<td></td>
</tr>
</table>
</div>

　

スクロールしてご覧ください。
犬のおまわりさん
迷子の 迷子の 子猫ちゃん あなたの おうちは
どこですか		 おうちを聞いても わからない 名前を聞いても わからない
にゃんにゃんにゃにゃん にゃんにゃんにゃにゃん 泣いてばかりいる 子猫ちゃん 犬の
おまわりさん		 困ってしまって ワンワン　ワワン ワンワン　ワワン
　
スクロールする場合は、<caption></caption>でタイトルをつけた場合、ある程度スクロールしないとタイトルが現れないので、左寄せの方が良いかもしれませんね。（特にスマホでは画面の幅が狭いので、タイトルがなかなか現れません。）
　
<caption>犬のおまわりさん</caption>
↓
<div align="left">犬のおまわりさん</div>
　
スクロールしてご覧ください。
犬のおまわりさん
迷子の 迷子の 子猫ちゃん あなたの おうちは
どこですか		 おうちを聞いても わからない 名前を聞いても わからない
にゃんにゃんにゃにゃん にゃんにゃんにゃにゃん 泣いてばかりいる 子猫ちゃん 犬の
おまわりさん		 困ってしまって ワンワン　ワワン ワンワン　ワワン
　
もしくは<caption></caption>は使わずに、<div id=○○>の前にタイトルや「スクロールしてご覧ください」を入れたり……。　
この辺りはご自分の好みで色々試してみてください。
　
　
＜今回参考にさせていただいたサイト＞
　
スタイルシート［CSS］/テーブル/セル内で自動改行させない - TAG index
　
CSSのみでレスポンシブ対応したテーブルデザインを作る３つの方法 | Neganin(ネガニン)
　
　
いかがでしょうか。
前回、我ながら良くできたと思っていましたが、まだまだでしたね。
　
今度こそ良くできたと思います(^_^)v
　
　
※続編はこちら