*

DOCTYPE宣言を必ずする習慣をつける

公開日: : CSS&HTML, 自分のメモ

*僕のメモです。

DOCTYPE宣言を必ずする習慣をつける

*これは僕のメモです。

レスポンシブデザイン

displayプロパティを使ってレスポンシブウェブデザインのtableレイアウトを変化させてみる
http://c-brains.jp/blog/wsg/14/08/05-195003.php
をやってみる

スマホ対応の画面にすると

「display: list-item; が列になってしまう」

 

イメージ
http://1811way.com/work008/hatena01.png

はてな、で聞いてみてやっとわかった。
http://q.hatena.ne.jp/1428757854

 

DOCTYPE宣言をしたらなおった。

HTML4の時は、DOCTYPE宣言していましたが、
簡単になったHTML5のDOCTYPE宣言する習慣がなくなってた。

必ずDOCTYPE宣言をする
をする

->

を習慣づける。

以下、ソース(修正版 記述済と全く同じ)

 

CSS(mystyle001.css)

table {
	width: 100%;
	margin: 0 auto;
	font-size: 75%;
	border-collapse: collapse;
}
th {
	width: 10%;
	background: #e6e6e6;
	color: #000;
}
td {
	width: 30%;
}
.fig {
	width: 100%;
	height: auto;
}

@media only screen and (max-width:480px) {
	

table {
	border: none;
}
tr {
	display:block;
	margin-bottom: 10px;
}
th {
	display:block;
	width: 95%;
	margin: 0 auto 10px;
	background: #000000;
	color: #ffffff;
	border:none;
	border-radius: 3px;
}
td {
	display: list-item;
	width: 90%;
	margin-left: 20px;
	border:none;
}
}

 

HTML(test001.html 最初の1行目にDOCTYPE宣言)

 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Table</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.8.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="mystyle001.css">
</head>
<body data-pinterest-extension-installed="cr1.35" data-feedly-mini="yes">
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th>項目A</th>
<td>この文章はダミーです。</td>
<td>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</td>
<td>この文章はダミーです。</td>
</tr>
<tr>
<th>項目B</th>
<td>この文章はダミーです。</td>
<td>この文章はダミーです。</td>
<td>この文章はダミーです。</td>
</tr>
<tr>
<th>項目C</th>
<td>この文章はダミーです。</td>
<td>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</td>
<td>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</td>
</tr>
</table>
</body>
</html>

 

 

 

 

スポンサーリンク

 

 

関連記事

.htaccessについて

対象:xserver .htaccessを設置 *これは自分のメモです。 おそらく、$_GE

記事を読む

CSSのfloatに基本

お約束 CSSをリセットする。 <head> <meta charset=&

記事を読む

rowspanとcolspan

      1番上の表 rowspan="

記事を読む

Windows10(x64)に、Apache2.4(x64)、MySQL5.7(x64)、MyCDBC(x86)、PHP 7.1.10、OfficeProffesional2007(x86)をインストールする

これは僕自身のメモです。 ノートパソコンに上記のものをインストールす

XserverでのMySQLからMariaDB

これは自分のメモです。 Xserverでは自動的にMySQLからMa

複数の引数を渡す方法

これは僕のメモです。   &lt;?PHP

phpmyadminで編集できない時の対応

これは僕のメモです。 phpmyadminで編集・コピー・削除が

CSSの変更をChromeにすぐ反映させる方法

これは、僕自身のメモです。   『スーパーリロー

→もっと見る

PAGE TOP ↑