1. ホーム /
  2. hpmake

hpmake

  • 2021.04.05

ホームページ作成でよく使うHTMLタグとコード

ホームページ作成でよく使う「文字リンク・画像リンク・タグ一式」をまとめました。

文字リンク

文字を入力 
<a  href="URL" title="タイトル" target="_blank">文字を入力</a>

画像リンク

画像の説明 
<img  src="URL" width="300" height="300" border="0" alt="画像の説明" hspace="5">

hspace：左右の余白

文字と画像リンク

画像の説明文字を入力 
<a  href="リンクURL" target="_blank" title="タイトル"><img  hspace="5" alt="画像の説明" border="0" height="300" width="300" src="画像URL">文字を入力</a>

記事中によく使うタグ

斜体 
<i>斜体</i>
文字の下にアンダーバー 
<u>文字の下にアンダーバー</u>
取り消し文字 
<strike>取り消し文字</strike>
太字 
<b>太字</b>
文字の強調 
<strong>文字の強調</strong>

記事中の文字の色

赤色文字 
<span  style="color: rgb(255, 0, 0);">赤色文字</span>
青色文字 
<span  style="color: rgb(0, 0, 255);">青色文字</span>
緑色文字 
<span  style="color: rgb(0, 255, 0);">緑色文字</span>

区切り・改行

<hr>
サンプル
（改行）
サンプル 
<br>

記事の寄せタグ

文字を左へ
<div  style="text-align: left;">文字を左へ</div>
文字を中央へ
<div  style="text-align: center;">文字を中央へ</div>
文字を右へ
<div  style="text-align: right;">文字を右へ</div>

リスト表示

  • サンプル１
  • サンプル２
  • サンプル３
<ul><li>サンプル１</li><li>サンプル２</li><li>サンプル３</li></ul>

リスト表示（番号）

  1. サンプル
  2. サンプル
  3. サンプル
<ol><li>サンプル</li><li>サンプル</li><li>サンプル</li></ol>

引用タグ

この記事は引用です。
<blockquote>この記事は引用です。</blockquote>

  • 2021.04.04

paddingとmarginの余白をデモで調べる方法

paddingとmarginの余白の意味や間隔をデモで見ながら確認できるサイトです。

設定が複雑で難しいCSSの設定もプレビューを見ながら直接いじれるのでおすすめです。

paddingは要素の内部の領域。marginは要素の周囲の領域。

サイト：padding – CSS: カスケーディングスタイルシート | MDN (mozilla.org)

サイト：margin – CSS: カスケーディングスタイルシート | MDN (mozilla.org)

paddingのプロパティ（数値）をいじりながら、右のプレビューで確認ができます。

引用・参考サイト

paddingのCSS

padding - CSS: カスケーディングスタイルシート | MDN
developer.mozilla.org
padding – CSS: カスケーディングスタイルシート | MDN
padding は CSS の一括指定プロパティで、要素の全四辺のパディング領域を一度に設定します。

marginのCSS

margin - CSS: カスケーディングスタイルシート | MDN
developer.mozilla.org
margin – CSS: カスケーディングスタイルシート | MDN
margin は CSS のプロパティで、要素の全四辺のマージン領域を設定します。
  • 2021.04.04

HTMLとCSSのテーブルの作り方

誰でも簡単に作れるテーブルタグを生成するサイトです。

rowspanやcolspanの設定などで悩むことなく、HTMLの知識がなくても直感的に作成できます。

サイト：Table Tag Generator | HTMLの表を簡単に作成・結合ツール。テーブルタグジェネレーター

使い方は以下を参考にして下さい。

トップページへアクセスして、テーブルの行と列の個数を決めましょう。

テーブル内をマウスでドラッグして、「結合・分割・td th」を行います。

試しに１列目をドラッグして「th」に変換しました。

次に「文字」をクリックして、テーブル内に文字を入力しましょう。

完了したら「出力」をクリック。

出来上がったテーブルは左下の「HTML」内にテーブルタグが載っています。

全てドラッグしてコピーします。

ホームページやブログへペーストすれば簡単に完了です。

同時にCSSも作成されます。必要に応じて「CSS」内も「style.css等」へ貼り付けます。

ボーダー線をHTMLへ追加したいなら以下を 「<table>」 と置き換えます。

<table  border="1">

引用・参考サイト

「bonyspike」様のオンラインで作れるテーブルジェネレーター。

tabletag.net
https://tabletag.net/ja/
  • 2021.04.04

文字の囲み枠をHTMLだけで作る方法

文字に枠デザインを挿入するHTMLのみで出来るボックスです。

よく利用させて貰っているタグは以下。

シンプルな直線囲みボックス

青枠★ここに文字を入力してください。

<div style="border: 5px solid #87cefa; padding: 10px; border-radius: 0px; background: ##ffffff;">★ここに文字を入力してください。</div>

赤枠★ここに文字を入力してください。

<div style="border: 5px solid #ffb6c1; padding: 10px; border-radius: 0px; background: ##ffffff;">★ここに文字を入力してください。</div>

破線の囲みボックス

破線赤★ここに文字を入力してください。

<div style="border: 5px dashed #cd5c5c; padding: 10px; border-radius: 0px; background: ##ffffff;">★ここに文字を入力してください。</div>

破線ピンク★ここに文字を入力してください。

<div style="border: 3px dashed #ffa8d3; padding: 10px; border-radius: 0px; background: ##ffffff;">★ここに文字を入力してください。</div>

見出し付き囲み枠

□タイトル

★ここに文字を入力してください。

<div style="border: 1px solid #ffb6c1; padding: 5px; border-radius: 0px; background: #ffb6c1;">□タイトル </div>

<div style="border: 1px solid #ffb6c1; padding: 10px; border-radius: 0px; background: #ffffff;">★ここに文字を入力してください。</div>

引用・参考サイト

文字の囲み枠などをコピペで利用できるお手軽サイト。

他にも「みーこの自宅でネットビジネス」様では、ワードプレスの文字の装飾、SEO、プラグインなどの情報を解説されています。

miiko315.net
https://miiko315.net/6182.html
  • 2021.04.04

【無料3サイト】sitemap.xmlの作成サイト

ホームページやブログのサイトマップを簡単に作成できるジェネレーターサイトです。

基本的な使い方は、URLを入力して「作成」ボタンをクリックするだけです。

サイト：サイトマップを作成-自動生成ツール「sitemap.xml Editor」

サイトの更新頻度や優先度、同一タイトルの除外などはお好みで構いません。

ダウンロードした「sitemap.xml」をWEBサイトの直下（index.html等のある階層）にアップロードすれば完了です。

更にGoogleサーチコンソールの「サイトマップ」から「sitemap.xml」を送信することで効率よく検索インデックスに登録することが可能です。

ちなみに「sitemap.html」を作成するサイトはありません。「sitemap.html」は訪問者にサイトの構造を見やすくするためのHTML上の表示になります。以前はSEOに関係すると言われきましたが、現在はそれほど意味はなくユーザービリティを向上させる目的で独自に作ることが大半です。ワードプレスなどのCMSのプラグインを使う方法があります。

引用・参考サイト

無料で使えるサイトマップ（sitemap.xml）の作成サイト4つです。

どのサイトも直感的に使える便利なサイトです。

サイトマップを作成-自動生成ツール「sitemap.xml Editor」

サイトマップを作成-自動生成ツール「sitemap.xml Editor」
www.sitemapxml.jp
サイトマップを作成-自動生成ツール「sitemap.xml Editor」
Googleサイトマップsitemap.xmlや、モバイルサイトマップを作成する自動生成ツールです。最大取得URL数1‚000を平均5分で実行する高速ツール、被リンク設定などの手間…

FC2サイトマップ

seo.fc2.com
https://seo.fc2.com/sitemap/

xml-sitemaps.com

www.xml-sitemaps.com
Create your Google Sitemap Online – XML Sitemaps Generator
Free Online Google Sitemap Generator. XML-sitemaps.com provides free online sitemap genera…

フリーサイトマップメーカー[XML,ROR,HTML,TXT 対応]

depths.jp
【SEO】無料サイトマップ作成・生成ツール / フリーサイトマップメーカー / Google・Yahoo・MSN対応 – Webツール・スクリプト置き場 – Depths.jp
  • 2021.04.04

見栄えの良いボタン素材作成サイト

ホームページのボタン素材を簡単に作成できるサイトです。

ボタンテキストを入力して、「文字サイズ・ボタン幅」などを決めたら「JPG・PNG作成」ボタンを押すだけ。

PNGの方が画質が綺麗です。

あとは画像を右クリックしてデスクトップに保存すればオリジナルのボタンバーナーが完成です。

サイト：ボタン自動作成｜カラーサイト.com (color-site.com)

引用・参考サイト

ホームページの色見本でおなじみの「カラーサイト.com」様のページです。

スタイリッシュなボタンを簡単に作成できます。

ボタン自動作成｜カラーサイト.com
www.color-site.com
ボタン自動作成｜カラーサイト.com
ホームページやWEBで使うボタン素材を、ブラウザ上で作成でき、無料で使うことができます。またサイズや色、角丸などを選ぶと自動でボタンが作成され、JPGやPNGでダウンロードして利用…
  • 2021.04.04

ブログカード風の紹介リンクを作成できるサイト

ブログやホームページに「ブログカード」風の紹介リンクを作成できるサイトです。

使い方は、ブログカードを作成したいサイトのURLを入れて「読込」ボタンを押すだけ。

出力されたコードをご自身のページ貼り付けます。

サイト：ブログカード風の紹介リンクタグ作成 (matsmoto.jp)

例）当サイトのURLを入れると以下の通りにブログカード風のリンクが完成です！


ホームページ作成でよく使うツールとHTML&CSSコード
ホームページ作成をもっと手軽に簡単。個人的によくお世話になるサイトやよく使うHTMLコードを分かりやすく紹介しています。
 

引用・参考サイト

ブログカード風の紹介リンクを簡単に作成できるサイトです。

貼るだけでカッコイイリンクを作れます。

ブログカード風の紹介リンクタグ作成
matsmoto.jp
ブログカード風の紹介リンクタグ作成
ブログカード風の紹介リンクのタグを簡単に作成できます。

  • 2021.04.04

文字にマーカー線を引く方法

文字にマーカー線を引く流行りのHTMLコードです。

WEBサイトが見やすくなるだけでなく、強調したい文字をデザインに仕上げることができます。

細いマーカー線

赤マーカー

<span style="background: linear-gradient(transparent 70%, #ff7f7f 0%);">赤マーカー</span>

青マーカー

<span style="background: linear-gradient(transparent 70%, #7fbfff 0%);">青マーカー</span>

黄マーカー

<span style="background: linear-gradient(transparent 70%, #ffff7f 0%);">黄マーカー</span>

緑マーカー

<span style="background: linear-gradient(transparent 70%, #bfff7f 0%);">緑マーカー</span>

紫マーカー 
<span style="background: linear-gradient(transparent 70%, #db82ff 0%);">紫マーカー</span>
桃マーカー 
<span style="background: linear-gradient(transparent 70%, #ff91f6 0%);">桃マーカー</span>

全てマーカー線

赤マーカー

<span style="background: linear-gradient(transparent 0%, #ff7f7f 0%);">赤マーカー</span>

青マーカー

<span style="background: linear-gradient(transparent 0%, #7fbfff 0%);">青マーカー</span>

黄マーカー

<span style="background: linear-gradient(transparent 0%, #ffff7f 0%);">黄マーカー</span>

緑マーカー

<span style="background: linear-gradient(transparent 0%, #bfff7f 0%);">緑マーカー</span>

紫マーカー 
<span style="background: linear-gradient(transparent 0%, #db82ff 0%);">紫マーカー</span>
桃マーカー 
<span style="background: linear-gradient(transparent 0%, #ff91f6 0%);">桃マーカー</span>

引用・参考サイト

引用させて頂いた「Pのケシキ」様のページ。

非常に見やすくて分かりやすいHTMLコードを掲載されています。

p-eito.com
https://p-eito.com/html/marker/