tableタグで作った表がうまく表示されないときの原因と対処法

tableタグで作った表がうまく表示されないとき

HTMLでtableタグやtrタグを使って表をつくっていると、うまく表示されないことがあります。

例えば、下記のような表示になることがあります。

テキスト テキスト テキスト
テキスト テキスト テキスト

表を作ったはずなのになぜかテキストだけが表示されています。
こういう場合もあります。

テキスト	テキスト	テキスト	テキスト	テキスト	テキスト

2列の表にするつもりが1列で表示されてしまっています。

上手く表示されない場合（tableタグがない場合）

tableタグを書いていない場合や、記述の一部分が正しくない場合、
下記のようになります。
表とはならずにテキストが3つずつ並びます。trタグで囲んである部分は同じ列となります。

（表示例）
テキスト1 テキスト2 テキスト3
テキスト4 テキスト5 テキスト6
テキスト7 テキスト8 テキスト9

上手く表示されない場合（trタグがない場合）

trタグがない場合は表にはなりますが、列が分かれないので一列に表示されてしまいます。

（表示例）

テキスト1	テキスト2	テキスト3	テキスト4	テキスト5	テキスト6	テキスト7	テキスト8	テキスト9

tableタグとtrタグがある場合（ない場合との比較）

今回はテキストtableタグとtrタグを書き、を3行ごとにtrタグで囲っています。こうすることで3×3の表にすることができます。

（表示例）

テキスト1	テキスト2	テキスト3
テキスト4	テキスト5	テキスト6
テキスト7	テキスト8	テキスト9

まとめ

・HTMLで表を作っているとうまく表にならないことがある
・tableタグやtrタグがない場合などが原因のこともある

関連記事
www.hibinokoto01.com
www.hibinokoto01.com

tableタグを使った表の行や列の増やし方

tableタグを使った表の行や列の増やし方について

tableタグを使って作成した表の行や列の増やし方です。

（例）

<table>
<tr>
 <th>見出しテキスト</th>
 <th>見出しテキスト</th>
 <th>見出しテキスト</th>
 </tr>
 <tr>
 <td>通常テキスト1行目</td>
 <td>通常テキスト1行目</td>
 <td>通常テキスト1行目</td>
 </tr>
 <tr>
 <td>通常テキスト2行目</td>
 <td>通常テキスト2行目</td>
 <td>通常テキスト2行目</td>
 </tr>
 </table>

（表示例）

見出しテキスト1	見出しテキスト2	見出しテキスト3
通常テキスト1行目1	通常テキスト1行目2	通常テキスト1行目3
通常テキスト2行目1	通常テキスト2行目2	通常テキスト2行目3

行を増やす場合

<tr>
 <th>テキスト1</th>
 <th>テキスト2</th>
 <th>テキスト3</th>
 <th>ここを増やしていく</th>
</tr>

行を増やした表示例

テキスト1	テキスト2	テキスト3	増やした部分
テキスト4	テキスト5	テキスト6	増やした部分
テキスト7	テキスト8	テキスト9	増やした部分

列を増やす場合

trタグの終わりとtableタグの終わりの間に書きます。

 <tr>
 <td>増やす部分</td>
 <td>増やす部分</td>
 <td>増やす部分</td>
 </tr>

列を増やした表示例

テキスト1	テキスト2	テキスト3
テキスト4	テキスト5	テキスト6
テキスト7	テキスト8	テキスト9
増やした部分	増やした部分	増やした部分

まとめ

tableタグを使った表の行や列の増やし方について書きました。

関連記事
www.hibinokoto01.com

tdタグthタグtrタグの違い

tdタグthタグtrタグの違いについて

それぞれのタグの意味についてや違いについて書いてみました。

tdタグとは

・セルを意味するタグの1つ
・このタグの間にテキストを書く
・書かれた内容は通常の文となり左揃いとなる。

（例）数字を書く場合

<td>300</td>

thタグとは

・セルを意味するタグの1つ
・このタグの間にテキストを書く
・書かれた内容は見出しとなり太字で中央揃いとなる。

（例）「個数」という見出しにする場合

<th>個数</th>

tdタグとthタグの違い

タグの間に書かれた内容が、「通常の文で左揃い」か「見出しで太字となり中央揃い」かという部分が違う。
（tdが通常の文、thが見出し）

（例）tdタグとthタグを組み合わせた書き方

<th>個数</th>
<td>300</td>

trタグについて

・trタグは列を表す
・このタグの間に書かれたものが同じ列となる。

（例）商品名や個数を同じ列にする場合

<tr>
<th>商品名</th>
<th>個数</th>
<th>価格</th>
</tr>

それぞれのタグを使って表にした例

商品名や個数、価格などの表の例

<table>
<tr>
 <th>商品名</th>
 <th>個数</th>
 <th>価格</th>
 </tr>
 <tr>
 <td>パン</td>
 <td>10</td>
 <td>100円</td>
 </tr>
 <tr>
 <td>おにぎり</td>
 <td>10</td>
 <td>100円</td>
 </tr>
 <tr>
 <td>水</td>
 <td>10</td>
 <td>100円</td>
 </tr>
 </table>

表示例

商品名	個数	価格
パン	10	100円
おにぎり	10	100円
水	10	100円

まとめ

・tdタグとthタグは通常の文と見出しという違いがある
・trタグで囲うと同じ列となる
・表にするときはtableタグで囲う

鍋といえば思い浮かぶ鍋

お題「鍋といえば」

鍋といえば

鍋と言えば、
・辛い系の鍋
・寄せ鍋
・牛肉のしゃぶしゃぶ
などが思い浮かびました。

それと、最近気になった鍋がいくつかあるので、
鍋について少し書いてみました。

人気らしい鍋

ランキングサイトなどを見てみると、
・辛い系の鍋
・すき焼き
・もつ鍋
・しゃぶしゃぶ
などが人気のようでした。
しゃぶしゃぶでも牛肉やかにしゃぶは聞いたことがありましたが、
ふぐ鍋や鯛しゃぶなどもあるようでした。

聞いたことがなかった鍋

鍋について調べていたら、聞いたことがない鍋も
たくさんありました。

・トマト鍋
・チーズ豆乳鍋
・ハッシュドビーフ鍋
・ピザ鍋
・カレー鍋
など。
（スープも売っているようでした。）

テレビで見ておいしそうだと思った鍋

テレビで「鯛しゃぶ」や「ふぐ鍋」を見ましたが、
おいしそうでした。
魚系の鍋もいいなと思いました(´ρ`)

まとめ

・辛い系の鍋やしゃぶしゃぶ系の鍋が人気らしい
・カレー鍋などもあるらしい
・聞いたことがない鍋が多かった
・牛肉以外のしゃぶしゃぶもあるらしい

【父の日/母の日/ギフトに】【送料無料】＜桜鯛しゃぶしゃぶ鍋約3〜4人前＞自家製ポン酢付き（タイ・たい）【冷凍・冷蔵便同梱可】【楽ギフ_のし】【ギフト・贈り物に】【10P03Dec16】

左揃え、右揃え、中央揃えにする方法

左揃え、右揃え、中央揃えにする方法

HTMLを書いていて、テキストなどを「左揃え、右揃え、中央揃え」にしたい
というときがありますが、その方法について書いてみました。

テキストなどの位置を変えるには

align属性を使用する。

（例）左揃えにする場合

<div align="left">左揃え</div>

左揃え、右揃え、中央揃えにする場合

<div align="left">左揃え</div>
<div align="right">右揃え</div> 
<div align="center">中央揃え</div>

セル内のテキストを揃える場合

<td align="">　～　</td>

を使用する。

セル内のテキストを左揃え、右揃え、中央揃えにする場合

<td align="left">左揃え</td>
<td align="right">右揃え</td> 
<td align="center">中央揃え</td>

まとめ

今回書いたこと
・テキストを左揃えなどにするにはalign属性を使用する
・テキストなどを左揃え、右揃え、中央揃えにする方法
・セル内のテキストを左揃え、右揃え、中央揃えにする方法

読まれている記事
www.hibinokoto01.com
www.hibinokoto01.com

見出しデザインの変更方法

見出しのデザインの変更方法

はてなブログの見出しのデザインの変更方法や、
前に使っていた見出しデザインについて書いてみました。

見出しのデザインを変更するには

↓のような記述を行うことで見出しのデザインの変更をすることができる。
（はてなブログの場合、デザインCSSに記載する）

.entry-content 「h3などを書く部分」←どの見出しタグのデザインを変更するか
color: #「色の指定をする部分」←文字の色を指定
font-size:150% ←文字の大きさを指定
font-weight:bold ←太字にする
line-height: 1.5em ←行間
margin: 50px 0 10px 0 ←上下の余白
padding:10px 10px 10px 10px ←テキストとボーダーの間の余白
background:#009250　←背景の色

左や下に線をつけるデザインの場合

見出しの左や下側に線をつけるデザイン場合、↓のような記述を行う。

border-left: 8px solid #「色を指定」 ←左線をつける
border-bottom: 1px solid #「色を指定」 ←下線をつける

実際に使っていた見出しデザイン

h3:フォントなどを変えた白色の文字に背景が緑色系の見出し
h4:左と下に緑色系の線が入った見出し
h5:フォントや上下の余白などを変えた太字の見出し

h3で使っていた見出しのデザイン

.entry-content h3{ color: #ffffff;
font-size:130%;
font-weight:bold;
line-height: 1.5em;  
margin: 50px 0 10px 0;  
padding:10px 10px 10px 10px;  
background:#009250; } 

h4で使っていた見出しのデザイン

.entry-content h4 { padding: 4px 10px; color: #444444; 
background-color: #f3f3f3;
border-left: 8px solid #009250;
border-bottom: 1px solid #009250; } 

h5で使っていた見出しのデザイン

.entry-content h5{ color: #141414; 
font-size:125%; 
font-weight:bold; 
line-height: 1.5em; 
border-bottom:1px solid 009250;
margin: 50px 0 10px 0;
padding:10px 10px 1px 10px; }

まとめ

今回書いたこと
・はてなブログなどの見出しのデザインの変更方法について
・左線と下線のある見出しデザインについて
・前に使っていた見出しデザインについて

読まれている記事
www.hibinokoto01.com
www.hibinokoto01.com

[rakuten:rakutenkobo-ebooks:13436580:detail]

マーカーを引いたようなデザインにする方法

マーカーを引いたようなデザインにする方法について

はてなブログでもよく見かける、マーカーのようなデザインにする方法について書いてみました。

マーカーデザイン

マーカーを引いたような装飾にするには

マーカーのデザインにするには、「linear-gradient」
を使います。

（使用例）

b { background: linear-gradient(transparent 50%, #「色を指定する部分」 50%); }

b:bタグで囲われた部分にマーカーが表示されます。

linear-gradien:マーカーのようなデザインにする記述。

transparent:透明の意味。

#「色を指定する部分」:ここに色の指定をします。（黄色の場合「#FFFF00」など）

transparent 50%, #色を指定する部分 50%):
「50%」としているので、だいたい下半分にマーカー線を引いた感じのデザインになります。

書く場所について

デザインCSSの部分に書いておくと、記事内でタグで囲った部分にマーカーが反映されます。

色を変える方法

「#色を指定する部分」を変更することで、マーカーの色を変えることができます。
（例）
黄色：#FFFF00
緑色：#00FF00

太さを変える方法

上では50%ずつにしていますが、ここの数字を変えることで、線の太さを変えることができます。
（太線、細線にするなど）

ｂタグ以外で使う方法

bタグの太字は太字で使っていたので、storongタグを使っていました。
実際に前まで使っていたマーカーを書いてみました。

黄色い線にする方法

strong { background: linear-gradient(transparent 40%, #FFFF00 60%); }

こうすることで黄色い線のマーカーになります。

緑色の線にする方法

strong { background: linear-gradient(transparent 40%, #00FF00 60%); }

こうすることで緑色の線のマーカーになります。

まとめ

今回書いたこと
・マーカーの引き方
・マーカーの色や太さの変え方
・実際に使っていたマーカー

読まれている記事
www.hibinokoto01.com
www.hibinokoto01.com

HTML5＆CSS3デザインブック [ エ・ビスコム・テック・ラボ ]

CSSがうまく反映されないときの原因と対処法

CSSがうまく反映されないときの原因と対処法

CSSがうまく反映されないときの原因や対処法について
書いていこうと思います。

記述のミス

例えば、

・見出しのデザインを変更しようとしていて、「h3」と記述するところを
「h4」と記述している。

・「;」や「}」などの記述が抜けている。

・「；」と「：」を間違えて記述している。

書く場所の間違い

例えば、

・はてなブログで、デザインCSS以外の場所に記述しているなど。

CSSの優先順位の関係でうまく反映されない

例えば、

色を赤色に指定しようとしていて、赤色にする記述の後に
青色にする記述が書かれている。

（例）
・赤色にする記述
・青色にする記述　→青色が反映される。

p {  
 color:red;←赤色にする記述  
}  
p {  
 color:blue;←青色にする記述（こちらが反映される）
 } 

その他には、

id属性やclass属性、「!important」が他の部分に
ついていることにより、そちらが優先されている。
（id属性やclass属性がついているものの方が優先される。
「!important」は最優先）

（「!important」の書き方の例）
p {color:red !important;}

記述は正しいのに古いキャッシュを読み込んでいて反映されない

例えば、
見出しの色を黒から赤に変えても黒のままなど。

CSSがうまく反映されないときの対処法

・数字や似た記号、スペースなどに気をつける
・CSSを書く場所を見直す
・CSSの優先順位に気をつける
・古いキャッシュを削除したり、最新のキャッシュを読み込んでみる

まとめ

今回書いたこと
・今までにあったり、よく聞くCSSがうまく反映されない原因
・CSSがうまく反映されないときの対処法

関連記事
www.hibinokoto01.com
www.hibinokoto01.com

現場で役立つCSS3デザインパーツライブラリ【電子書籍】[ 太田 智彬 ]

rel="nofollow"についてと使い方

rel="nofollow"についてと使い方

rel="nofollow"とは何かについてや、
その使い方について書いていこうと思います。

rel="nofollow"とは

nofollowとはaタグなどの属性の1つです。
属性をnofollowにすると検索エンジンがリンク先ページに遷移
しないようになります。
nofollowは下記のような使い方をします。

<a href=”http://サイトURL” rel=”nofollow”>リンク先ページ</a>

rel="nofollow"を使うとどうなるか

検索エンジンがリンク先ページに遷移しなくなります。
サイトを利用している人がリンクをクリックした場合は、
nofollowを使っていないときと同様にリンク先に飛ぶことができます。

rel="nofollow"を使うときの一例

・リンク先を検索エンジンにたどらせたくないとき。
・プライバシーポリシーページなどでの外部リンクなど、
検索エンジンにたどらせる必要がないとき。

rel="nofollow"の使用例

プライバシーポリシーページなどで「こちら」をクリックすると、
グーグルのページに遷移する場合の書き方。

<a href="https://グーグルのURL" rel="nofollow">こちら</a>

リンクを別タブで開かせたい場合

<a href="https://グーグルのURL" rel="nofollow" target="_blank">こちら</a>

※「 target="_blank"」を使うとリンクを別タブで開かせることができます。
（target="_blank"の前には半角スペースが入っています。）

まとめ

・rel="nofollow"をつけると検索エンジンがリンク先をたどらなくなる。
・rel="nofollow"をつけてもサイトを使う人にとっては変わらない。
・リンク先を検索エンジンにたどらせる必要がない時などに使える。

すぐできる！Google徹底活用ガイド三才ムック vol.876【電子書籍】[ 三才ブックス ]

身近なIoT製品

身近なIoT製品

IoTという言葉を最近よく耳にしますが、
IoTとはいったい何かや、どのようなIoT製品があるかなどについて書いてみました。

IoTとは？

IoTはInternet of Thingsの略です。モノのインターネットと言われており、
モノをインターネットに接続することをIoTと言います。
（例えば、家電をインターネットに接続するなど）

どのようなIoT製品があるか

例えば下記のようなIoT製品があります。

エアコン、冷蔵庫、お掃除ロボット、照明、
植物の状態を教えてくれるセンサーなど…。

例えば、エアコンや照明では、

・インターネットとつながったエアコン
エアコンがつけっぱなしかどうかを教えてくれたり、
帰宅前にスマートフォンで操作を行い、部屋を涼しくしておくことができます。

・スマホでコントロールできる照明
部屋の明るさや色を変えることができます。

まとめ

・IoTとはモノとインターネットを接続することをいう。
・IoT製品にはエアコンや照明などの家電製品がある。
・IoTは今後もさらに進化することが予想されている。
・夏、部屋に入るとすごく暑くなっていることがありますが、
IoTのエアコンはそういったことも軽減してくれそうです。

SR-01M-W【税込】 シャープ モバイル型ロボット電話 「RoBoHoN（ロボホン）」 [SR01MW]【返品種別B】【送料無料】【RCP】

冬の寒さ対策

今週のお題「冬の寒さ対策」

手軽にできる寒さ対策や、
よくしている寒さ対策について書いてみました。

出かけるときはマフラーをつける

出かけるときはマフラーをしています。
マフラーをつけていると温かい空気が外に逃げて行かないので、
マフラーを付けていないときよりもかなり温かく過ごせる気がします。
（体感温度が3度くらい高くなる？と聞いたこともあります。）

温かい食べ物を食べる

温かくて辛い食べ物を食べています。
よく辛いカップラーメン食べていますが、
温かいというよりはむしろ暑くなります！(;´▽｀A``

ただ、お昼に辛い物を食べて体温を上げると、午後に眠くなりやすく
なるらしいですね(;^_^A
（体温が下がるときに眠くなるらしいですね）

温かい飲み物を飲む

パックや瓶入り？の紅茶やコーヒーなどの温かい飲み物を
よく飲んでいました。
部屋が寒いと中身が冷えるのも早いですが、
そういうときには断熱性の高いコップを使うことで
保温しておくのも手かなと思っています。

まとめ

・割と手軽にできるかもしれない寒さ対策について書いてみました。
・出かけるときにはマフラーをつけて、温かいものを食べたり、
温かい飲み物を飲んだりすることも寒さ対策かなと思いました。

関連記事
www.hibinokoto01.com

マグカップ　カフェマグ　真空断熱構造　ステンレス製　330ml　フタ付き （ 保温 保冷 ステンレスマグカップ カップ コップ 食器 マグコップ 蓋付き ふた付き ） 【5000円以上送料無料】

組み合わせ自由な福袋 (各500g）/珈琲豆　コーヒー

for文とwhile文の違いと拡張for文

for文とwhile文の違い

for文とwhile文の違いと拡張for文について書いてみました。

for文

指定した回数だけ処理を繰り返す場合に使用される。

while文

条件が満たされている間、何回でも繰り返す場合に使用される。

for文とwhile文の使用例

0から順番に数字を出力していき、10になったら条件の外に出る場合

・for文

for(int i=0; i<10; i++) {

  System.out.println(i);

 }


・while文

int i = 0;

 while(i<10) {

  System.out.println(i);

  i++;

 }

for文と拡張for文での書き方の違い

int型の配列に数字を5つ格納し、for文で表示する場合

・for文の場合
int[] num = {1,2,3,4,5};

for(int i = 0; i<array.length; i++){  
       System.out.println(array[i]);
     }

・拡張for文の場合

int[] num = {1,2,3,4,5};

for (int array : num) {   
       System.out.println(array);
     }

まとめ

・for文とwhile文の違いとfor文と拡張for文での書き方の違いについて
書いてみました。
・for文に比べて拡張for文の方がすっきりしている印象があります。

読まれている記事
www.hibinokoto01.com
www.hibinokoto01.com
www.hibinokoto01.com

オラクル認定資格教科書 Javaプログラマ Silver SE 8【電子書籍】[ 有限会社ナレッジデザイン山本道子 ]

Javaのよくある例外の原因と対処法

Javaのよくある例外の原因と対処法について

Javaでよくある例外の原因と対処法について書いてみました。

NullPointerException

値がnullである参照変数に対して、メソッドを呼び出したとき等に発生する例外

NullPointerExceptionが起こる原因

値が何も入っていないnullのところから、何かを取り出そうとしたりするときなどに
発生する。

NullPointerExceptionの対処法

・null状態の場合の処理をif文などを使って書いておく。

SQLException

データベースアクセスエラーまたはその他のエラーに関する情報を提供する例外

SQLExceptionが起こる原因

SQLの文章が間違っていたりするとよく発生したりします。
空白が入っているかどうかでもよく発生している気がします。

SQLExceptionの対処法

・データベースにSQL文を貼り付けてみて確認する。
・空白や文字の間違いに気をつけてチェックする。

ArrayIndexOutOfBoundsException

不正なインデックスを使って配列がアクセスされたときに発生する例外

ArrayIndexOutOfBoundsExceptionが起こる原因

配列が5つまでしかないのに、6つ目にアクセスしようとしたりすると
発生したりします。

ArrayIndexOutOfBoundsExceptionの対処法

・配列を増やしてもいいなら、増やしておく。
・配列がある範囲内にアクセスするように記述を変える。

その他の例外の一例

FileNotFoundException

存在しないファイルにアクセスしようとして失敗したときに発生する例外

NumberFormatException

文字列を数値型に変換しようとしたとき、文字列の形式が正しくない場合に発生する例外

OutOfMemoryError

メモリ領域が不足している場合に発生する例外

StackOverflowError

アプリケーションでの再帰の回数が多すぎてスタックオーバーフローが起こる場合に発生する例外

まとめ

今回書いたこと
・Javaのよくある例外の原因と対処法について。
・Javaの例外の一例について。

読まれている記事
www.hibinokoto01.com
www.hibinokoto01.com

JavaプログラマSilver　SE　8 [ 山本道子（プログラミング） ]

Linuxのディレクトリ作成コマンドと削除コマンド

Linuxのディレクトリ作成コマンドと削除コマンド

Linuxのディレクトリ作成コマンド「mkdir」と
ディレクトリ削除コマンド「rmdir」について書いてみました。

新しいディレクトリの作成「mkdir」

mkdir
新しいディレクトリを作成する

（使い方）
$ mkdir ディレクトリ名

・sample01ディレクトリを作成する場合

$ mkdir sample01

sample01ディレクトリを作成することができる。

ディレクトリの削除「rmdir」

rmdir
ディレクトリを削除する

（使い方）
$ rmdir ディレクトリ名

・sample01ディレクトリを削除する場合

$ rmdir sample01

sample01ディレクトリを削除することができる。

まとめ

・新しいディレクトリの作成は「mkdir」コマンドでできる。
・ディレクトリを削除は「rmdir」コマンドでできる。

読まれている記事
www.hibinokoto01.com
www.hibinokoto01.com

まんがでわかるLinuxシス管系女子　コマンド＆シェルスクリプト入門／日経Linux／Piro【2500円以上送料無料】