html学習 – スグブログ https://sugublog.org ブログ運営について発信中 Sun, 26 Nov 2023 16:56:26 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 https://sugublog.org/wp-content/uploads/2021/07/icon_20210703-min-150x150.png html学習 – スグブログ https://sugublog.org 32 32 【html】横棒、区切り線を書く方法！簡単に本文を分けたい時に便利 https://sugublog.org/%e3%80%90html%e3%80%91%e6%a8%aa%e6%a3%92%e3%80%81%e5%8c%ba%e5%88%87%e3%82%8a%e7%b7%9a%e3%82%92%e6%9b%b8%e3%81%8f%e6%96%b9%e6%b3%95/ https://sugublog.org/%e3%80%90html%e3%80%91%e6%a8%aa%e6%a3%92%e3%80%81%e5%8c%ba%e5%88%87%e3%82%8a%e7%b7%9a%e3%82%92%e6%9b%b8%e3%81%8f%e6%96%b9%e6%b3%95/?noamp=mobile#comments Wed, 27 Jan 2021 16:01:00 +0000 https://sugublog.org/?p=813

Webサイト作成していて、ちょっと横線を引いて区切りたい。CSSとかではなく気軽に横線を引きたいと思ったそこのあなた！あります。試してみて下さい！ htmlで横に区切り線を書く方法 htmlに横線をひくことができたら簡単 […]]]>

Webサイト作成していて、ちょっと横線を引いて区切りたい。CSSとかではなく気軽に横線を引きたいと思ったそこのあなた！あります。試してみて下さい！

htmlで横線を引きたい犬

ホームページ作成などで簡単に横線を引いて区切りたい！簡単に行いたい！

windowsのプロンプトで使用できるbatやpythonやphpを使用して、業務効率化やWebサイトを作成しております。javaやシェルスクリプトなど、様々なプログラミングを行った実績ありの筆者です。

htmlで横に区切り線を書く方法

htmlに横線をひくことができたら簡単に本文を分ける事が出来ます。

やり方としてはhtmlに<hr>を記入するだけです。

htmlにこれを入れるだけで横線がかけます。

horizon「地平線の意味ですね」簡単なhtmlに書いてみましょう。

<!DOCTYPE html>
<html>
  <head>
    <title>hr横線</title>
    <link rel="stylesheet" href="css/hr.css" type="text/css">
    <meta charset="utf-8" />
　</head>
  <body>
    <container>
      <header>
        ヘッダー
      </header>
      <main>
        <br>
        <h1>見出し</h1> 
        <p>段落1</p>
        <br>
        <br>
        <p>段落2</p>
        <br>
        <br>
      </main>
    <footer>
      フッター
    </footer>
  </container>
  </body>
</html>

段落1と段落2の間に線を引いてみましょう。htmlとしては「<p>段落1</p>」の下の<br>を<hr>に変更します。

変更したHTMLのコードは以下になります。

<!DOCTYPE html>
<html>
  <head>
    <title>hr横線</title>
    <link rel="stylesheet" href="css/hr.css" type="text/css">
    <meta charset="utf-8" />
　</head>
  <body>
    <container>
      <header>
        ヘッダー
      </header>
      <main>
        <br>
        <h1>見出し</h1> 
        <p>段落1</p>
        <hr>
        <br>
        <p>段落2</p>
        <br>
        <br>
      </main>
    <footer>
      フッター
    </footer>
  </container>
  </body>
</html>

一つの「br」を「hr」に変えました。

変更をみてみます。

html変更前Webページ表示

変更前のWebページです。

html変更前Webページ表示

html変更後Webページ表示

変更後のWebページです。

html変更後Webページ表示

横線が引けたと思います。htmlで気軽に横線引けますね。

まとめ

Webページに簡単に横線をいれるにはhtmlに<hr>を入れるだけで本文を区切る事が出来ました。

簡単なのでお試しください。

機嫌のいいワンコ

すごく簡単に横棒が引けてWebページに区切り線が引けました！

]]> https://sugublog.org/%e3%80%90html%e3%80%91%e6%a8%aa%e6%a3%92%e3%80%81%e5%8c%ba%e5%88%87%e3%82%8a%e7%b7%9a%e3%82%92%e6%9b%b8%e3%81%8f%e6%96%b9%e6%b3%95/feed/ 1 【html・CSS】tableタグ雛形～1からtable作成が面倒な方へ https://sugublog.org/html-css-table-hinagata/ https://sugublog.org/html-css-table-hinagata/?noamp=mobile#comments Tue, 26 Jan 2021 16:01:00 +0000 https://sugublog.org/?p=771

Webサイトやブログで1からテーブルを作成するのが面倒臭いと思っているあなた！簡単な雛形があれば、それをコピペして使えれば一番いいですよね。また少し編集すれば自分好みのテーブルが作成できればもっといいですよね。と私自身も […]]]>

Webサイトやブログで1からテーブルを作成するのが面倒臭いと思っているあなた！簡単な雛形があれば、それをコピペして使えれば一番いいですよね。また少し編集すれば自分好みのテーブルが作成できればもっといいですよね。と私自身も思っていたので作成して見ました。よければ使用して見て下さい。

最終的にこのようなテーブルを作成します。では行ってみましょう！

デフォルトのhtmlとCSS

htmlファイルと同じ階層に「css」フォルダを作成し、その中に「test.css」ファイルをいれて下さい。

table_default.htmlファイル

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>title_name</title>
  <link rel="stylesheet" href="css/test.css" type="text/css">
 </head>
  <body>
	<table border="1">
    	<tr>
    		<th>行タイトル１</th>
			<th>行タイトル２</th>
			<th>行タイトル３</th>
    	</tr>
       	<tr>
    		<td>行１列１</td>
			<td>行１列２</td>
			<td>行１列３</td>
		</tr>
		<tr>
    		<td>行２列１</td>
			<td>行２列２</td>
			<td>行２列３</td>
    	</tr>
	</table>
 </body>
</html>

test.cssファイル

table{
    border-collapse:collapse;
    background-color:white;
    width:400px;
    margin:auto;
}
tr{
    text-align: center;
}

Webブラウザで「table_default.html」を表示して見ます。

デフォルトのtableが出来ました。

行を追加したい

行を追加したければ赤枠の部分を下に追加して、「td」の部分を編集するだけです。ちなみに使用しているエディタはMicrosoftのVisual Studio Codeです。使用しやすいです。使用してみたいあなたはこちらからどうぞ。

行が追加されました。

行タイトルに色を付けてみましょう。

これだけでは味気ないのでタイトルに色を付けたりして装飾してみましょう。ここはスタイルなので「test.css」の中身を変更するだけでOKです。

test.cssファイル

table{
    border-collapse:collapse;
    background-color:white;
    width:400px;
    margin:auto;
}
tr{
    text-align: center;
}

th{
    background-color: rgba(14, 71, 226, 0.87);
    color:white;
    border-color:white;
    border-bottom:double black;
}

赤枠の部分を追加しました。

background-color: rgba(14, 71, 226, 0.87);

背景の色を青っぽく変えてみました。「rgba」の後の数字を変えてみて自分好みの色に変えてみてください。

color:white;

背景を濃い色にしたので文字を白にしています。「white」の部分を変更して文字の色を変えてみてください。

border-color:white;

ボーダーの色を文字に合わせて白にしてみました。「white」の部分を変更して文字の色を変えてみてください。

border-bottom:double black;

タイトルの下を二重線にしてみました。１つ手前の手順でボーダーの色を白にしてしまったので「boder-bottom」で下のボーダーを黒色にしました。これでタイトルの装飾は終わりにしておきます。

他にも色々と試してみて下さい。不要だなと思うところはcssから消せば良いだけです。下の二重線なんて要らないよってあなたは「border-bottom:double black;」を消せば良いだけです。

テーブルの中の文字の圧迫を緩和する

テーブルと文字の間の余白が少なく圧迫感があるので、 テーブルと文字の間の余白をとってあげましょう。ここでも見た目なのでcssファイルを変更するだけです。

test.cssファイル

table{
    border-collapse:collapse;
    background-color:white;
    width:400px;
    margin:auto;
}
tr{
    text-align: center;
    
}

th{
    background-color: rgba(14, 71, 226, 0.87);
    color:white;
    border-color:white;
    border-bottom:double black;
    padding:5px 20px 5px 20px;
}
td{
    padding:5px 20px 5px 20px;
}

「th」と「td」に「padding」を設定します。padding-topなど四方向設定してもよいですが、paddingだけで四方向指定できます。 順番ですが上、右、下、左の順番で指定していきます。この場合だと上の余白:5px、 右の余白:20px、下の余白:5px、左の余白:20px。上と下、左と右は同じ余白をとる事が多いですので「padding:5px 20px;」と省略も出来ます。この場合、上下:5px、左右:20pxで編集しやすいですね。編集しやすくするか、細かく設定したいかで決めて下さい。これで一度見てみます。

余白は余裕が出て良くなりましたが、タイトルは余白をとりすぎて２行になり、縦長になってしまいました。余白調節してもいいですが、 統一感を持たせる為にも数値はそのままで全体の大きさを設定しましょう。初めから「400px」にしていましたが「500px」に変更してみましょう。

横タイトルの最終CSSファイルです。htmlファイルは最初に貼ったものです。

test.cssファイル

table{
    border-collapse:collapse;
    background-color:white;
    width:500px;
    margin:auto;
}
tr{
    text-align: center; 
}

th{
    background-color: rgba(14, 71, 226, 0.87);
    color:white;
    border-color:white;
    border-bottom:double black;
    padding:5px 20px;
}
td{
    padding:5px 20px;
}

tableの「width」の値を「500px」に変更して見ました！見てみましょう。どうでしょうか？？

丁度よくなりました。これで基本的なテーブルは出来たかと思います。

列タイトルを入れてみる！

ちょっと縦のタイトルも入れたくなったのでおまけでやってみましょう。

table_default.html

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>title_name</title>
  <link rel="stylesheet" href="css/test.css" type="text/css">
 </head>
  <body>
	<table border="1">
    	<tr>
			<th></th>
			<th>行タイトル１</th>
			<th>行タイトル２</th>
			<th>行タイトル３</th>
    	</tr>
       	<tr>
			<th>列タイトル１</th>
			<td>行１列１</td>
			<td>行１列２</td>
			<td>行１列３</td>
		</tr>
		<tr>
			<th>列タイトル１</th>
			<td>行２列１</td>
			<td>行２列２</td>
			<td>行２列３</td>
		</tr>
		<tr>
			<th>列タイトル１</th>
			<td>行３列１</td>
			<td>行３列２</td>
			<td>行３列３</td>
    	</tr>
	</table>
 </body>
</html>

「tr」の中に「th」を入れてみましょう。最初の「th」はタグだけ入れます。どうなったか見てみましょう。

げげっ「th」タグのcssが列にも反映されています。列のタイトルだけ別のcssを適応させたいですね。 ここでは「class」を使用して１．列だけ別のcssを適応させます。

<th class="col_title">列タイトル１</th>

また幅が足りなくなりまた２行になっているので幅を伸ばします。

width:600px;

またタイトルの文字は自動で太くなっており図太いので細くします。

font-weight: lighter;

縦横タイトルありの最終htmlファイルとCSSファイルです。

table_default.htmlファイル

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>title_name</title>
  <link rel="stylesheet" href="css/test.css" type="text/css">
 </head>
  <body>
	<table border="1">
    	<tr>
			<th></th>
			<th>行タイトル１</th>
			<th>行タイトル２</th>
			<th>行タイトル３</th>
    	</tr>
       	<tr>
			<th class="col_title">列タイトル１</th>
			<td>行１列１</td>
			<td>行１列２</td>
			<td>行１列３</td>
		</tr>
		<tr>
			<th class="col_title">列タイトル２</th>
			<td>行２列１</td>
			<td>行２列２</td>
			<td>行２列３</td>
		</tr>
		<tr>
			<th class="col_title">列タイトル３</th>
			<td>行３列１</td>
			<td>行３列２</td>
			<td>行３列３</td>
    	</tr>
	</table>
 </body>
</html>

htmlファイルの「tr」の中に入れた「th」のすべてに「class=”col_title”」と入力してみましょう。

test.cssファイル

table{
    border-collapse:collapse;
    background-color:white;
    width:600px;
    margin:auto;
}
tr{
    text-align: center; 
}

th{
    background-color: rgba(14, 71, 226, 0.87);
    color:white;
    border-color:white;
    border-bottom:double black;
    padding:5px 20px;
    font-weight: lighter;
}
td{
    padding:5px 20px;
}
.col_title{
    background-color: rgba(212, 220, 241, 0.87);
    color:black;
    border-color:gray;
    border-bottom:gray;
}

cssファイルの「th」に「font-weight:lighter;」を入力して文字を細くしてみます。

cssファイルにclassの「col_title」を作成しています。 classを指定する時は初めに「.」を付けます。これでclassの意味になります。「th」の時と同じ様に背景の色やボーダーの色、下線を変更しています。見てみましょう。

列タイトルもまあいい感じにできました。これをデフォルトとして細かく変更するのもよし、このまま使用するのもよし！という事で使用していこうと思います。あなたも良かったら使用して見て下さいね。

関連記事

]]> https://sugublog.org/html-css-table-hinagata/feed/ 1 【html】改行タグを使用する【注意点もあり】 https://sugublog.org/%e3%80%90html%e3%80%91%e6%94%b9%e8%a1%8c%e3%82%bf%e3%82%b0%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%99%e3%82%8b%e3%80%90%e6%b3%a8%e6%84%8f%e7%82%b9%e3%82%82%e3%81%82%e3%82%8a%e3%80%91/ https://sugublog.org/%e3%80%90html%e3%80%91%e6%94%b9%e8%a1%8c%e3%82%bf%e3%82%b0%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%99%e3%82%8b%e3%80%90%e6%b3%a8%e6%84%8f%e7%82%b9%e3%82%82%e3%81%82%e3%82%8a%e3%80%91/?noamp=mobile#respond Thu, 21 Jan 2021 16:01:00 +0000 https://sugublog.org/?p=608

htmlで改行したい場合を忘れた方向けの記事となります。 htmlで改行タグを使用する htmlで改行したい場合は下記を使用します。 <br> 【注意点】 htmlを使用してブログ等を作成する時はあまり&lt […]]]>

htmlで改行したい場合を忘れた方向けの記事となります。

htmlで改行タグを使用する

htmlで改行したい場合は下記を使用します。

<br>

【注意点】

htmlを使用してブログ等を作成する時はあまり<br>を使用しすぎないようにしましょう。形はよく見えるかもしれませんがブログ等で改行はあまり意識しなくても大丈夫です。

理由は画面の幅が見る人によって変わってくるからです。昔はブログやホームページはPCでしか閲覧されず、気にするのはブラウザの種類ぐらいでしたが、現代ではスマホ等の小さい画面で見る事がほとんどで、見る端末によってはより崩れるからです。

段落を<p>タグで調整する事の方を重要視してください。<p>タグの中では改行はほとんど必要ありません。ブラウザが勝手に見る端末の幅に合わせて改行してくれます。

htmlで改行タグを使用するまとめ

htmlで改行したい場合は<br>を使用する。

注意点は<br>タグを使用しすぎないようにする。<br>タグよりも段落を<p>タグで調整する方が大事

注意点に気を付けてWebページ作成して見て下さい。

関連記事

htmlで空白を入れるにはこの記事をご覧ください。

]]> https://sugublog.org/%e3%80%90html%e3%80%91%e6%94%b9%e8%a1%8c%e3%82%bf%e3%82%b0%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%99%e3%82%8b%e3%80%90%e6%b3%a8%e6%84%8f%e7%82%b9%e3%82%82%e3%81%82%e3%82%8a%e3%80%91/feed/ 0