学習のページ

（１）HTML文書の編集

My Noteの開発の当初は絵的なイメージ図が描ければ文章の方はベタ書きメモ程度のもので良いと思ってましたが、メモとして書き残したものをレポートや報告書としてアピール力のある文書に編集する機能が必要だと思いました。また、自身のホームページなどを何度も立ち上げたりして来たのですが、その時に必要なHTML言語やホーページを作成するツール類などがが苦手で多様なタグ類やスタイルシートの使い方など覚えることが多くて、暫く使わないと忘れてしまって学び直しを繰り返してやっと使っている状況なのです。Svg言語を意識せずに図を描くような仕組みを考えたと同様にHTML言語を意識せずにHTML文書が書けるにはどうしたら良いか、基本的なことさえ理解したら数多くのタグ類やタグを装飾するスタイルパラメータを覚える必要なく、簡単に使えるものに出来ないものかと考えてみました。HTML文書の本文を書くのに必要と思われる最低限のタグに絞り、まずはディフォルトで文書の構成・骨格をを決めることとし、文書を飾り付けるスタイルの設定は後で変更する方式を採用することとしました。また、仕上がりを見ながら編集できるWYSIWIG（ウィジウィグ＝What You See Is What You Get）型のものを試みています。さらなる簡単化を目指して自分のスタイルが決まったら文書スタイルをレシピとして登録出来るようにすることやメニューなども英語版メニューや自分好みのメニューなどが作れるようなことも試みています。以下でMy Noteでの文書作成の考え方や編集方法について具体的に説明致しますが、My Noteを試してみることで、HTML文書への理解が深まり、多少ともWeb世界へのハードルが低くなったと思って頂けることを期待致します。

（２）My NoteのHTML文書編集の基本

左の図１．は一般的なHTML文書作成のイメージを示すものですが、HTML文書ではタグと呼ばれる文書上に区分的な名札付けを用いて出来上がりの画面なり印刷用紙上に分割配置していくことで文書は出来上がります。 文書の下方向への積み木を積み上げる作業だと考えたら簡単に思えてくると思います。HTML言語には数多くのタグが定義されていますが、My Noteでは必要最低限のタグに絞り込んで組み込んでいます（不足するものがあれば随時追加する予定です）。HTML文書を作成する場合には最初に出来上がりのドキュメントとしての骨格や構成を決めていく場合や大よそ出来上がってる文章を中心に写真や図などの素材を配置しながらドキュメントとしての体裁を整える場合などあろうかと思いますが、
My NoteではHTML文書作成の要点を以下の２項目とし
・最初に構成・骨格を決める（Html_Design画面）
・文書の体裁は最後の段階で決める（Html_Design付属のStyle設定)
の順番に進めていけるように操作の画面メニューをそのような構成としています。以下順次操作について具体的に説明致します。

①WebDesign(Html_Designポップアップメニー)の紹介
「表示のみ」から「文書の編集」を選び編集モードにした状態でどこでも良いので文の一部を選択状態にして（文の一部をマウスでDragして青色の状態にする）画面下のメニューでWebDesignをクリックすると図2.のHtml＿Designが現れます。さらに選択した文の一部を含む一群の下側にGreen Lineが現れます。実際にこの場で確かめて見てください。例えばこのページの先頭にある見出しの「文書（HTML）の編集」の一部を選んで画面下のメニューから「WebDesign」を押して下さい。Html_design画面と同時にGreen Lineが現れたと思います。次に見出しの下の文章の一部を選んだ状態で同じことをやって見て下さい。ページのどこの文でも良いので次々に同じことを繰り返して見て下さい。この時Html＿Designのポップアップ画面が邪魔して見たい部分が見えない場合はHtml＿Designの見出し部分をDragして移動させることが出来ます。このようにMy Noteでの文書編集作業は文の一部を選択してWebDesignメニューをクリックすることの繰り返しなのです。このGeen Lineが編集の現在地を示す道しるべとなり、これから説明するタグの挿入はGrren Lineの後ろに配置されることになります。

　　

図２.Html_Designポップアップ画面

図3.Html_Design画面でのタグの挿入

左の図2.がHtml_Design画面ですが、大雑把に説明しますと、
・先頭行のtag、Level。figは現在のGreen Lineで示すタグ領域の情報を示しています。タグ名は何か（図2.ではタグＰ＝段落）、Topレベル０に対してタグの階層（図2.ではLevel=1　階層については別途解説）であるか、figはタグの別名を示しています。
・green off はテンポラリーにGreen Lineをoff／onする機能です。
・その下のcopy／pasteボタンは現Green Lineが示す領域をStyle情報を含めてc opyし、pasteではcopyした一群をGreen Lineの後ろに貼り付けます。Green Lineを別の場所に移動後pasteすることもできます。また、別のドキュメントでcopyした領域をpasteすることも可能にしています。
・svg_divはDIV領域中に図形領域を設定するものでが、別途説明します。
・delボタンはGreen Line領域を削除します。
・追加タグについてはこの後詳しくのべます。
・style登録とstyleレシピは現在開発中で近々公開予定です。
・最下段の４つの矢印↑← →↓ はGreen Lineの階層間移動用のボタンですが、普段は文の選択とWebDesignボタンで移動したら良いのですが、DIV中に埋め込んだ絵写真(photo）にGreen Lineを移動する場合、例えば　　図２.Html_Designポップアップ画面の上のphotoに移動する場合は図２.Html_Designポップアップ画面の文の一部を選択しGreen Lineを移動後 ← にてphotoに照準を合わせる必要があります。↑は上の階層への移動、←は手前の兄弟要素への移動、→は下の兄弟要素への移動、↓は子要素があれば最初の子要素に移動します。
・追加は追加タグの項で選んだタグを追加するものですが、この後詳しく説明します。
・最後のstyle表示のボタンは現在のGreen Lineが示すタグに関してのStyleにどんなパラメータ（属性）が設定されているかを確認したり、異なる属性に変更する場合に使用する４つのStyle画面から構成されています、これも別途説明する予定です。

②新規タグの挿入
追加タグのリストから何れかを選んで追加ボタンを押すことで新たなタグを作成することができますが、最初に述べたように文書の骨格・構成を決めるタグは大枠（DIV)、横小枠（flex）、縦小枠（colmn)の３つのタグが基本で骨格型（私の勝手な呼び名)。箇条書(ui_li）、数列挙(ol_li)、見出し（Hx）、段落（P)、テーブル(tbl)、メニュー（navi)は中間型、そして絵写真(img)、強調(span)、ボタン(a)、リンク(a)、Icon(i)は文章の一部を飾り付ける役目の修飾型（これも私の勝手な呼び名）の３種類のタグに分けて骨格型を使って文書の構成を決め、中間型を使って各種の文型を作り、最後に修飾型を使って細部を飾り付けたら文書が出来上がる。と考えるとHTMLへの理解がしやすいのではないでしょうか。追加タグリストの中で取り上げていないSVG in divとstyleレシピの2つはMy Note独自のもので少し特殊ですので別途の説明とさせて下さい。

③骨格型タグの作成
具体的に骨格型タグの大枠(DIV)、横小枠(flex)と縦小枠(colmn）を作成して見ましょう。この行を一部を選んでWebDesignをクリックして下さい。そうすると既に説明したようにHtml＿Design画面とGreen Lineが現れます。ここで大枠DIVを選んで追加ボタンを押して見てください。

 その結果下側にGreen Lineが付いた行半分の横幅をもつ矩形（四角形）が現れ、「DIVタグ＆Pタグを挿入しました。」の一文を含んでいます。ディフォルトではこのように定義されているからです。また、この大枠DIVは左寄せで右側には文章が回り込めるように定義されていますので大枠DIVの右側の領域に文章を書き込めるようになっています。すでに大枠DIVの下側にすでに文章があれば文章の初めにカーソルを置いてBS（BackSpace）を打ち込むと大枠DIVの右側に文章が回り込んで来ると思います。ここでEnterキー（又はReturnキー）を押して下さい。

文書編集実践①でも述べたようにEnterキーは新しい段落をつくるのと同じ働きを持っていますので上の文章の一群とは間隔が少し離れた新しい文の一群になりました。上の段落の下に今度は横小枠(flex)を作りましょう。大枠(DIV）を作った時と同様に上の段落の文の一部を選んでWebDesignをクリックした後、Html_Design画面の追加タグで横小枠(flex）を選んで追加ボタンを押します。３分割の横小枠が現れたと思います。更にここで新たに段落をつくって縦小枠（colmn）を作って見てください。

上のように縦小枠（colmn）が作られましたか。このようにして文書の骨格を構成して骨格の中にも骨格の外側にもタグを作成したり文章を打ち込んだりしながら文書を作り上げて行きます。このページの上の方にある図1．図２.図３.は大枠（DIV）を作成した中に絵や写真を挿し込んだ例でもあります。次の文書の編集（２）では骨格の中にも新しいタグを追加したり、更には作成したタグへの飾り付け（Styles設定）について具体的に説明したいと思います。

新規の段落です。

新規の段落です。