今ではもう、ブログの記事に編集・装飾がある程度できるようになりました。さらに、seesaablogのコンテンツも充実し、最新記事下のカテゴリーごとのご紹介が効果的に表せるようになりましたので、これを機に過去の記事も改めて修正し直し、整理して、同様な記事を繰り返し書かずに、上書きのみにして、カテゴリごとに学びやすいようにします。

カテゴリことの表記は→ 【テーブル】・・・ とします。

それぞれの記事タイトルも
【テーブル】@表組みの基本から・・・のような表記にします。 ○番号で続きの学びが確実にできるように表していきます。最初から学ぶときは@からたどってみてください。

従って、記事更新の日付は参考にせずに、【カテゴリ】から学びたい項目を探して進んでいってください。 今後とも末永くいつでも戻ってきて学んでみてください。

2012年03月25日

盗まれないために…せっかく作った記事丸ごと持っていかれている!!!


なんか久しぶりのアップです。

HTMLに関して向上心が途絶えていたかも。。。


これまで載せたもので、ブログの記事アップには「不自由していなかった」

ところが。。。

記事丸ごとコピーしているところ見つけた。

始めたころには自分の[Ping記事送信先]が丸ごと盗まれていた。その時は気づかなかったんだけど、コピーされていたんですね、Ping送信先の並び順がそのままだったので間違いない。コピーされたんです。
或いは今にして思えば、Ping送信先リスト公開していないと思うんだけど。シーザーさんハックされていませんよね。。。
(もう昔のことなので時効ですか。)
では、実際に使って見ましょう⇒続きをクリック

2012年03月22日

【リスト】リスト(箇条書き)マークをさらに紹介します。


リスト(箇条書き)マークは前回に扱ったほかにも、いろいろな現し方がありましたので練習しましょう。

まずは復習から
Disk・・・小さい黒丸、circle・・・小さい白丸、square・・・小さい黒い四角、でした。
今回はHTMLも新たなのを紹介します。
<UL ”list−style−type:@”>
<LI ”list−style−type:@”>
@にはリストマークのHTMLが入ります
「UL」「LI」については、前の記事を参考にしてください。
新しく練習するリストマーク
・decimal・・・算用数字
・decimal−leading−zero・・・0をつけた算用数字(00、01、02、…98、99)
・lower−roman・・・英小文字(a,b,c・・・)
・upper−roman・・・英大文字(A,B,C・・・)
・lower−alpha・・・ローマ数字/小文字( 「◆「」・・・)
・upper−alpha・・・ローマ数字/大文字(T、U、V・・・)
紹介したとおりに、復習したリストマークも含めて使ってみます。
では、実際に使って見ましょう⇒続きをクリック
ラベル:リスト 箇条書き

【リスト】用語(小見出し)と、説明文を箇条書きリストに挑戦!


用語(小見出し)と、説明文を箇条書きリストのスタイルにする練習をします。次のようになります。
<DL> ・・・@・・・用語とその説明を組にして使う場合に定義するのに使用するHTMLです。
<DT> ・・・A・・・用語あるいは小見出しといったほうが分かりやすいかもしれません。その際に使用するHTMLです。
  <DD> ・・・「DT」を受けてその内容を説明する文章を定義します。
<DT>
  <DD>
  ・
  ・
</DL>
用語が短い場合は、このようにします。
<DL compact> ・・・「compact」は用語が短い場合に使用して、改行されずに間隔が空きます。
<DT> 
  <DD> 
<DT> 
  <DD>
  ・
  ・
</DL>
@ ・・・見出し用テキスト
A ・・・内容を説明するテキスト
では、実際に使って見ましょう⇒ここをクリック
ラベル:段落 箇条書き

【リスト】リストの(最初の)数字を指定したいときの練習


箇条書きリストにて途中、数字を指定してリスタートさせる場合を練習します。

<OL start=”@”>
<LI>
<LI>
  ・
  ・
  ・
</OL>
あるいは、
<OL value=”@”>
<LI>
<LI>
  ・
  ・
  ・
</OL>
「OL」は文頭に付いた数字の序列を定義します。指定のない場合は「1」から始まります。
「value」は「OL」に対して個別にリスト開始番号を指定する際に使うHTMLです。
@ ・・・文頭の開始数字
となります。
では、実際に使って見ましょう⇒ここをクリック
ラベル:リスト 文頭文字

【リスト】リストの数値のタイプの種類


機能練習した箇条書きリストの種類をいくつか紹介します。
<OL>
<LI type=”@”>
<LI>
<LI>
<LI>
</OL>
として、@にはいる種類にどんなのがあるのかですが、

  1. A・・・英字大文字
  2. a・・・英字小文字
  3. T・・・ローマ字大文字
  4. 。・・・ローマ字小文字 Seesaaさんでは表記されないようです
  5. 1・・・算用数字

のようになります。
では、実際に使って見ましょう⇒ここをクリック
ラベル:段落 リスト

【リスト】文頭に番号のついたリスト表示に挑戦しよう!


今日は文頭に番号の序列の付いたリストに挑戦してみよう。

<OL> ・・・は文頭に番号が付いた序列、番号月のリストを定義します。
<LI> ・・・各リストの項目に使用する
<LI>
  ・
  ・
  ・
</OL>
「OLで定義されたリストはブラウザ上でリスト項目の文頭に番号が付きます。これは「1」から始まって順に増えていきます。
では、実際に使って見ましょう⇒ここをクリック

【リスト】リストマーク(文頭のマーク)の練習をしよう


文章をデザインする際のリストマーク(文頭のマーク)の練習をします。


<UL> ・・・は文章のリスト(箇条書きの状態)表示を定義します。
<LI> ・・・は文章の中のリストされる各項目を指定します。
<LI>
<LI>
 ・
 ・
 ・
</UL> ・・・これでリストを閉じることになります。←で閉じるこてで</LI>は省略できます。

<LI type=”@”>
@に入るHTMLには、disk・・・黒い丸、circle・・・白開き丸、square・・・黒い四角、となります。
typeが指定されない場合は黒い丸になります。
<UL></UL>の前後は一行開きになります。

残念ながら「UR」ではSeesaaさんでは反映されませんでしたので、《確認段階では反映されませんでしたが、投稿したら反映されていました<MENU></MENU>で囲んでみたら反映しました。
「MENU」も同様に文頭のマークについたリスト(箇条書きの状態)表示を定義します。

では、実際に使って見ましょう⇒ここをクリック

【リスト】段落をつける、文章のまとまりを表す


昨日の続きをメイン画面で試して見ましょう。<div>と<p>と、新たに<span>を試してみます。

秋冬の新作パソコンを見ると、テレビチューナーが装備されていたり、インターナットで映画が見れる設定になっていたり、オンライン3Dゲームを十分に楽しめるようになっていました。 ・・・@

DVD録画ができるようになっているなど高機能が売りになってます。 ・・・@’

特に、ワイド画面になり、大きなサイズになってきました。17型ディスプレイまで当たり前のように登場している。液晶テレビがますます大型化していて、値段が安くなっている中、それに呼応するように、との流れだと思う。 ・・・A


液晶画面もテレビと変わらない高機能のものが登場し、若い人たちに中には、テレビを持たずにテレビパソコンだけの人も増えてくると思います。 ・・・A’


あなたは、大型液晶テレビを選びますか。 ・・・BAVパソコンにしますか ・・・B’

@並び@’には<div>文章</div>を入れました。一つのまとまりを表します。その間は普通の改行幅です。
AとA’こちらは<p>文章</p>を入れましたので一行分の間が開いています。段落としてのまとまりをあらわしたHTMLです。
BとB’は<span>と</span>で囲みました。こちらは一行の中でそれぞれのまとまりをあらわします。
Bは ・・・<span>文章</span>
B’には下のボタンの「大」を入れて囲んであります。<span style=font−size:large;”>文章</span>


分かりやすいように色をつけて対応させていますが、そのためのHTMLは説明に入れていません。またいつものように半角英数でご使用ください。

今日はここまで。
ラベル:段落 文章

2012年03月21日

表組の支援ソフトを紹介


テーブルの作成を実践してみた方はお分かりと思いますが、決して難しくはないものの、縦横の項目が増えてくるほど、確認しなららの作業が、間違わないようにとよけい気を使います。

そこで、ご紹介します。フリーソフト『HTML Editor For My Friends』です。ほかにもたくさんありますが、それらの特徴は、拡張子「.csv」をつけて表組をすると変換してくれるという機能が付いていて、楽にテーブルができるというもの。
縦横の項目が多くなるほど使いたくなる支援ソフトです。二重書きで囲まれた下線をクリックしてダウンロードしてください。
ラベル:表組 テーブル

ブログ投稿がワード感覚でカンタンにできる。


ブログを、ワープロ感覚で、記事投稿のできるソフトが「フリーソフト」であるんです。自分も、使ってみようかなと思っていますが、ご紹介します。
『ubicast Biogger v1,1β』
対応OS;windowos 98se/me/2000/XP
対応ブラウザー;Maicrosoft Internet Explorer5,5以上
URL;htto://blog.ubicast.com


ブラウザーを立ち上げなくて管理画面上にログインしなくても、タイトルと本文を入力し「投稿ボタン」をクリックするだけでブログの更新ができる。
文字の大きさ、色を変える、段落や引用箇所をつくったり、戻る、進む、もあり、まさにワード感覚といったところ。詳しくは上の“二重書き”をクリックしてみて!

2012年03月20日

Seesaaで動画を公開する・・・


ずっとずっと、ずぅ〜っと、動画をアップさせたいと思っていた。

どう手を打とうかと思っていた。

Seesaaのファイルマネージャ(ファイルの形のボタン)をクリックして
[ファイルの追加]から「参照ボタン」をクリック
パソコン内の任意のファイルにある動画ファイルをアップロードしてもそれを再生する道具をどうするか考えていた。

ふとしたことで、自分がパソコン内にカメラの動画機能で撮っておいたサンプルファイル〔.MOV(QuickTimeムービーファイル)を貼り付けてみた。

あきらめていたのに、その日に限って『だめもとで・・・』
では、実際に使って見ましょう⇒続きをクリック

【画像の表示・配置】Aイメージ画像に対して回り込むテキストとの間に余白を設ける


イメージ画像の周りに余白を指定して、回り込むテキストとの間に余白取ります。

<IMG SRC=”@” border=”A” align=”B” vspace=”C” hspace=”D”>

@は表示させるイメージファイルのURL
Aは画像と回り込むテキストとの境界線を定めます。この場合必要ないので、”0”とします。border=”0”それ自体が回り込みの領域を規定させているようです。画像全体を回り込ませる要素があるようです。
Bはleft、rightと入れて、テキストを回りこませる方向を指示します。
C・・・vspaceは上下の余白を指定します(ピクセル数)
D・・・hspaceは左右の位置を指定します(ピクセル数)

<IMG SRC=”@” border=”0” align=”left” vspace=”6” hspace=”6”>

【画像の表示・配置】回り込みの第一回目の記事での画像を利用して上の要素を適応すると・・・
画像とテキストの間で窮屈さがなくなっているのがわかると思います。


では、実際に使って見ましょう⇒ここをクリック

【画像の表示・配置】@イラスト画像の回り込み「右」或いは「左」


画像を使った回り込みを学びます。
最初にフリーの画像を自分のパソコンにダウンロードしていたものを、Seesaaに画像のアップロードをして追いましょう。(アップロードの仕方についてはSeesaaの説明を参考に行なってください)もちろん自分で創られた画像でもかまいませんよ。

Seesaaブログを前提に説明しますが、他者の運営するブログでも同様に行なえます。参考にしてください。

画像に対してのブログへの挿入は次のようなHTMLが基本です。

<IMG src”@” border=”A” align=”B”>
@は表示させるイメージファイルのURL
Aは画像と回り込むテキストとの境界線を定めます。この場合必要ないので、”0”とします。border=”0”それ自体が回り込みの領域を規定させているようです。画像全体を回り込ませる要素があるようです。
Bはleft、rightと入れて、テキストを回りこませる方向を指示します。
では、実際に使って見ましょう⇒ここをクリック

2012年03月19日

【リンクE】イオナは大人のロハスを提案。オトナ「ロハスマガジン」読んで!読んで!!


いきなり、ホームページを開いて衝撃?

『ロハス美しさとは、体の力を信じること。内側から輝く力を身につけよう。IONAはオトナのロハスを提案します』


な、なんか気になりますよ、読み出したら止まらない、癒される感じも、抱いてしまいます。

リンク飛ばす:<A href=”@#A”>B</A>

リンク飛ばされる方に名前を:<A name=”A”> </A>

@;リンクしたいブログやホームページのURL
A;そのページのあるところに限定して飛ばすなら、A;名前をつけて
B;たいていは飛ばすところの紹介文
となります。
では、実際に使って見ましょう⇒続きをクリック

【リンクD】リンクボタンの上でヘルプとしてテキストの表示


皆さんご無沙汰しています。仕事が忙しくなり、久しぶりの、新作のHTMLです。

今日は、フリー画像から、引っ張ってきて画像にアイコンを持っていくとテキストを表示させる練習です。

フリーの画像は、googleなどで、
フリー画像 無料検索


などと検索して、フリーの画像をいったん自分のPCに画像を保存して、ブログサイトにアップロードしてください。

そすれば、準備完了です。HTMLの入れ方を練習してみましょう。
<CENTER>〜</CENTER>で中央ぞろえにしています。
<A href=”A#@”(半角空き)title=”B”>C</A>
A・・・任意のリンクのURL
@・・・そのリンク内のアンカー名;リンク内の飛ばしたいところにアンカー名を入れておくこと《復習してね》
B・・・表記したいテキスト(今回は友人のブログのある日のタイトルをテキストにしました)
C・・・アップロードした画像のHTML(seesaaブログの場合;ファイルマネージャーをクリック⇒Cのところにカーソルを置いて、任意の画像のHTMLの項の緑の四角形のコピーをクリックするとHTMLが入ります)

すると・・・
では、実際に使って見ましょう⇒続きをクリック

【リンクC】今日はフリーの画像にリンクを設定してみよう!


今日はフリーの画像にリンクを設定してみます。
まず、フリーの画像を手に入れてください。検索で、「リンクボタン フリー」や「画像 フリー」などと入力して、自分のパソコンにコピーアンドペーストします。
Seesaaですと、右の「ファイルマネージャー」をクリックしてください。そのファイルに画像アップロードします。参照をクリックすると自分のパソコンの階層が表示されますので画像の保存してあるところを開いて、アップロードする画像を選択し「開く」クリックして『アップロード』をクリックすると準備完了です。

記事ページの下の、「灰色のファイルの絵」をクリックすると画像が確認できるはずです。それを利用します。

<A href=”@”>A</A>
@はリンクするURLを入れます。
Aはファイルマネージャーにある画像をコピーします。
では、実際に使って見ましょう⇒ここをクリック

【リンクB】今日は違うページの指定箇所へのリンクを練習しましょう!


今日は違うページへのリンクの張り方を練習してみます。

リンクを使うのは、同じページ内でリンクをはって戻ったり、進んだりして、読者に快適に読み進めてもらうために同じページ内でリンクを張ります。もちろん今から練習するように、違うページにリンクして、目的のところに飛ばしてあげることもできます。練習しましょう。

<A href=”A#@”>C</A>
<A name=”@”>B</A>
一行目はリンクを張って飛ばしたいところに置くHTMLです。
@は任意のキーワード(アンカー名;と言います)
Aはアンカーを設定した(B)ページのURL(要するに、http://・・・・○○○○.html)同一ブログなら(○○○○.html)でOK
Cはリンクを設定する内容(文字やイメージ)
二行目はリンクを張って飛んで行くところに張っておきます。
Bアンカーを設定する内容(文字やイメージ)となります。

<A href=”A#@”>C</A>
<A name=”@”>B</A>
一行目はリンクを張って飛ばしたいところに置くHTMLです。今回は4月12日の記事にリンクします。記事一行目の(表組)に
@はアンカー名として「hyou」
として
Aは4月12日ブログ記事のURLを入れました○○○○.html
Cはリンクを設定する内容は、『テーブルのセルの余白設定の練習へリンクします。』とします。
二行目はリンクを張って飛んで行くところにつまり、
B4月12日ブログ記事の(表組)のところ記事ページに・・・<A name=”hyou”>(表組)</A>・・・と入れておきます。
では、実際に使って見ましょう⇒続きをクリック
ラベル:リンク 別ページ

【リンクA】今日は同じページ内でのリンクの張り方を練習します。


今日は同じページ内でのリンクの張り方を練習してみます。

同じページ内でリンクをはって戻ったり、進んだりして、読者に快適に読み進めてもらうために同じページ内でリンクを張ります。

<A href=”#@”>A</A>
<A name=”@”>B</A>
一行目はリンクを張って飛ばしたいところに置くHTMLです。
@は任意のキーワード(アンカー名;と言います)
Aはリンクを設定する内容(文字やイメージ)
二行目はリンクを張って飛んで行くところに張っておきます。
Bアンカーを設定する内容(文字やイメージ)
となります。
次に記事をしばらく書いて、上のHTMLを使ってみます。

テレビで話題になった「フキ農家のみなさんが花粉症になっていない」フキの中に含まれるポリフェノールが効いている。
・フキノール酸
・スキテルペン配糖体
・フキノン
が含まれており抗アレルギー作用を示し、花粉症やアトピー性皮膚炎にとても良いそうです。フキ1000kgからなんと1kgしか作れない!とても貴重なものです。
【フキエキス粒】某テレビ番組で「フキ」が花粉症撃退食品として取り上げられました!蕗が良いといっても毎日食べるのは大変。フキの名産地・愛知知多産のフキからフキエキスを高濃度抽出してサプリメントにしました。【これこれ倶楽部】

【フキエキス粒】

気になる方は⇒クリック



この記事を、もう一度読みたい方は、『こちらをクリック』してください。
ここで使ってみます。
<A href=”#@”>A</A>
<A name=”@”>B</A>
一行目はリンクを張って飛ばしたいところに置くHTMLです。
@はアンカー名として「ytyt」として
Aはリンクを設定する内容は、上の『こちらをクリック』
二行目はリンクを張って飛んで行くところに
Bアンカーを今日の一行目の「今日」としました。よって、とんだ際に画面の一番上が今日の見出しになっています。
では、実際に使って見ましょう⇒続きをクリック
ラベル:リンク ページ内

【リンク@】今日からリンクの表示について練習してみましょう!


リンクとは、文字やイメージをクリックすると別のページや、別のサイトを表示できる機能です。今までも、皆さんにたくさんクリックしていただいて、移動していただきました。しばらくその方法を練習してみましょう。

下の「太」からはじまるボタンの左から3番目がリンクを簡単に設定できるボタンです。クリックすると、エクスプローラーユーザープロンプトのウインドウが開き、『http://』が表示されます。その後に移動してお見せしたいページやサイトの住所となるURLを入力すると、ブログの読者が、一目でクリックすることを促せるようになっています。

それでは、ためしに、昨日の記事にリンクしてみます。
「そのままも使えるHTML塾開講!12月8日」として、「」の間を範囲指定して下のボタンをクリックし、『http://の後に昨日の記事のURLを貼り付けました。今見ていただいているのには、ブログ名に水色の下線が入ってリンクされていることがわかるようになっています。

一度クリックして見てください。昨日の記事にリンクしています。「左上の『戻る』で、戻って来てくださいね。」

本来の設定の仕方は次のようにHTMLを入力します。
<A href=”@”>A</A>となります。
@はリンク先のURL
Aはリンクを設定する内容(文字やイメージ)となります。
では、実際に使って見ましょう⇒ここをクリック
ラベル:リンク

2012年03月18日

【テーブル】Lテーブルボーダーの色指定にチャレンジ。


テーブルのボーダー(境界線)に色を指定してみる練習をします。
各セルの色を同じ色で、指定する場合と、
各セルの上左と右下に分けて色を指定することができます。

色はカラーネームといって、色それぞれに6桁の数字とアルファベットを組み合わせて決められています。
seesaaの場合は、上の青いAのところをクリックすると色がいらべます。色番号もわかります。

最近のカラー例えばパステル色は利用できるサイトできないサイトがあるようですので、注意してください。

実際には下記のとおりにしてみました。

<TABLE border=”@” bordercolor=”A” align=”center”>
<CAPTION align=”top”>表のタイトル</CAPTION><TR align=”center” width=”320” hieght=”280”>テキストや画像</TD></TR><TR><TD>テキストや画像</TD></TR></TABLE>

@・・・border表組の境界線の幅
A・・・bordercolor境界線の色指定・・・今回はグレー系の色に

では、実際に作ってみましょう。
では、実際に使って見ましょう⇒続きをクリック


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。