1. ホーム /
  2. HTMLのみ

HTMLのみ

  • 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

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

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

使い方は、ブログカードを作成したいサイトの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/