CSS 文字を太くする

CSSで文字を太くするには、font-weight を使います。

CSS 文字を太くする方法

数値指定で太さを支持する場合

これは100を指定時の文字の太さです。
これは200を指定時の文字の太さです。
これは300を指定時の文字の太さです。
これは400を指定時の文字の太さです。
これは500を指定時の文字の太さです。
これは600を指定時の文字の太さです。
これは700を指定時の文字の太さです。
これは800を指定時の文字の太さです。
これは900を指定時の文字の太さです。

キーワード指定で太さを指示する場合

これはlighterを指定時の文字の太さです。
これはnormalを指定時の文字の太さです。
これはbolderを指定時の文字の太さです。
これはboldを指定時の文字の太さです。

lighterは、数値200と同じ太さです。
nomalは、数値400と同じ太さです。
bolderは、数値500と同じ太さです。
boldは、数値700と同じ太さです。

CSS ではなくタグで太さを指示する場合

これはタグbで太さを指定しています。
これはタグstrongで太さを指定しています。

文字の太さは上のように数値で指定したり、キーワードやタグで指示したりできます。

でも、指定したにも関わらず太さが変わらないものが有ります。
数値で言うと100~500は同じくらいに見えますよね?600と700も同じで800と900も同じように見えます。

変わらないのは使用していいるフォントがその太さを持っていないためです。このブログでは特にフォントを指定していないので、デフォルトのフォントが採用されているはずです。

下にGoogleが開発したNoto Sans Japanese フォントを使用した例を表示します。どうですか?フォントの太さの違いが分かりましたか? 私のPC画面ではちゃんと太さが違って見えます。

これは100を指定時の文字の太さです。
これは200を指定時の文字の太さです。
これは300を指定時の文字の太さです。
これは400を指定時の文字の太さです。
これは500を指定時の文字の太さです。
これは600を指定時の文字の太さです。
これは700を指定時の文字の太さです。
これは800を指定時の文字の太さです。
これは900を指定時の文字の太さです。

CSSのコードを参考までに貼っておきます。なお、link タグは本来 head 部分に記述するものです。これが読み込めないとフォントを読み込めないので Noto Sans Japanese フォントで表示されません。

<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">
<p >
<span style='font-family: "Noto Sans Japanese", sans-serif;font-weight:100'>これは100を指定時の文字の太さです。</span><br>
<span style='font-family: "Noto Sans Japanese", sans-serif;font-weight:200'>これは200を指定時の文字の太さです。</span><br>
<span style='font-family: "Noto Sans Japanese", sans-serif;font-weight:300'>これは300を指定時の文字の太さです。</span><br>
<span style='font-family: "Noto Sans Japanese", sans-serif;font-weight:400'>これは400を指定時の文字の太さです。</span><br>
<span style='font-family: "Noto Sans Japanese", sans-serif;font-weight:500'>これは500を指定時の文字の太さです。</span><br>
<span style='font-family: "Noto Sans Japanese", sans-serif;font-weight:600'>これは600を指定時の文字の太さです。</span><br>
<span style='font-family: "Noto Sans Japanese", sans-serif;font-weight:700'>これは700を指定時の文字の太さです。</span><br>
<span style='font-family: "Noto Sans Japanese", sans-serif;font-weight:800'>これは800を指定時の文字の太さです。</span><br>
<span style='font-family: "Noto Sans Japanese", sans-serif;font-weight:900'>これは900を指定時の文字の太さです。</span><br>
</p>

下にGoogleが開発したNoto Sans JPフォントを使用した例を表示します。ちなみに私のPCではNoto Sans Japanese フォントに比べ、Noto Sans JPフォントでは違いが全然分かりませんでした。CSS の stylesheet の呼び出しに間違いがあるのかな?

これは100を指定時の文字の太さです。
これは200を指定時の文字の太さです。
これは300を指定時の文字の太さです。
これは400を指定時の文字の太さです。
これは500を指定時の文字の太さです。
これは600を指定時の文字の太さです。
これは700を指定時の文字の太さです。
これは800を指定時の文字の太さです。
これは900を指定時の文字の太さです。

Noto Sans Japanese と Noto Sans JP の違い

まず、「Noto Sans」と言うGoogleとAdobeが共同開発したフォントファミリーがあります。その中でWebで簡単に使えるのが、「Noto Sans Japanese」と「Noto Sans JP」フォントになります。他にも「Noto Sans CJK JP」フォントとかも有るのですが、Webでは「Noto Sans Japanese」と「Noto Sans JP」が使いやすいです。

Noto Sans Japanese と Noto Sans JP はGoogle fontsとして公開されていますが、Noto Sans Japanese はベータ版として認識されているようです。あとは、フォントの太さの段階(Weight)が7段階か6段階の違いがあります。下の表のようになっています。

WeightNoto Sans JapaneseNoto Sans JP
100Thinthin
200Light(無し)
300DemiLightlight
400Regularregular
500Mediummedium
700Boldbold
900Blackblack

数値600の指定はどちらも無いようです。
それにキーワードの異なっていますので、これから太さ指定をする時はキーワードを使わずに数値指定の方が無難そうですね。

以上、「CSS 文字を太くする」でした。

画像の横に文字を表示するには

画像の横に文字を表示するには

画像の横に説明文などが表示されているのを良く見かけます。下に表示されるより何となくわかりやすくて良いですよね。

画像の横に文字を表示するのは、画像 <img> に float 指定をすると簡単に実現できます。

例として下のUSBフラッシュメモリの紹介画面をTable を使わずに作ってみます。インターフェース :USB3.0 / USB2.0までが商品説明です。

持ち運びに便利なキャップレス!!ワンプッシュでコネクタを収納!
コネクターを傷つけないスライド・リトラクタブル(伸縮)タイプ!

シリーズ名 : USB3.0 Express ST1-2
タイプ :USBフラッシュメモリ
インターフェース :USB3.0 / USB2.0

 

CSS float で画像の回りこみを作ってみる

画像img要素にstyle=”float:left”を指定します。これで次の要素に対して左側に画像が回り込むようになります。その後、商品説明を書いて、最後に念のため style=”clear:both” で回り込みをクリアします。

持ち運びに便利なキャップレス!!ワンプッシュでコネクタを収納!
コネクターを傷つけないスライド・リトラクタブル(伸縮)タイプ!

シリーズ名 : USB3.0 Express ST1-2
タイプ : USBフラッシュメモリ
インターフェース : USB3.0 / USB2.0


<img src="https://memo.itsysgroup.com/wp-content/uploads/2018/04/042718_0554_USB1.jpg" alt="" width="209" height="218" style="float:left"/>
<p>
  持ち運びに便利なキャップレス!!ワンプッシュでコネクタを収納!
  <br>
  コネクターを傷つけないスライド・リトラクタブル(伸縮)タイプ!
</p>
<p>
  シリーズ名  : USB3.0 Express ST1-2<br>
  タイプ  : USBフラッシュメモリ<br>
  インターフェース  : USB3.0 / USB2.0
</p>
<br  style="clear:both">

簡単にイメージ通り表示されたと思います。
画像を商品説明の右側に回り込ませたい場合は、float:right を指定します。

ちなみにtable を使わないでと書きましたが、ふと商品説明は table を使った方が見易そうですね。やってみます。

持ち運びに便利なキャップレス!!ワンプッシュでコネクタを収納!
コネクターを傷つけないスライド・リトラクタブル(伸縮)タイプ!


シリーズ名USB3.0 Express ST1-2
タイプUSBフラッシュメモリ
インターフェースUSB3.0 / USB2.0

<img src="https://memo.itsysgroup.com/wp-content/uploads/2018/04/042718_0554_USB1.jpg" alt="" width="209" height="218" style="float:left;"/>
<p style="font-size:0.7em; font-weight: bold;">
  持ち運びに便利なキャップレス!!ワンプッシュでコネクタを収納!
  <br>
  コネクターを傷つけないスライド・リトラクタブル(伸縮)タイプ!
</p>
<br>
<div style="float:left;">
  <table>
    <tr><td>シリーズ名</td><td>USB3.0 Express ST1-2</td></tr>
    <tr><td>タイプ</td><td>USBフラッシュメモリ</td></tr>
    <tr><td>インターフェース</td><td>USB3.0 / USB2.0</td></tr>
  </table>
</div>
<br  style="clear:both">

うーん……変わらなかったかも……
ちなみに上の例では table要素を div要素で囲みましたが、table要素にstyle=float:left; width: 300px; のように float指定をしてもかまいません。div要素で囲んだ方が楽かなと思って囲んだだけですので。

以前『CSS floatの使い方』として段組み記事を書きましたので段組みが気になるなら少し覗いてみてください。

以上、「画像の横に文字を表示するには」でした。

文字 Font の 色を指定する

文字 Font の 色を指定する

文字Fontの色を指定する

文字 Font の色を指定する時は、「color」プロパティを指定します。

color: #ff0000;

色の指定は、bodyに対して行い文書全体に指定もできますし、個別に指定することも出来ます。

文字 Font の色を指定する例

例をいくつか載せておきます。

bodyに対して行い文書全体に指定

全体に赤の文字色を指定します。

<html>
<head>
<style>
body {
    color: #ff0000;
}
</style>
</head>
<body>
これはFontの色指定のテストです。(赤指定)
</body>
</html>

h1タグの文字色をこげ茶色に指定

こげ茶の色を#662323にしました。
色は「原色大辞典」さんで調べると、指定する色値を簡単に取得できます。

<html>
<head>
<style>
body {
    color: #ff0000;
}
h1 {
    color: #662323;
}
</style>
</head>
<body>
<h1>h1タグの色はこげ茶</h1>
これはFontの色指定のテストです。(赤指定)
</body>
</html>

Class指定で文字色を青に指定

pタグにClass blue を指定し、blueクラスに青色を指定しています。

<html>
<head>
<style>
body {
    color: #ff0000;
}
h1 {
    color: #662323;
}
.blue {
    color: #0000ff;
}
</style>
</head>
<body>
<h1>h1タグの色はこげ茶</h1>
これはFontの色指定のテストです。(赤指定)
<p class='blue'>これはClassでFontの色指定のテストです。(青指定)</p>
</body>
</html>

以上、簡単な「文字 Font の 色を指定する」方法の紹介でした。

CSS padding

CSS padding

padding プロパティは、上下左右の padding を指定する際に使用します。
padding には負の値を指定することはできません。
また、%で指定することも出来ます。

padding の引数の与え方は、[上][右][下][左]の順に指定します。
上下左右を異なる padding 幅にしたい場合には、スペースで区切って上右下左の時計回りの順に4の値を指定します。

しかし、引数を必ずしも4つ与える必要がなく、下のようなことも出来ます。

値を1つ指定 指定した値が[上下左右]の padding
値を2つ指定 記述した順に[上下][左右]の padding
値を3つ指定 記述した順に[上][左右][下]の padding
値を4つ指定 記述した順に[上][右][下][左]の padding

この時計回りと、省略時の設定について覚えておくと便利です。 

margin padding border

margin と padding と border には次の関係があります。
border の幅は別途 width に加算されるので覚えておかないと細かな調整が出来なくなります。

margin padding borderの関係

margin padding borderの関係

padding は Element(要素)からすぐにスペースを空けるように働きます。なので border の位置にも影響してきます。
また、要素に指定した background 色を広げます。

一方、marginは border の外からスペースを空ける働きをします。
これは、隣接する Element(要素)に対してどれだけ距離を取るかを指定しています。
スペースを取った場合の background (背景色)は、親の背景色になります。

下に少しでも理解を助けるために参考になるHTMLを貼っておきますので、メモ帳にでもコピーして、名前を test.html 等保存して動かして確認にして margin や padding, border の幅を変えていろいろ試してみてください。


<html>
<head>
<style>
input{
    font-size: 10px;
    background: #909000;
    padding: 10px 20px 30px 40px;
    border: solid 10px;
    margin: 50px 40px 30px 20px;
}
</style>
</head>
<body>

<div style='background: #c0c0c0;'>
    <input type="button" value='Button'></input>
<div>

</body>
</html>

padding は margin に比べシンプルな仕様なので簡単に把握できると思います。
以上、「CSS padding」でした。

カテゴリー: CSS

CSS margin

CSS margin

margin プロパティは、上下左右の margin を指定する際に使用します。
margin の引数の与え方は、[上][右][下][左]の順に指定します。
上下左右を異なる margin 幅にしたい場合には、スペースで区切って上右下左の時計回りの順に4の値を指定します。

しかし、引数を必ずしも4つ与える必要がなく、下のようなことも出来ます。

値を1つ指定 指定した値が[上下左右]のマージン
値を2つ指定 記述した順に[上下][左右]のマージン
値を3つ指定 記述した順に[上][左右][下]のマージン
値を4つ指定 記述した順に[上][右][下][左]のマージン

この時計回りと、省略時の設定について覚えておくと便利です。 

この margin ですが、やたらと複雑でブラウザごとに挙動が違うこともあるため、非常に厄介です。
最近ではブラウザごとの挙動も落ち着いてきた感はあるものの重なりのマイナス指定で重なりのある時など、異なることがあります。

margin padding border

margin と padding と border には次の関係があります。
border の幅は別途 width に加算されるので覚えておかないと細かな調整が出来なくなります。

margin padding borderの関係

margin padding borderの関係

marginは border の外からスペースを空ける働きをします。
これは、隣接する Element(要素)に対してどれだけ距離を取るかを指定しています。
スペースを取った場合の background (背景色)は、親の背景色になります。

一方、padding は Element(要素)からすぐにスペースを空けるように働きます。なので border の位置にも影響してきます。
また、要素に指定した background 色を広げます。

下に少しでも理解を助けるために参考になるHTMLを貼っておきますので、メモ帳にでもコピーして、名前を test.html 等保存して動かして確認にして margin や padding, border の幅を変えていろいろ試してみてください。


<html>
<head>
<style>
input{
    font-size: 10px;
    background: #909000;
    padding: 10px 20px 30px 40px;
    border: solid 10px;
    margin: 50px 40px 30px 20px;
}
</style>
</head>
<body>

<div style='background: #c0c0c0;'>
    <input type="button" value='Button'></input>
<div>

</body>
</html>

margin の相殺

margin をわかり辛くしているのに相殺があります。
margin の相殺は上下 top と bottom の間で発生します。その際、margin は結合される(折り畳まれる (collapsed))ことがあり、結合される margin のうち大きなほうのサイズを持った一つの margin になります。
ただ、すべてのケースで相殺が起こるかと言うと、そうではないです。
・floatしている要素は、相殺が起きません。
・absolute と fixed を指定された要素は相殺されません。

単純な相殺は、大きなほうのサイズを持った margin が採用されますのでわかりやすいと思います。
親子での相殺や親子親子での相殺になってくると、かなり面倒になりますね。複雑な CSS を書くなら意識して設計を行う必要があます。
相殺が起きないケースは、一般的に使用する機械が少ないので割愛しますが、このレベルで仕事をされるようなら仕様までしっかり把握する必要があります。

negative margin(ネガティブ・マージン)

negative margin とは、マイナス方向に margin を設定することを言います。
単純な例では、少しだけはみ出させたい場合に使われます。

でも、margin の数値をマイナス指定することによって、要素を移動させ配置することができるので、配置に使うこともあります。
negative margin は理解している人にはとても便利なのですが、margin を複雑にしている一因です。
興味があるようなら negative margin で検索してみてください。

以上、最初は戸惑う「CSS margin」でした。

カテゴリー: CSS

CSS id と class の違いと使い分け

id と class

CSS(スタイルシート)を書く際に、「特定のタグ・要素すべて」を指定して一括装飾することもありますが、「特定のタグ・要素」を装飾したい場合がほとんどです。
HTMLで指定できる属性は2種類あり、ご存知のid属性とclass属性です。
この id と class の 違い と どのように使い分ける か、迷うことがあります。

この id と class は、適当に使うのではなく、ちゃんとした設計思想があります(あるそうです。。。あると思います)。
そこで今回は、 id と class の違いと、その設計思想についてお話します。

id と class の違い

id と class の違いは、簡単に理解できます。

id は identification の略で、本来は身分証明とか身分証明書のことです。
身分証明とか身分証明書なので同じページ内に、同じ id を持つものは居てはなりません。
居た場合、エラーになるか、プログラム挙動がおかしくなります。

class は共通の性質を有する部類、種類、(学校の)クラス、学級、組などの意味がありますね。
共通の性質を有する組を表しているので、同じ Class に属するものが居てもおかしくないですね。

id と class の違いは判りましたか?
他と区別するために付けるものは id
他と共通するために付けるものは class
です。

id と class の使い分け

では、id と class の使い分けはどのように考えましょう?
id と class は両方付与しても構いません。
id の方が優先されるため、同じ指定なら id が優先されるのでそこは注意が必要ですし、使い方によっては良いケースでもあります。

で、 id と class の違いが理解できていれば、使い分けも知識としては理解できます。
他と区別するために付けるものは id
他と共通するために付けるものは class
です。

ただ、現実問題プログラムを組んで行くと適当になってきてしまい、class を id として使用したりします。
相当大きなページでも最近のPCやスマホは高機能なので、下手な作りでも高速に動いてくれるので問題もないのですが。

で、解決策として、ルールを作って使い方を変えましょうとか、決め打ち(命名ルールに従い)で主要なタグに id を付与しclassは後から追加しましょうとか、書いてある書籍をよく見かけます。
間違いではないですし、有効に機能もする場合もあると思うのですが、それでは本末転倒というか、私は違和感を感じてしまいます。

操作はユニークか否かが、鍵

id か class かはオブジェクト指向の考えたを導入すると明確になります。
要は設計方針で id か class かも決められるます。
でも、オブジェクト指向なんて言われても困りますよね。。。

で、まずは操作が「共通して行われるもの」か、ユニークなもので「共通化されないもの」かを判定します。

操作が共通して行われるもの、背景色や文字種類・大きさ、その他何でも一度に指定して一度に更新したい操作には class を使います。
たとえ今は一つのタグに対してであっても、拡張したり、他のページにコピペで使用したりもありますので、操作を共通で行うものと判断出来たら class にします。

逆にユニークなもので共通化されないものの場合は、間違いを防ぐために id を使用します。
例えばいくつも必須入力テキストがあり、各々の入力判定の結果OKなら緑、NGなら赤にバックグランドを変える場合は、共通部分は class で、バックグラウンド色は id で指定するようにします。

設計思想によって、class を追加、削除するプログラムを書くと上の説明とはことなる考えたが必要になります。
設計思想によって、コロコロ変わってしまうので、「ルールを作って使い方を変えましょうとか、決め打ち(命名ルールに従い)で主要なタグに id を付与しclassは後から追加しましょう」とか結果曖昧な表現になってしまうのですね。

今回は、「操作はユニークか否か」で使い分ける方法を紹介しましたが、これが絶対ではなく、あくまでも一例です。
大きくないWebページなら、変な使い方でも問題ないです。
大きなWebページでは、ごちゃごちゃして、class を触ったら、意図しないタグで意図しない変化が出てしまったってことが良くあります。
id や class を管理をしてすっきりしたCSSを書きましょう。

以上、CSS id と class の違いと使い分けでした。

CSS floatの使い方

float とは

float は CSS のプロパティで、要素を包含ブロックの左右どちらかの側に沿うように設置し、テキストやインライン要素がその周りを回りこめるように定義します。要素はウェブページの通常のフローから外れますが、 (絶対位置指定 とは対照的に) フローの一部であり続けます。

これだけを読むと概念的で難しいですね……
でも、float を使って段組みをしたり文字を横に表示したり良く使われているテクニックですので、概念は置いておいて「どうのようにしたら、どうなるか」を経験的に覚えてしまうのも手です。

 CSS floatの使い方

floatは段組みを使う時によく使う、CSSレイアウトの基本テクニックです。
ぱっと見は解りづらいですし、思った通りのことが出来ないことも良くあります。
自分で簡単なCSSレイアウトを組んでみて、体感して使うことが覚えてしまう早道です。

何も指定しない場合

<div>
  <div style='background-color: red; width:100px;height:50px;'>テスト赤</div>
  <div style='background-color: blue; width:100px;height:50px;'>テスト青</div>
  <div style='background-color: green; width:100px;height:50px;'>テスト緑</div>
  <div style='background-color: yellow; width:100px;height:50px;'>テスト黄色</div>
</div>

上のHTMLをそのまま記述すると、DIV要素がそのまま下方向に流れて下のように表示されます。

テスト赤
テスト青
テスト緑
テスト黄色

 

float:left指定すると

右に流して表示する場合に CSS で float:left を指定します。

<div>
  <div style='background-color: red; width:100px;height:50px; float:left;'>テスト赤</div>
  <div style='background-color: blue; width:100px;height:50px; float:left;'>テスト青</div>
  <div style='background-color: green; width:100px;height:50px; float:left;'>テスト緑</div>
  <div style='background-color: yellow; width:100px;height:50px; float:left;'>テスト黄色</div>
</div>
<div style="clear:both"></div>
テスト赤
テスト青
テスト緑
テスト黄色

float:left 指定をすると上のように、右方向に流れて表示されます。

 

FLOAT:RIGHT指定すると

左に流して表示する場合は CSS に float:right を指定します。

<div>
  <div style='background-color: red; width:100px;height:50px; float:right;'>テスト赤</div>
  <div style='background-color: blue; width:100px;height:50px; float:right;'>テスト青</div>
  <div style='background-color: green; width:100px;height:50px; float:right;'>テスト緑</div>
  <div style='background-color: yellow; width:100px;height:50px; float:right;'>テスト黄色</div>
</div>
<div style="clear:both"></div>
テスト赤
テスト青
テスト緑
テスト黄色

しかし、全体が右寄りになってしまっています。これを全体を左にしながら左に流すには、親の DIV要素を float:right; 指定します。

<div style='background-color: black; float:left;'>
<div style='background-color: red; width:100px;height:50px; float:right;'>テスト赤</div>
  <div style='background-color: blue; width:100px;height:50px; float:right;'>テスト青</div>
  <div style='background-color: green; width:100px;height:50px; float:right;'>テスト緑</div>
  <div style='background-color: yellow; width:100px;height:50px; float:right;'>テスト黄色</div>
</div>
<div style="clear:both"></div>
テスト赤
テスト青
テスト緑
テスト黄色

 

良くある段組みの作り方

次に良くある段組みの作り方を紹介します。
これはテーブルなどで作ってその中に要素を書いていく手も有るのですが、DIV要素の段組みを使うことこのようになる例です。

<div style="width:400px; clear:both;">
  <div style='background-color: red; width:200px; height:50px;'>ヘッダー</div>
  <div style='background-color: blue; width:100px; height:100px; float:left;'>メイン</div>
  <div style='background-color: green; width:100px; height:100px; float:left;'>右サイド</div>
  <div style='background-color: yellow; width:200px; height:50px; clear:left;'>フッター</div>
</div>
<div style="clear:both"></div>
ヘッダー
メイン
右サイド
フッター

ちなみに、フッターをそのまま float:left にしたり何も指定しないと、簡単に段組みが崩れます。
しなみに clear:left を入れずに作るとこのようになります。分かりやすく表示するためにわざと黄色の領域を大きくしてはみ出させて表示しています。
下のサンプルコードで確認してみてください。

ヘッダー
メイン
右サイド
フッター
<div style="width:400px; clear:both;">
  <div style='background-color: red; width:200px; height:50px;'>ヘッダー</div>
  <div style='background-color: blue; width:100px; height:100px; float:left;'>メイン</div>
  <div style='background-color: green; width:100px; height:100px; float:left;'>右サイド</div>
  <div style='background-color: yellow; width:210px; height:150px;'>フッター</div>
</div>
<div style="clear:both"></div>

試行錯誤で試すとなんとなくわかってくると思いますので、最初は簡単な段組みから徐々に複雑な段組みへと挑戦してみてください。

ここまでがレイアウトの基本です。
複雑な段組みはこれらの応用ですので、まずは基本のレイアウトをしっかり把握しておきましょう。

以上、CSS floatの使い方の備忘録でした。

カテゴリー: CSS

【css,jquery】htmlテーブルのヘッダーを固定する方法案

テーブルヘッダーと左端を固定して縦スクロール横スクロールに対応させる方法

テーブルヘッダーを縦スクロール及び横スクロールともに固定する方法のシステム開発備忘録です。

一つ前のシステム備忘録でCSSのみ(幅を動的に取得するためにはjQueryが必要)でテーブルヘッダーを縦スクロールする方法を投稿しましたが、今回は横スクロールにも対応するシステム開発備忘録です。

テーブルのヘッダーを固定する要望は多いと思いますが、横スクロールをするためにはcssだけでは辛いですので、jQueryを使って、面倒なプログラミングをなるべく簡単にする案です。

テーブルヘッダーを固定する案はいろいろ考案できるので、その中の一案として考えています。
今回は、事前に用意するのは、大枠となるdivタグと子要素として固定部table、水平ヘッダー部div,table、垂直ヘッダー部div,table、データ部div,tableです。
htmlを貼っておくので詳細はそこで確認してください。

イメージとしては、下の表の配置です。
データ部のdivのスクロールバーの移動量を水平ヘッダー部div、垂直ヘッダー部divに反映させ、ヘッダーを固定するイメージです。

固定部水平ヘッダー部
垂直ヘッダー部データ部

また、テーブルは通常のテーブルをデータ部に作成します。
id=”tableD”としています。
jqueryでは、この普通に作られたテーブルのヘッダー部を水平ヘッダー部にコピーします。
また、テーブルの一番左端の列を垂直ヘッダー部にコピーします。
コピーされたヘッダーと一番左端の列は非表示にしています。

あとはスクロールイベントを捉えて、移動量を反映させる単純な仕組みです。

尚、厄介なのはテーブルの幅がブラウザで自動調整されていると微妙に誤差ができ、ずれが生じます。罫線とかちゃんと幅を計算してないのも原因かも……

きっちり計算すればずれは発生しないのかもしれませんが、ブラウザーの種類やバージョンの違いでも誤差が発生する可能性が有るので、この辺りは使用する環境で使用できない案になる可能性も有ります。

まぁ、実際のプログラムに使用する場合はもう少し考慮が必要な部分も有りますので、あくまでも参考までに。

htmlは以下の通りです。

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <style type="text/css">
  /* 基本のテーブル定義 */
  #tableT, #tableH, #tableV, #tableD {
    border: 1px solid #000000;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 16px;
  }

  #tableD td {
    border: 1px solid #000000;
    height: 16px;
  }

  #tableH th, #tableD th {
    border: 1px solid #000000;
    font-size: 16px;
  }

  #tableD th {
    background-color: #FFBB88;
    color: #000000;
  }

  #tableD tr:nth-child(odd) td {
    background-color: #C8C8E8;
    color: #000000;
  }

  #tableD tr:nth-child(even) td {
    background-color: #E8E8FF;
    color: #000000;
  }

  #header_h {
    position: absolute;
    top: 0px;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  #header_v {
    position: absolute;
    left: 0px;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  #data {
    position: absolute;
    overflow-x: scroll;
    overflow-y: scroll;
    width: 270px;
    height: 150px;
  }
</style>
<script type="text/javascript">
  $(document).ready(function () {
    //固定部を作成、tableDの一番左のヘッダーを取得、固定部に張り付ける 
    //水平ヘッダー部を作成
    var fF=0;
    $("#tableD > thead > tr > th").each(function (i) {
      if (fF == 0) {
        $(this).clone(true).appendTo($("#tableT > thead > tr"));
        StyleCopyB($("#tableT > thead > tr > th:first"), $(this));
        fF = 1; 
      } else {
        $(this).clone(true).appendTo($("#tableH > thead > tr"));
        StyleCopyB($("#tableH > thead > tr > th:last"), $(this));
      }
    });

    //非表示化
    $("#tableD > thead > tr").hide();

    //垂直ヘッダー部を作成
    $("#tableD > tbody > tr").each(function (i) {
      $("#tableV > tbody").append("<tr></tr>");
      $(this).children().eq(0).clone(true).appendTo($("#tableV > tbody > tr:last-child"));
      $(this).children().eq(0).hide();
      StyleCopyB($("#tableV > tbody > tr:last-child > td"), $(this).children().eq(0));
    });

    //垂直ヘッダーのwidthを固定部に設定 
    StyleCopyA($("#tableT > thead > tr > th:first"),$("#tableV > tbody > tr:first > td"));

    //データ部のwidthを水平ヘッダーに設定
    $("#tableH > thead > tr > th").each(function (i) {
      $(this).width($("#tableD > tbody > tr").children().eq(i+1).width());
    });

    //DIVheader-hとDIVdataのleftを設定
    $("#header_h").css("left", $("#tableT").width() + "px");
    $("#data").css("left", $("#tableT").width() + "px");

    //DIVheader-vとDIVdataのtopを設定
    $("#header_v").css("top", $("#tableT").height() + "px");
    $("#data").css("top", $("#tableT").height() + "px");

    //
    $("#header_h").width($("#data").width()-17);//17前後要微調整、垂直スクロールバーの幅....※求め方は不明
    $("#tableH").width($("#tableD").width() - $("#tableT").width());
 
    //DIVheader-vのheightをDIVdataのheightを設定
    $("#header_v").height($("#data").height() - 17);//17前後要微調整は水平スクロールバーの高さ....※17の求め方は不明

    //-------------------------------------------------------------------------------------------------
    $("#data").on( 'scroll', function () {
      $("#header_h").scrollLeft($("#data").scrollLeft()); // データ部のスクロールをヘッダに反映 
      $("#header_v").scrollTop($("#data").scrollTop());   // データ部のスクロールをヘッダに反映
    });
    //-------------------------------------------------------------------------------------------------

    function StyleCopyA($copyTo, $copyFrom) {
      $copyTo.css("width", $copyFrom.css("width"));
    }

    function StyleCopyB($copyTo, $copyFrom) {
      $copyTo.css("height", $copyFrom.css("height"));
      $copyTo.css("font-size", $copyFrom.css("font-size"));
      $copyTo.css("background-color", $copyFrom.css("background-color"));
      $copyTo.css("vertical-align", $copyFrom.css("vertical-align"));
      $copyTo.css("border-top-width", $copyFrom.css("border-top-width"));
      $copyTo.css("border-top-color", $copyFrom.css("border-top-color"));
      $copyTo.css("border-top-style", $copyFrom.css("border-top-style"));
      $copyTo.css("border-left-width", $copyFrom.css("border-left-width"));
      $copyTo.css("border-left-color", $copyFrom.css("border-left-color"));
      $copyTo.css("border-left-style", $copyFrom.css("border-left-style"));
      $copyTo.css("border-right-width", $copyFrom.css("border-right-width"));
      $copyTo.css("border-right-color", $copyFrom.css("border-right-color"));
      $copyTo.css("border-right-style", $copyFrom.css("border-right-style"));
      $copyTo.css("border-bottom-width", $copyFrom.css("border-bottom-width"));
      $copyTo.css("border-bottom-color", $copyFrom.css("border-bottom-color"));
      $copyTo.css("border-bottom-style", $copyFrom.css("border-bottom-style"));
    }
  });
</script>
</head>

<body>
  <div style="position: relative;">
    <!--固定部-->
    <table id="tableT" style="position:absolute;left:0px;top:0px;">
      <thead>
        <tr></tr>
      </thead>
    </table>

    <!--水平ヘッダー部-->
    <div id="header_h">
      <table id="tableH">
        <thead>
          <tr></tr>
        </thead>
      </table>
    </div>

    <!--垂直ヘッダー部-->
    <div id="header_v">
      <table id="tableV">
        <tbody></tbody>
      </table>
    </div>

    <!--データ部-->
    <div id="data">
      <table id="tableD" style="width:430px;">
        <thead>
          <tr>
            <th>固定項目</th>
            <th>項目1</th>
            <th>項目2</th>
            <th>項目3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td style="width:120px;">項目名称A</td>
            <td style="width:130px;">スライド項目A1</td>
            <td style="width:60px;">項目A2</td>
            <td style="width:120px;">スライド項目A3</td>
          </tr>
          <tr>
            <td>項目名称B</td>
            <td>スライド項目B1</td>
            <td>項目B2</td>
            <td>スライド項目B3</td>
          </tr>
          <tr>
            <td>項目名称C</td>
            <td>スライド項目C1</td>
            <td>項目C2</td>
            <td>スライド項目C3</td>
          </tr>
          <tr>
            <td>項目名称D</td>
            <td>スライド項目D1</td>
            <td>項目D2</td>
            <td>スライド項目D3</td>
          </tr>
          <tr>
            <td>項目名称E</td>
            <td>スライド項目E1</td>
            <td>項目E2</td>
            <td>スライド項目E3</td>
          </tr>
          <tr>
            <td>項目名称F</td>
            <td>スライド項目F1</td>
            <td>項目F2</td>
            <td>スライド項目F3</td>
          </tr>
          <tr>
            <td>項目名称G</td>
            <td>スライド項目G1</td>
            <td>項目G2</td>
            <td>スライド項目G3</td>
          </tr>
          <tr>
            <td>項目名称H</td>
            <td>スライド項目H1</td>
            <td>項目H2</td>
            <td>スライド項目H3</td>
          </tr>
          <tr>
            <td>項目名称I</td>
            <td>スライド項目I1</td>
            <td>項目I2</td>
            <td>スライド項目I3</td>
          </tr>
          <tr>
            <td>項目名称J</td>
            <td>スライド項目J1</td>
            <td>項目J2</td>
            <td>スライド項目J3</td>
          </tr>
          <tr>
            <td>項目名称K</td>
            <td>スライド項目K1</td>
            <td>項目K2</td>
            <td>スライド項目K3</td>
          </tr>
          <tr>
            <td>項目名称L</td>
            <td>スライド項目L1</td>
            <td>項目L2</td>
            <td>スライド項目L3</td>
          </tr>
          <tr>
            <td>項目名称M</td>
            <td>スライド項目M1</td>
            <td>項目M2</td>
            <td>スライド項目M3</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>

以上、テーブルヘッダーを縦スクロール及び横スクロールともに固定する方法のシステム開発備忘録でした。

更新2020/06/13

以前載せていたコードが上手く動作しないことを発見しました。
原因は古いjQueryを参照しようとしていてGoogleapis.com から取得できない事でした。
下のバージョンがNGの読み込みです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

修正したjQueryの参照先を下に示しておきます。

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

修正前のコードを参照してjQueryが動かなかった方が居られましたら、この場を借りてお詫びいたします。申し訳ありませんでしたm(_ _)m

それから、ブロックエディタに変わってから記載していたHTMLコードが変な風に表示されていました。それを修正しました。

【CSS】テーブルヘッダーを縦スクロールで固定する方法

テーブルヘッダーを縦スクロールで固定する方法のシステム開発備忘録です。
テーブルのヘッダーを固定する要望は多いと思いますが、何かと面倒なプログラミングになってしまいます。

テーブルヘッダーを固定する方法

そこで、今回は主にCSSとjQueryでテーブルのヘッダーを固定する方法を調査テストしたので、その備忘録です。

1)テーブルのヘッダー部、ボディー部、フッター部をfloat: left;します。
  floatにすることでoverflowが有効になります。
  ヘッダー部、ボディー部、フッター部と横に伸びて行く事になります。
  そこで後程、折り返しが付くようにtdもしくはthの幅をjqueryにて求めてセットします。
2)ヘッダー部の高さを決めます。
  今回のテストでは200pxにしています。
  また、スクロールバーが表示されるように設定します。
3)th,tdの高さや幅を要件沿って設定します。
  jqueryで立ち上げ時に幅を求めます。
  幅が動的に変更されるような場合は再度設定する必要があります。
4)Jqueryでテーブル幅を設定します。
  今回は各thの幅+border幅を足して行きます。
  最後にテーブルのborder幅とスクロール幅を足しました。
  調整が必要な場合も有るようですので、動かして確かめてください。

コードを下に示します。

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <style>
    /*thead,tbody,tfoot*/
    #tableA > thead,
    #tableA > tbody,
    #tableA > tfoot {
      float: left; /*overflowを有効化*/
    }
 
    #tableA > tbody {
      height: 200px;
      overflow: auto;
    }
 
    /*th,td*/
    #tableA th,
    #tableA td {
      height: 50px;
    }
    .cA{
      width:60px;
    }
    .cB{
      width:50px;
    }
    .cC{
      width:90px;
    }
    .cD{
      width:60px;
    }
    .cE{
      width:40px;
    }
    .cF{
      width:40px;
    }
    .cG{
      width:40px;
    }
 
    /*border*/
    #tableA {
      border: solid 1px black;
    }
 
    #tableA > thead > tr > th {
      border: solid 1px blue;
      background-color:lightblue;
    }
 
    #tableA > tbody > tr > td{
      border: solid 1px blue;
    }
    #tableA > tfoot > tr > td {
      border: solid 1px blue;
    }
  </style>
 
  <script type="text/javascript">
 
    $(document).ready(function () {
   //thの幅の合計を求める
      var w=0;
      $("#tableA > thead > tr >th").each(function (i) {
        w=w+$(this).width()+2;
      });
      $("#tableA").width(w + 16+2);
      $("#tableA > thead").width(w + 16+2);
      $("#tableA > tbody").width(w + 16+2);
      $("#tableA > tfoot").width(w + 16+2);
 
      $("#tableA > tr").width(w);

    });
  </script>
</head>
<body>
    <table id="tableA" cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
      <caption>縦スクロール</caption>
      <thead>
        <tr>
          <th class="cA">A</th>
          <th class="cB">B</th>
          <th class="cC">C</th>
          <th class="cD">D</th>
          <th class="cE">E</th>
          <th class="cF">F</th>
          <th class="cG">G</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="cA">A1</td>
          <td class="cB">B1</td>
          <td class="cC">C1</td>
          <td class="cD">D1</td>
          <td class="cE">E1</td>
          <td class="cF">F1</td>
          <td class="cG">G1</td>
        </tr>
        <tr>
          <td class="cA">A2</td>
          <td class="cB">B2</td>
          <td class="cC">C2</td>
          <td class="cD">D2</td>
          <td class="cE">E2</td>
          <td class="cF">F2</td>
          <td class="cG">G2</td>
  </tr>
        <tr>
          <td class="cA">A3</td>
          <td class="cB">B3</td>
          <td class="cC">C3</td>
          <td class="cD">D3</td>
          <td class="cE">E3</td>
          <td class="cF">F3</td>
          <td class="cG">G3</td>
 </tr>
        <tr>
          <td class="cA">A4</td>
          <td class="cB">B4</td>
          <td class="cC">C4</td>
          <td class="cD">D4</td>
          <td class="cE">E4</td>
          <td class="cF">F4</td>
          <td class="cG">G4</td>
 </tr>
        <tr>
          <td class="cA">A5</td>
          <td class="cB">B5</td>
          <td class="cC">C5</td>
          <td class="cD">D5</td>
          <td class="cE">E5</td>
          <td class="cF">F5</td>
          <td class="cG">G5</td>
 </tr>
        <tr>
          <td class="cA">A6</td>
          <td class="cB">B6</td>
          <td class="cC">C6</td>
          <td class="cD">D6</td>
          <td class="cE">E6</td>
          <td class="cF">F6</td>
          <td class="cG">G6</td>
 </tr>
        <tr>
          <td class="cA">A7</td>
          <td class="cB">B7</td>
          <td class="cC">C7</td>
          <td class="cD">D7</td>
          <td class="cE">E7</td>
          <td class="cF">F7</td>
          <td class="cG">G7</td>
 </tr>
      </tbody>
    </table>
</body>
</html>

縦スクロールだけで有れば割と簡単にテーブルヘッダーの固定ができます。
以上、テーブルヘッダーを縦スクロールで固定する方法のシステム開発備忘録でした。

修正2020/06/12

以前載せていたコードが上手く動作しないことを発見しました。
原因は古いjQueryを参照しようとしていてGoogleapis.com から取得できない事でした。
下のバージョンがNGの読み込みです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

修正したjQueryの参照先を下に示しておきます。

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

修正前のコードを参照してjQueryが動かなかった方が居られましたら、この場を借りてお詫びいたします。申し訳ありませんでしたm(_ _)m

【CSS】background-colorとbackgroundの違い

ふと、CSSのbackground-colorとbackgroundの違いって何だろう?って思いました。

いつもは背景色を指定する場合は、

<style>
  #TableA{
    background-color: #FF8888;
  }
</style>

のようにbackground-colorを使用しています。

しかし度々、以下のように書かれたものも見ます。

<style>
  #TableA{
    background: #FF8888;
  }
</style>

どちらも同じ結果になるとは言え、どう違うんだろうと思っていました。
もともと見た目のデザインに興味が無かったことが、今まではっきり知らなかった原因なのですが。。。

background-colorとbackgroundの違いを言うと、個別に設定するか、まとめて設定するかの違いでした。

背景の指定には次の指定ができます。

背景色を指定する background: ***;
背景の画像を指定する background-image: url(***);
背景画像の並び方を指定する background-repeat: ***;
背景画像の表示位置を指定する background-position: ***;
背景画像のスクロールについて指定する background-attachment: ***;
個別に指定する際は、上述のプロパティを使います。

逆に一括で指定したい場合は、backgroundプロパティを使います。
backgroundは、背景色や背景画像(並び方、スクロール、位置)を一括で指定するプロパティです。
このbackgroundプロパティを要素に対して設定すると、文書全体の背景をひとまとめに指定することができます。
具体的には、要素ID:TableAに対し、背景色(白)/背景画像(***.gif)/並び方(垂直方向)/表示位置(右上)/固定表示(固定する)

#TableA{
 background: #ffffff url(***.gif) repeat-y right top fixed;
}

このように一括して設定できます。

注意点としては、backgroundプロパティに指定していないプロパティは、デフォルトで設定されます。
例えば、

#TableA{
  background-image: url(***);
  background: #ffffff repeat-y right top fixed;
}

としてしまった場合、背景画像(***.gif)は指定されなかったとみなされます。
要は真っ白背景が表示されるだけです。

ちょっと気になったので、システム備忘録として載せておきます。