雪ん子’s report

スマホ1つでブログは書けるか⁉ スマホの使い方(初級編)と日々のことをお伝えします。

ブログタイトル

スマホだけでブログに挑戦!

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


こんにちは。雪ん子です。

前回の記事をUPした際に、試していなかったことがありました。

それは、大きな表を入れてみること。


今回もブログテーマ「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:plain:w155f:id:snow0303:20170819155304j:plain:w155

PC版
f:id:snow0303:20170819155320j:plain:w250

ひ、ひどい!!(゜ロ゜ノ)ノ

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

.section table th{~}
.section table td{~}
の中に、
width:auto;
を追加してみる

スマートフォン版、PC版共に上と変わらず。

ダメか……(ーー;)

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

上でwidth:auto;を追加しましたが、
.section table th{~}
.section table td{~}
の中に、更に
white-space:nowrap;
を追加してみる

スマートフォン版
f:id:snow0303:20170819155445j:plain:w155f:id:snow0303:20170819170707j:plain:w155

スマホ版はスクロール可能に!
指で表をさわると、スクロールバーが出ました。
いいですね~

PC版
f:id:snow0303:20170819155526j:plain:w99f:id:snow0303:20170819155536j:plain:w99f:id:snow0303:20170819155545j:plain:w99

あぁぁぁ!
果てしなく横に!

てことは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:plain:w155f:id:snow0303:20170819170908j:plain:w155

PC版
f:id:snow0303:20170819170946j:plain:w155f:id:snow0303:20170819171015j:plain:w155

PC版にもスクロールバーが出ました。
良い感じですね!

border-right:3px solid #E0E0E0; /* 右端の線の太さ・種類・色コード */
で右端に線(青矢印のところ)を入れていますが、これは省いても良さそうです。

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

文中の改行したい部分に<br />を入れるだけ。

スマートフォン版
f:id:snow0303:20170819160253j:plain:w250

PC版
f:id:snow0303:20170819160255j:plain:w250

更に良い感じ!
これだな。

CSS

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

スクロール

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

#○○

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

<例>
#demo01 → <div id=demo01>

スマホ版

スマホ版は勝手にスクロールしてくれるので、追加しなくて大丈夫です。

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

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

/* 表 */
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; /* 文字を折り返さない */
}
/* 表ここまで */

出来上がり

はてな記法

<例>

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

スクロールなし

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

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

<div id=○○>
~表~
</div>

<div id=○○>
の直後に「スクロールしてご覧ください。」とか入れると親切かな。


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

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

HTML

<例>

<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>


スクロールしてご覧ください。
犬のおまわりさん
迷子の 迷子の 子猫ちゃん あなたの おうちは
どこですか
おうちを聞いても わからない 名前を聞いても わからない
にゃんにゃんにゃにゃん にゃんにゃんにゃにゃん 泣いてばかりいる 子猫ちゃん 犬の
おまわりさん
困ってしまって ワンワン ワワン ワンワン ワワン


もしくは<div id=○○>の前にタイトルや「スクロールしてご覧ください」を入れたほうか良いかもしれません。



<今回参考にさせていただいたサイト>

スタイルシート[CSS]/テーブル/セル内で自動改行させない - TAG index

CSSのみでレスポンシブ対応したテーブルデザインを作る3つの方法 | Neganin(ネガニン)



いかがでしょうか。
前回、我ながら良くできたと思っていましたが、まだまだでしたね。

今度こそ良くできたと思います(^_^)v