オンライン上でHTML・CSS・JavaScriptコードをプレビューを見ながら修正・編集ができるサイトです。
挙動を確認しながらコードを作成・修正したい人におすすめです。
英語サイトですが、管理画面はよくあるブログサイトのものと似ていますので直感的に使えると思います。
登録なしの無料で使うことができます。有料版ではコードの保存などが行えます。
サイト：日本語 (codepen.io)
使い方
HTML・CSS・JSのそれぞれの枠にコードを記述するだけです。
シンプルで使いやすく、コードの処理を簡単にプレビューすることができます。
機能を追加することもできます。
設定から検索ボックスで追加したいスクリプトを探すだけです。
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>
<ol><li>サンプル</li><li>サンプル</li><li>サンプル</li></ol>
この記事は引用です。
<blockquote>この記事は引用です。</blockquote>
誰でも簡単に作れるテーブルタグを生成するサイトです。
rowspanやcolspanの設定などで悩むことなく、HTMLの知識がなくても直感的に作成できます。
サイト：Table Tag Generator | HTMLの表を簡単に作成・結合ツール。テーブルタグジェネレーター
使い方は以下を参考にして下さい。
トップページへアクセスして、テーブルの行と列の個数を決めましょう。
テーブル内をマウスでドラッグして、「結合・分割・td th」を行います。
試しに１列目をドラッグして「th」に変換しました。
次に「文字」をクリックして、テーブル内に文字を入力しましょう。
完了したら「出力」をクリック。
出来上がったテーブルは左下の「HTML」内にテーブルタグが載っています。
全てドラッグしてコピーします。
ホームページやブログへペーストすれば簡単に完了です。
同時にCSSも作成されます。必要に応じて「CSS」内も「style.css等」へ貼り付けます。
ボーダー線をHTMLへ追加したいなら以下を 「<table>」 と置き換えます。
<table border="1">「bonyspike」様のオンラインで作れるテーブルジェネレーター。
ブログやホームページに「ブログカード」風の紹介リンクを作成できるサイトです。
使い方は、ブログカードを作成したいサイトのURLを入れて「読込」ボタンを押すだけ。
出力されたコードをご自身のページ貼り付けます。
サイト：ブログカード風の紹介リンクタグ作成 (matsmoto.jp)
例）当サイトのURLを入れると以下の通りにブログカード風のリンクが完成です！
ブログカード風の紹介リンクを簡単に作成できるサイトです。
貼るだけでカッコイイリンクを作れます。
文字にマーカー線を引く流行りの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コードを掲載されています。
最近のコメント