html – スグブログ https://sugublog.org ブログ運営について発信中 Tue, 05 Dec 2023 12:37:41 +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 【PHP基礎】簡単なログイン画面を作成する！htmlのform使用 https://sugublog.org/php-base-login/ https://sugublog.org/php-base-login/?noamp=mobile#respond Thu, 19 Aug 2021 14:55:59 +0000 https://sugublog.org/?p=4037

PHPを使用して様々なサービスや、サイトを作成しようと思っている人も多い事でしょう。 「PHPサイト公開したけど、ユーザーを限定したい」 「ログインユーザによって別ページを表示させたい」 そういった要望もあると思います。 […]]]>

PHPを使用して様々なサービスや、サイトを作成しようと思っている人も多い事でしょう。

「PHPサイト公開したけど、ユーザーを限定したい」

「ログインユーザによって別ページを表示させたい」

そういった要望もあると思います。例えば管理者ユーザでログインすれば色々設定できるページへ、一般ユーザでログインすればそのサイトを使用するページに飛ばしたりするようなログインページです。

そこで今回は簡単にログインページを作成して見ようと思います。そしてログインするユーザで別のページを表示させる事も行いたいと思います。

簡単でコピペでも使用できますので、カスタマイズなどして使用して見て下さい。

PHPで簡単なログイン画面を作成

わたくしはローカル環境でPHPの環境を構築しています。

同じくパソコン1台のローカル環境でPHPを行いたい場合、下記の記事を参考にしてPHP検証環境を構築して見て下さい。

あわせて読みたい
【php応用】パソコン1つでphp環境を作成する！DBやCSSまで連携 php開発環境を作成したい、という事で、パソコン1つで、ローカル環境にphp環境を構築しました。 データベース連携やCSS連携もしました。 テンプレートにもなるので、コ…

今回のログインページ構成

ただのログイン画面では面白くないので、管理者とユーザーのパスワードを変えて、それぞれのページに移動する様にします。今回のログインの流れは下記となります。

  1. ログイン画面を作成して、パスワード入力する
  2. 管理者パスワードであれば、管理者ページへ。ユーザーパスワードであればユーザーページへ

今回作成するのは下記の３ページです。

ログイン成功時のページを作成

まずはログイン成功した場合のページを、簡単に作成しておきます。

ファイル名：login_success_manager.php

<html>
 <head>
  <meta charset="UTF-8">
  <title>ログイン成功</title>
  <link rel="stylesheet" href="css/test.css" type="text/css">
 </head>
 <body>
    <h1>ログイン</h1>
    <h2>管理者としてログイン成功しました</h2>
 </body>
</html>

ファイル名：login_success_users.php

<html>
 <head>
  <meta charset="UTF-8">
  <title>ログイン成功</title>
  <link rel="stylesheet" href="css/test.css" type="text/css">
 </head>
 <body>
    <h1>ログイン</h1>
    <h2>ユーザーページにログイン成功しました</h2>
 </body>
</html>

簡単なhtmlで作成しました。

ログインページ作成

ではログインページを作成します。ログインページのコードを以下に貼ります。

<?php
if($_POST["pass"] == "manager"){
  header('Location: login_success_manager.php');
exit;
}
if($_POST["pass"] == "user"){
    header('Location: login_success_users.php');
exit;
}
?>
<html>
 <head>
  <meta charset="UTF-8">
  <title>ログイン</title>
  <link rel="stylesheet" href="css/test.css" type="text/css">
 </head>
 <body>
    <h1>ログインページ</h1>
    <h2>ログイン</h2>
<form method="POST" action="">
   <label>パスワード入力してください</label></br>
      <input type="text" name="pass" value=""></br></br>
      <input type="submit" value="ログイン">
</form>
 </body>
</html>

ログインページのご説明

コードの詳細な説明をします。まず最初のphpの部分の説明になります。

<?php
if($_POST["pass"] == "manager"){
  header('Location: login_success_manager.php');
exit;
}
if($_POST["pass"] == "user"){
    header('Location: login_success_users.php');
exit;
}
?>

今回の管理者パスワードは「manager」ユーザーのパスワードは「user」にしています。

もしパスワードが「manager」であれば、先程作成した「login_success_manager.php」に移動するコードです。

もしパスワードが「user」であれば、先程作成した「login_success_users.php」に移動するコードです。

パスワードが間違っていた場合は、ログインページのhtmlが表示されるだけです。

<form method="POST" action="">
   <label>パスワード入力してください</label></br>
      <input type="text" name="pass" value=""></br></br>
      <input type="submit" value="ログイン">
</form>

formタグのメソッドは「POST」でactionが空白なので、このページにsubmit（送信）する仕組みです。

inputタグでユーザーに入力する窓を作成しています。

ユーザーが入力した文字列を、passという変数に入れます。

ログインボタンを押すと、このページにパスワードを変数passに入れて送信します。

受け取る側は「$_POST[“pass”]」で取得できますので、先程のPHPでパスワード判定をしています。

パスワードによって、管理者ページに行くか、ユーザーページにいくか、このページのままかの分岐点にしています。

ログイン画面でパスワードを入れてログインして見る

ログイン

では保存して、ログインページを表示して見ます。

ログインページ表示

管理者としてログイン

では管理者のパスワード「manager」を入力して、ログインボタンを押してみます。

管理者ログイン成功

先程作成した管理者ログインページが表示されれば成功です。

ユーザーとしてログイン

では今度はユーザーとしてログインして見ます。パスワードに「user」と入力してログインボタンを押します。

先程作成したユーザーのログインページに、移動出来ればOKです。

ログイン失敗してみる

では最後に適当な文字を入力して、ログインボタンを押してみます。

ログインページのまま、どのページにもいかなければOKです。

PHPで簡単なログイン画面を作成してみるまとめ

python
Binary code abstract background, Digital communication code.

今回はPHPとHTMLのformタグを使用して、簡単なログインページを作成しました。

管理者とユーザーでパスワードを分け、それぞれのページに移動するような仕組みにしてみました。

コピペして色々カスタマイズして、ログインページを楽しんで見て下さい。

]]> https://sugublog.org/php-base-login/feed/ 0 【ブログ】URLの最後の「/」のありとなしの違いとは？ https://sugublog.org/difference-between-last-slash-and-no-slash/ https://sugublog.org/difference-between-last-slash-and-no-slash/?noamp=mobile#respond Mon, 28 Jun 2021 10:38:10 +0000 https://sugublog.org/?p=3344

ブログのURLの最後に「/」がついているものと、ないものの違いをご存じでしょうか？ URLの最後の「/」のありとなしの違いとは？ 結論を先に言いますね。 具体例を上げますね。 https://example.com/te […]]]>

ブログのURLの最後に「/」がついているものと、ないものの違いをご存じでしょうか？

URLの最後の「/」のありとなしの違いとは？

結論を先に言いますね。

結論：

「/」がついているものは、フォルダ（ディレクトリ）を意味する

「/」がついていないものは、ファイルを意味する

具体例を上げますね。

  1. https://example.com/test/
  2. https://example.com/test/index.html
  3. https://example.com/test
  1. はtestフォルダのindex.htmlファイル※1
  2. はtestフォルダのindex.htmlファイル
  3. はtestというファイル

①と②は同じ意味になります。

※1.HTMLの仕様上、明示がなければindex.htmlファイルを表示するとなっています。

ブログなどでURLの最後の「/」のあり・なしは区別しない

しかし、ブログなどでは①と③は同じページに飛びます。

  1. https://example.com/test/　←これ
  2. https://example.com/test/index.html
  3. https://example.com/test　←これ

理由は仕様上、③は①のURLにリダイレクトされるからです。

URLを変換しているのですね。

URLの最後の「/」のありとなしの影響とは？

URLの最後の「/」のありとなしで、影響は特にないと思われます。

理由はダイレクトされるからです。最終的に「/ありのURL」で表示されます。

リダイレクトされる分、少し表示が遅くなるかもしれません。

URLの最後の「/」のありとなしでは、SEO的にはどうか？

SEO的にも特に問題する必要はないかと思います。

SEOとはSearch Engine Optimizationの略で、検索で上位表示させる為の対策です。

あわせて読みたい
【SEO対策とは】ブログに必須なSEOをわかりやすく説明します ブログ運営するにあたってSEOって大事って聞くけど結局SEOってなんなの？本当に必要なの？SEO対策したらどうなるの？ そんなこと思った事はありませんか？ ブログ書いて…

グーグルのクローラーに良くないかもしれませんが、SEO的に悪いと聞いた事がありません。

URLの最後の「/」のありとなしの違いのまとめ

「/あり」はディレクトリ、「/なし」はファイル

ブログでは「/あり」と「/なし」は同じURLになる。理由はリダイレクトされるから

最終的に「/ありのURL」になるので特に問題はない（リダイレクトされる）

SEO的にあまり影響はないが、リダイレクトされる分、「/あり」に統一した方が良い

]]> https://sugublog.org/difference-between-last-slash-and-no-slash/feed/ 0 【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とCSSを操作 https://sugublog.org/%e3%80%90%e3%83%9e%e3%83%8a%e3%83%96%e3%83%ad%e3%82%b0%e3%80%91%e3%83%96%e3%83%ad%e3%82%b0%e8%a8%98%e4%ba%8b%e3%81%ab%e4%b8%8b%e7%b7%9a%e3%82%92%e5%85%a5%e3%82%8c%e3%82%8b%e6%96%b9%e6%b3%95/ https://sugublog.org/%e3%80%90%e3%83%9e%e3%83%8a%e3%83%96%e3%83%ad%e3%82%b0%e3%80%91%e3%83%96%e3%83%ad%e3%82%b0%e8%a8%98%e4%ba%8b%e3%81%ab%e4%b8%8b%e7%b7%9a%e3%82%92%e5%85%a5%e3%82%8c%e3%82%8b%e6%96%b9%e6%b3%95/?noamp=mobile#respond Fri, 22 Jan 2021 16:01:00 +0000 https://sugublog.org/?p=650

マナブログさんのテーマを使用しているが、本文にカラーで下線を入れたいと思う事もよくあります。どうすれば可能か実際の画像などを元に解説します。 コピーするだけで簡単にできます。良ければ試してみて下さい。 私のブログはWor […]]]>

マナブログさんのテーマを使用しているが、本文にカラーで下線を入れたいと思う事もよくあります。どうすれば可能か実際の画像などを元に解説します。

コピーするだけで簡単にできます。良ければ試してみて下さい。

私のブログはWordPressでマナブログさんのテーマを使用させて頂いてます。前回書いた記事にもありますが、とっても良いのもなのでよかったら是非前回の記事を読んでみてください。このテーマ購入したい場合はこちらにあります。

前回はサイドバーに広告を入れてみましたが、今回はCSSを使用してブログ記事に下線を書き、色を付けて目立たせて見ようと思います。こんな感じです。取り入れそうであれば試してみてください！

２ステップで完了します。ではやっていきます。

ブログ記事に下線を入れる方法

１．CSSを追加します。

WordPressの管理画面から「外観」→「カスタマイズ」をクリックします。

「追加 CSS」をクリックします。

赤枠にCSSを記入します。今回は下線を4pxの太さで色はピンクにしてみましょう。cssのクラスは「underline_pink」にしましょう。あなたのお好きな名前にして見て下さい。完成したら左上の「公開」をクリックします。

「公開済み」となった事を確認して「ｘ」で閉じましょう。これで追加のCSSは完成です。

２．記事に作成したCSSを組み込みます。

まず記事の編集画面にて下線を付けたい箇所を太字にしてみましょう。下線付けたい箇所を選択して「B」をクリックして太字にします。そのあと縦並びの「・」をクリックします。

「HTML」として編集をクリックします。

HTMLタグも一緒に表示されましたので、太字のタグ「<strong> 文字 </strong>」を今回作成したCSSで囲っていきましょう。下記CSSで囲いましょう。「underline_pink」の名前はあなたの作成した名前に置き換えて下さい。

<span class="underline_pink"> </span>

上記のように上手く囲えたのであれば、縦並び「・」をクリックします。

「ビジュアル編集」をクリックしてビジュアル編集に戻しておきましょう。

ここではCSSが反映されていないので何も変化がありません。

「下書き保存」をクリックして保存し、「プレビュー」をクリックし「新しいタブでプレビュー」をクリックします。

　きちんと文字にCSSが適応されて、4pxのピンクの下線が表示されています。

成功の様です。下線の太さや色をお気に入りのものにして見て下さい。

またCSSの知識を手に入れて他にもいろいろあなた好みのブログしていって下さい。

]]> https://sugublog.org/%e3%80%90%e3%83%9e%e3%83%8a%e3%83%96%e3%83%ad%e3%82%b0%e3%80%91%e3%83%96%e3%83%ad%e3%82%b0%e8%a8%98%e4%ba%8b%e3%81%ab%e4%b8%8b%e7%b7%9a%e3%82%92%e5%85%a5%e3%82%8c%e3%82%8b%e6%96%b9%e6%b3%95/feed/ 0 【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