「HTML/CSS」カテゴリーアーカイブ

HTML/CSSに関する記事です。

[HTML][CSS]display flexを使い画像を配置する。

2019年11月13日 orange

例：画像4つをdisplay flexを使って折り返すよう配置する。

●HTML
画像全体をdivで囲い、親要素としてclass=”flexImageBox”を設定する。
個々の画像に対して子要素としてclass=”flexImageItem”を設定する。

<div class="flexImageBox"> 
　<img src="../img/01.jpg" class="flexImageItem"> 
　<img src="../img/02.jpg" class="flexImageItem"> 
　<img src="../img/03.jpg" class="flexImageItem"> 
　<img src="../img/04.jpg" class="flexImageItem"> 
</div>

●CSS
○親要素.flexImageBoxに対する設定は主に配置や揃え方
display: flex;　　　　フレックス化する
flex-wrap: wrap;　　折り返しをする　これを設定しない場合は横一列に並ぶ
を今回は設定

.flexImageBox {
　　display: flex;
　　flex-wrap: wrap;
}

.flexImageItem {
　　padding:  10px;
}

そのほかに、
align-items:　 center 　縦方向に中央ぞろえ
justify-content: 　 flex-end; 　子要素を右寄せ
justify-content: space-between; 　子要素を等間隔配置　など有り

○子要素.flexImageItemに対する設定、主にそれぞれの幅の調整
padding: 10px;　個々の画像にパディングを設定

そのほかに、
width: 50%;と設定で個々の画像が全体の50%の幅となり、2列ずつの配置となる。

その他のCSS設定は以下も参考に
並び方の順序や揃え方を指定可能になる
https://web-bruno.com/flexbox-css3/
https://www.sejuku.net/blog/56401

HTML/CSS

[HTML][CSS]スマホでのテーブル表示、横スクロールできるようにする。

2019年10月30日 orange

スマホでテーブルを表示した際に、縦に間延びしたり横にはみ出て見えなくなったりすることを防ぐ。テーブルが画面外にはみ出して横スクロールで見れるようにする。

[HTML]
横スクロールさせたいtableの前後をdivで挟みクラスを指定する（例）<div class=”tableScroll>

<div class="tableScroll">
     <table>
              <tr>
                <th>都道府県名</th>
                <th>2014</th>
                <th>2015</th>
                <th>2016</th>
                <th>2017</th>
                <th>2018</th>
                <th>2019</th>
              </tr>
              <tr>
                <td>東京都</td>
                <td align="right">20</td>
                <td align="right">32</td>
                <td align="right">45</td>
                <td align="right">70</td>
                <td align="right">112</td>
                <td align="right">85</td>
              </tr>
     </table>
</div>

CSSに以下を記述する

.tableScroll{
overflow:auto;　/* テーブルをスクロールさせる */
}
.tableScroll{
width:100%;
}
.tableScroll::-webkit-scrollbar{
height: 5px; /* スクロールバーの高さ */
}
.tableScroll::-webkit-scrollbar-track{
background: #F1F1F1; /* スクロールバーの背景色 */
}
.tableScroll::-webkit-scrollbar-thumb {
background: #d6d6d6; /* スクロールバーの色 */
}
.tableScroll td, .tableScroll th{
white-space: nowrap; /* 文字の折返しを禁止 */
}

HTML/CSS, 未分類

[HTML]tdタグにrow span・row colspanで縦・横のセル合体

2019年10月30日 orange

tdタグにrowspan=”数値”　で設定したタグから数値分の縦方向のセルを結合する。

<table border="1">
<tr>
<td rowspan="3">結合した</td>
<td>結合しない</td>
</tr>
<tr>
<td>結合しない</td>
</tr>
<tr>
<td>結合しない</td>
</tr>
</table>

結合した	結合しない
	結合しない
	結合しない

tdタグにcolspan=”数値”　で設定したタグから数値分の横方向のセルを結合する。

<table border="1">
<tr>
<td colspan="2">結合したセル</td>
</tr>
<tr>
<td>結合しない</td>
<td>結合しない</td>
</tr>
</table>

結合する
結合しない	結合しない

HTML/CSS

[HTML・CSS]box-shadow（ボックスシャドウ、ドロップシャドウ）の注意点

2015年11月11日 yellow

テーブルのCSSでborder-collapse:collapse;にすると、IE11のみでbox-shadow:が動作しないことに注意する
border-collapse:separate;にすることで解決する。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
</head>
<style type="text/css">
<!--
.sampleWrap {
	width:80%;
	margin:0 auto;
	display:table;
	border-collapse:collapse;
	background:#FFF;
	box-shadow: 0 5px 5px -3px rgba(238, 232, 235, 1), 0 -5px 5px -3px rgba(238, 232, 235, 1);
	-webkit-box-shadow: 0 5px 5px -3px rgba(238, 232, 235, 1), 0 -5px 5px -3px rgba(238, 232, 235, 1);
	-moz-box-shadow: 0 5px 5px -3px rgba(238, 232, 235, 1), 0 -5px 5px -3px rgba(238, 232, 235, 1);
	-o-box-shadow: 0 5px 5px -3px rgba(238, 232, 235, 1), 0 -5px 5px -3px rgba(238, 232, 235, 1);
	-ms-box-shadow: 0 5px 5px -3px rgba(238, 232, 235, 1), 0 -5px 5px -3px rgba(238, 232, 235, 1);
}
.sample {
	height:300px;
	display:table-cell;
	background:#FFF;
	padding:20px;
}
-->
</style>
<body>
<div class="sampleWrap">
  <div class="sample">
    あああ
  </div>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無題ドキュメント</title>

</head>

<!--

.sampleWrap {

width:80%;

margin:0 auto;

display:table;

border-collapse:collapse;

background:#FFF;

box-shadow: 0 5px 5px -3px rgba(238, 232, 235, 1), 0 -5px 5px -3px rgba(238, 232, 235, 1);

-webkit-box-shadow: 0 5px 5px -3px rgba(238, 232, 235, 1), 0 -5px 5px -3px rgba(238, 232, 235, 1);

-moz-box-shadow: 0 5px 5px -3px rgba(238, 232, 235, 1), 0 -5px 5px -3px rgba(238, 232, 235, 1);

-o-box-shadow: 0 5px 5px -3px rgba(238, 232, 235, 1), 0 -5px 5px -3px rgba(238, 232, 235, 1);

-ms-box-shadow: 0 5px 5px -3px rgba(238, 232, 235, 1), 0 -5px 5px -3px rgba(238, 232, 235, 1);

}

.sample {

height:300px;

display:table-cell;

background:#FFF;

padding:20px;

}

-->

</style>

<body>

あああ

</div>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
</head>
<style type="text/css">
<!--
.sampleWrap {
	width:80%;
	margin:0 auto;
	display:table;
	border-collapse:separate;
	background:#FFF;
	box-shadow: 0 5px 5px -3px rgba(238, 232, 235, 1), 0 -5px 5px -3px rgba(238, 232, 235, 1);
	-webkit-box-shadow: 0 5px 5px -3px rgba(238, 232, 235, 1), 0 -5px 5px -3px rgba(238, 232, 235, 1);
	-moz-box-shadow: 0 5px 5px -3px rgba(238, 232, 235, 1), 0 -5px 5px -3px rgba(238, 232, 235, 1);
	-o-box-shadow: 0 5px 5px -3px rgba(238, 232, 235, 1), 0 -5px 5px -3px rgba(238, 232, 235, 1);
	-ms-box-shadow: 0 5px 5px -3px rgba(238, 232, 235, 1), 0 -5px 5px -3px rgba(238, 232, 235, 1);
}
.sample {
	height:300px;
	display:table-cell;
	background:#FFF;
	padding:20px;
}
-->
</style>
<body>
<div class="sampleWrap">
  <div class="sample">
    あああ
  </div>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無題ドキュメント</title>

</head>

<!--

.sampleWrap {

width:80%;

margin:0 auto;

display:table;

border-collapse:separate;

background:#FFF;

box-shadow: 0 5px 5px -3px rgba(238, 232, 235, 1), 0 -5px 5px -3px rgba(238, 232, 235, 1);

-webkit-box-shadow: 0 5px 5px -3px rgba(238, 232, 235, 1), 0 -5px 5px -3px rgba(238, 232, 235, 1);

-moz-box-shadow: 0 5px 5px -3px rgba(238, 232, 235, 1), 0 -5px 5px -3px rgba(238, 232, 235, 1);

-o-box-shadow: 0 5px 5px -3px rgba(238, 232, 235, 1), 0 -5px 5px -3px rgba(238, 232, 235, 1);

-ms-box-shadow: 0 5px 5px -3px rgba(238, 232, 235, 1), 0 -5px 5px -3px rgba(238, 232, 235, 1);

}

.sample {

height:300px;

display:table-cell;

background:#FFF;

padding:20px;

}

-->

</style>

<body>

あああ

</div>

</body>

</html>

[確認環境]
Windows 7 SP1 64bit
IE 11.0
Google Chrome 46.0.2490.80 m
Firefox 41.0.2

HTML/CSS

[HTML/CSS]フォントサイズの%指定について

2015年11月11日 yellow

・作業の最後にDreamweaverの一括置換機能を用いてpx指定を%指定に置換する時は、親要素、子要素の%指定のフォントサイズが掛け算で影響することに注意する
・bodyにfont-size:100%;を指定する（IE11、Chrome、Firefoxの基準フォントサイズは16px）
・小数点第一位までとする（小数点第二位切り捨て）
・フォントサイズの%指定は16px基準の相対表を参照する

以下、相対表
8px 50%
9px 56.2%
10px 62.5%
11px 68.7%
12px 75%
13px 81.2%
14px 87.5%
15px 93.7%
16px 100%
17px 106.2%
18px 112.5%
19px 118.7%
20px 125%
21px 131.2%
22px 137.5%
23px 143.7%
24px 150%
25px 156.2%
26px 162.5%
27px 168.7%
28px 175%
29px 181.2%
30px 187.5%
31px 193.7%
32px 200%
33px 206.2%
34px 212.5%
35px 218.7%
36px 225%
37px 231.2%
38px 237.5%
39px 243.7%
40px 250%

HTML/CSS

[HTML/CSS]通常のCSSと、印刷用（プリント用）のCSSを分けて作成する方法

2015年11月11日 yellow

メディアタイプを指定して記述することで、通常と印刷用のCSSを分けることができます
プリンター印刷時は印刷用のCSSを読み込むことで、印刷時特有の不具合（レイアウト崩れなど）が修正可能です

一例として、
通常のCSSのパスを、css/style.css
印刷用のCSSのパスを、css/print.css
とします

css/print.css の中身は通常の記述でOKです

<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/print.css" media="print" />

1 2	<link type="text/css" rel="stylesheet" href="css/style.css" /> <link type="text/css" rel="stylesheet" href="css/print.css" media="print" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/print.css" media="print" />
</head>
<body>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無題ドキュメント</title>

</head>

<body>

</body>

</html>

[参考]
http://on-ze.com/archives/1717

HTML/CSS

[HTML/CSS]dlタグ、dtタグ、ddタグについて

2015年11月11日 yellow

用語集などで頻繁に使われます。

例）

<dl>タグ: definition list（定義リスト）、description list（説明リスト）の意味合いのようです。<dl>タグで大外を囲います。
<dt>タグ: リストの項目を定義します。
<dd>タグ: リストの内容を説明します。

<dl>
  <dt>&lt;dl&gt;タグ</dt>
    <dd>definition list（定義リスト）、description list（説明リスト）の意味合いのようです。&lt;dl&gt;タグで大外を囲います。</dd>
  <dt>&lt;dt&gt;タグ</dt>
    <dd>リストの項目を定義します。</dd>
  <dt>&lt;dd&gt;タグ</dt>
    <dd>リストの内容を説明します。</dd>
</dl>