< ezHTMLの活用 >

オススメ商品の紹介です。どうぞ、ご来店ください。
リンク▲オススメ商品の紹介・・家電/ファッション/母の日/トラベル(楽天am_shop_416a_F2)
リンク▲オススメ商品の紹介・・家電/ホーム/ヘルス/飲料(アマゾンam_shop_416a_F2)



【ezHTML(フリーソフト)でタグ編集】


【 目 次 】

▼クリックで各項目へ移動

  1. HTMLタグの利用例(1)
  2. ezHTMLの紹介とダウンロード
  3. -B
  4. -C
  5. 未設定



リンク名◆01a

♥ezHTML(ソフト)でタグ編集に挑戦

▼0515A▼boins.gif

画像(1)▼画像のクリックで拡大できます。(別窓で表示)

funsui_p1.jpg


●【ez-HTML】(HTMLタグ編集の無料ソフト)は、HTML文書を編集するのに便利なオススメのソフトです。このソフトを利用して、HTMLタグの編集をしてみました。半角状態で「<」左カッコを入力するとタグのリストが表示され、目的のタグを選択して入力することができます。

ページ内リンク▲ezHTMLの紹介とダウンロード

次の文章は、【ez-HTML】で作成した文章です。


タグ→<span style="background-color:#FFFF33; padding:0.3em 1em; margin:0.2em 0px;">
<pre>設定→そのまま表示(小さめの文字サイズ)
●内側余白設定
1)「padding:0.3em 1em;」ペンの太さ→内側余白の上下幅0.3em、左右幅1文字分
2)「padding:0.3em 0px;」→内側余白の上下幅0.3em、左右幅無し(0px)

●外側余白設定
1)「margin:0.2em 0px;」→外側余白の上下0.2em/左右無し
2)「margin:1em;」→外余白上下左右幅1文字分
3)「margin:100% 0px 50%;」→外余白上幅1文字分、左右幅無し、下幅0.5文字分 4)「margin:0.5em 3px 10% 5px;」→外余白の上→右→下→左の幅(時計回り) ●塗りつぶし(マーカー)設定 「background-color:#FFFF33;」蛍光ペン効果→文字、文章を強調(マーキング)



▼※設定(1)<p style="line-height: 2em;">で行間の指定(2.5文字分)

●枠線(境界)の設定(none なし/ hidden 表示しない)


▼タグ→<span style="border: double 3px red;">「border: 線種 太さ 色;」

●枠線/二重線/3px  ●枠線/実線/5px  ●枠線/破線/5px  ●枠線/点線/5px

●色の設定は、【標準】タブ→色設定ボタン→【カラーコード変換】画面で簡単にできます。赤・緑・青のコード変換スライドバーを動かして、RGB値を指定し、カーソル位置にカラーコードの貼り付けができます。数値が小さい(左にスライド)と色が暗くなり、大きくなる(右にスライド)と明るい色になります。また、カラーダイアログ(色一覧パレット)から色を選択するボタンもあります。
色の指定は、「色の英名」を利用することも可能です。「色の英名」については、下記のリンクサイトを参考にしてください。
リンク▲慣用色名の英名124色(別窓で表示)

▼タグ→<style="border: inset 7px;">「border: 線種 太さ;」
●内側凹状/7px  ●内側凸状/7px  ●立体凹状/7px  ●立体凸状/7px

▲※設定(1)の終了(行間指定/2em)



●下線/二重線/3px  ●下線/実線/5px

●下線/破線/7px  ●下線/点線/10px



●文字間隔/1em  ●文字間隔/0.5em  ●文字間隔/0em

▲0515A▲
リンク名◆01a_1

▼0514A▼

HTMLタグ編集の無料ソフト

画像(1)▼クリックで画像の拡大ができます。

【ez-HTML】HTMLタグ編集の無料ソフトの紹介

【ez-HTML】(HTMLタグ編集の無料ソフト)は、HTML文書を編集するのに便利なオススメのソフトです。次のような特徴があります。

1)【HTML編集】と【プレビュー】ボタンの切り替えで、タグ編集とブラウザ画面表示の確認ができます。切り替え速度も速く、すぐに確認できます。
2)タグは色分けされるのでタグ文章の内容の確認がしやすくなっています。
3)「<」(左かっこ)タグの入力で、タグのリスト一覧が表示されます。選択することでタグ入力ができます。
4)各種の便利なツールアイコンで操作ができます。また、タブの選択でアイコンバーを用途ごとに切り替えることができます。
5)複数のHTML文書を開くことが可能で、ページタブ(見出し)が追加されます。また、複数の文書のウィンドウを並べて表示することができます。
6)文字列の検索や置換機能が利用できるので、複数の文字列を素早く変更できます。
7)選択文字列のドラッグ編集(コピーや移動)ができるので、素早い文字列のコピーや移動が可能です。

リンク▲ez|-HTML(HTML編集の無料ソフト)のダウンロードサイト

参考サイト

リンク▲HTMLの編集・・・【ひろの知恵袋】・・・FC2ホームページ(F2HP_s.x1)より
リンク▲HTMLの編集・・・とほほのWWW入門

▲0514A▲


【目次】へ戻る

リンク名◆02a

【目次】へ戻る

リンク名◆03a

●管理人が撮影した写真で、花壇の花を接写したものです。今後のページ作成の素材として利用したいと思っています。画像の必要な部分を【Clipdesk】などの画像キャプチャーソフト(フリーソフト)で切り取って画像保存すると便利です。下記のリンクを参考にしてください。
リンク▲【Clipdesk】・・・画像の一部を取り込み、保存、印刷できるフリーソフト

画像(1)Ra・・画像のクリックで拡大できます。

B_cs_nop1

b_dmfoseka2

b_dmfoseka3

b_gazania1_68

b_gazania2_68

b_gazania3_64

●次の様式のHTMLタグで、画像のクリックで画像の拡大(実寸大)できます。ページ表示画像(サムネイル/縮小画面)サイズは、「width="幅の値" height="高さの値"」のタグで調整します。私の場合、※a)幅は350で、高さはディスプレイ画面上の画像サイズ(幅と高さ)を「ものさし」で測り、計算式「高さ=350x縦/幅」で※a)幅の値350に対する高さ(縦幅)の値を計算しています。※a)幅は350だとブログやホームページに収まり、画像の概要が確認できるサイズです。皆さんも試してみてください。

タグ→<center><a href="画像リンクのURL" target="_blank">
<img src="画像リンクのURL" width="幅の値" height="高さの値" alt="代替名" border="0">
</a></center>

●下記のアニメーション画像は、次のサイトからダウンロードしました。ウェブ素材が無料で利用できるサイトなので、参考にしてください。
リンク▲【ホームページのおもちゃ箱】Copyright(C.)1996-2006 by Yoko YAHAGI
但し、画像の直リンクはしないでください。

     

     

     

【目次】へ戻る

リンク名◆04a

【目次】へ戻る    【ページ先頭】へ戻る




♣ 今後も、内容を充実していきたいと考えています。本ページのHTMLタグは、ブラウザの【表示】メニューの「ページソースの表示」で確認できると思います。但し、画像などの直リンクはやめてください。また、アニメーション画像も紹介したウェブサイトから、新たにダウンロードしてください。

【目次】へ戻る    【ページ先頭】へ戻る