はてなブックマーク

ブラウザ操作だけで、文字や画像のデザインや動きを自動生成することが出来ます。 HTML,JavaScript,CSS(STYLE)が自動で作成されますので、コピー＆ペーストだけでホームページに反映することが出来ます。 JavaScriptは「jquery」を使用していませんので、「jquery」が利用できない環境でも利用可能です。 文字のデザインと動きを自動作成

<style type="text/css"> #button { display : inline-block; border-radius : 5%; /* 角丸 */ font-size : 14pt; /* 文字サイズ */ text-align : center; /* 文字位置 */ cursor : pointer; /* カーソル */ padding : 10px 10px; /* 余白 */ background : #000066; /* 背景色 */ color : #ffffff; /* 文字色 */ line-height : 1em; /* 1行の高さ */ transition : .3s; /* なめらか変化 */ box-shadow : 4px 4px 3px #666666; /* 影の設定 */ border : 2px solid #000066

<table class="tableArea"> <tr><th></th><th>列1</th><th>列2</th><th>列3</th><th>列4</th></tr> <tr><th>行1</th><td>aaaa</td><td>bbbbbbbbbb</td><td>ccc</td><td>d</td></tr> <tr><th>行2</th><td></td><td>e</td><td>fffffffffffff</td><td></td></tr> <tr><th>行3</th><td>g</td><td></td><td></td><td>h</td></tr> <tr><th>行4</th><td>i</td><td>j</td><td>k</td><td></td></tr> </table> <style type="text/css"> /* --- テーブル全体

<div class="slide" id="makeImg"> <img src="bear.png" alt="くま"> <img src="cat.png" alt="ねこ"> <img src="cow.png" alt="うし"> <img src="dog.png" alt="いぬ"> <img src="mouse.png" alt="ねずみ"> </div> <style type="text/css"> /*=== 画像の表示エリア ================================= */ .slide { position : relative; overflow : hidden; /* 画像のサイズに合わせて変更ください */ width : 200px; height : 200px; margin : auto; /* サンプルは中央寄せの背景：

<div class="baseBox"> <div class="backStr">sample</div> <div class="frontStr">CSSで背景に<br>透かし文字を<br>入れるサンプル</div> </div> <style type="text/css"> .str { /* --- 親BOXの定義 --------------------------------------------*/ .baseBox { display : inline-block; /* インラインブロック化 */ position : relative; /* 親要素 */ overflow : hidden; /* はみ出しは非表示 */ margin : 0 auto; /* BOXの位置(中央寄せ) */ width : 240px; /* BOXの横幅 */ height

CSSの「text-stroke」を利用すると文字の縁取り（アウトライン）が簡単にできますが、IEなど一部主要なブラウザで対応していません。 当ページでは、対応ブラウザが多い文字に影を付けCSSの「text-shadow」を利用して縁取り・白抜きを実現しています。 生成された「html」「css」などのソースコードは、そのままコピー＆ペーストで利用することが出来ます。 SVG（htmlによる画像化）を使用すると SVGで縁取り のように表示可能です。SVGによる文字の縁取り・白抜きについては以下を参照ください。 SVGで縁取り文字・白抜き文字の生成

ブラウザ操作だけで、文字や画像のデザインや動きを自動生成することが出来ます。 HTML,JavaScript,CSS(STYLE)が自動で作成されますので、コピー＆ペーストだけでホームページに反映することが出来ます。 JavaScriptは「jquery」を使用していませんので、「jquery」が利用できない環境でも利用可能です。 文字のデザインと動きを自動作成