私の自作HTML, My HTML
●さて
●#2は
●#5は
●#6は
●#7は2列の文章で
●#8は
●#9は
●
●3D効果をマウス動作で見せるcssアニメーション
Roman Cortes氏の遠近感あるcssアニメーション3D-Meninasを勉強し改変したものを作成。掲載の画像はすべてNew York Public Library所蔵のposterで使用は許可されている、感謝して使わせていただいた。古い雑誌の表紙は大変美しい。図にマウスを乗せて見る。
http://www.romancortes.com/blog/css-3d-meninas/
New York Public Libraryのサイトはhttps://digitalcollections.nypl.org/collections
●3D効果をマウス動作で見せるcssアニメーション 続編
これは2階から1階へ段々降りてきてポスターを見ている像である。美しい中の画像はNew York Public Library所蔵のposterで感謝して使わせていただいた。
New York Public Libraryのサイトはhttps://digitalcollections.nypl.org/collections
●3D効果をマウス動作で見せるcssアニメーション 究極版
これはマウス動作の左右に上下を加えたもので究極版である。htmlとcssで1MBの膨大な量の記載である。上の分の20個分であり、まさにmassive。よって多くの種類をアップすることはできない。マウスはゆっくりと動作を願います。
●カンが回転して動くcssアニメーション
カンが回転しながら左右を移動する。画像の上の
http://www.romancortes.com/blog/pure-css-coke-can/
続編の回転霞カンへ
●立ち位置を動いて対象を見るcssアニメーション
位置を動いて対象を見ている像なので、やや立体的にみえる。外枠は撮影して中央を透過にしたもの。上の
●cssアニメーションで面白いもの
15ピースの丸が転がってきて拡大し丸で右に転がってて出る。chrome、firefoxはok。IEは転がらない、全体的にIEにはrotateに弱みがある。
●#1. 私のHTMLとCSSの始まり
別のことで検索中に偶然HTMLを自作する方法をあるサイトから教わった。解りやすく書かれており簡単にできた。それが始まりであった。下がそれを少し変えたhtmlである。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="style.css" rel="stylesheet" type="text/css"> <title>HTML and CSS-Test</title> </head> <body> <h1>HTML and CSS-Test</h1> <div id="box-one"> <p>This is box one.</p> </div> <h1>Header (This is h1.)</h1> <h3>Header (This is h3.)</h3> <p>This is our first sample paragraph. </p> <div id="box-two"> <p>This is box two.</p> </div> </body> </html>
上記を下の如く
下の画面が出ていると思う。
やった！初めての自作HTML完成である。これをサーバーに上げれば世界中に発信できる。
＜ CSSを作ってHTMLにつなげる ＞
CSSとはHTMLのそれぞれの要素（<div>や<p>）の中の字や背景に色を付ける。また中央に寄せるなどするスタイル作りのテキストである。
h1 {
color: orange;
text-align: center;}
#box-one {
background-color: grey;
color:white;}
#box-two {
background-color: pink;
padding: 5px;}
上記を下の如くコピー、ペーストしてstyle.cssを作る。保存の時に
下の画面が出ていると思う。これで初めての自作HTMLに自作CSSの完成である。文章もあるし、なかなか綺麗である。CSSでスタイル付けすると見栄えがするね。
これに書き込んでウェブサイトを見たらにっこりできるものにしてゆくことは楽しいことである。当面
＜ index.htmlとstyle.cssへ記入する方法 ＞
＜ index.htmlとstyle.cssの内容の意味 ＞
●html（左）ではtitleはページの名前。htmlで<div>や<p>に対し固有の名前を付る時は
●css（右）では#がdivやpの名前を意味する。
＜ サーバーへの上げ方での注意点 ＞
FFFTPというソフトは使いやすいと思う。こちらのフォルダを指定したらその
●#2. 画像の入れ方
ここから画像の表示方法の説明である。下をコピー、ペーストするとその下の画像が表示される。
<p><img src="https://live.staticflickr.com/4358/37111583025_a5eb128d22_o.jpg " width="90%" height="90%"></p>
下は
画像の外を
なおcssでは
●#3. 画像への文字の入れ方
画像に文字を重ねて表示する方法のhtmlの書式の実例。下の方8-9行目に<p> </p>で囲まれた画像imgがある。その上に
1行目の<div style="position: absolute; margin-top: 140px; margin-left: 80px; width: 400px;">はmargin-top: 140px;で
そして
もしposition: absolute;がなかったら、普通通りに画像は文字列の1番下を基準としてその下に来る。
<div style="position: absolute; margin-top: 140px; margin-left: 80px; width: 400px;"> <font size="5" color="yellow" >南竹 Nanchiku</font> <br><font size="2" color="pink">江戸時代の絵画、書、和歌、俳句、古文書</font> <br><br><font size="3" color="white">不明の人。作品は落款は梅谷閑人、印は羅浮道者。 羅浮は梅の精の意味。「中国広東省の羅浮山で男が芳香を放つ美女に会い、 酒を酌み交わしているうちに眠り、明け方目覚めると梅樹が1本あった」。</font> </div> <p><img src="https://live.staticflickr.com/4358/37111583025_a5eb128d22_o.jpg " width="90%" height="90%"></p>
さて上の2行目<font size="5" color="yellow" > </font>について。これは
3行目<br><font size="2"
同様に4-6行目<br><br><font size="3" color="white"> </font>の
文字の色とサイズはこのように部分的に簡単に変えられる。上をhtmlにコピー、ペーストすれば下のように表示される。
●なお<font> </font>は使用を示唆しないとするが誰もが使用しないと本気で消してしまうだろう。だからhtmlで便利なものは皆で使用して勝手に消されないように大いに使いましょう。
江戸時代の絵画、書、和歌、俳句、古文書
不明の人。作品は落款は梅谷閑人、印は羅浮道者。羅浮は梅の精の意味。「中国広東省の羅浮山で男が芳香を放つ美女に会い、酒を酌み交わしているうちに眠り、明け方目覚めると梅樹が1本あった」。
文字を画像に重ねることができ、表題の背景として画像が入ってきれいになった。文字列には左から80pxの余白があり、上から140pxの余白がある。文字のサイズは
最後にこの文字列＋画像を#1で作ったhtmlに嵌め込み、日本語で文を記入して実験して完成である。
●#4. 基本的html書式の完成
下が#3の文字列（青色部分）＋画像部分を#1で作ったhtmlの中に入れたものである。また「文字列＋画像」を中央寄せの緑色
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="style.css" rel="stylesheet" type="text/css"> <title>HTML and CSS-Test</title> </head> <body> <h1>HTML and CSS-Test</h1> <div id="box-one"> <p>This is box one.</p> </div><div align="center"> <div style="position: absolute; margin-top: 140px; margin-left: 80px; width: 400px;"> <font size="5" color="yellow" >南竹 Nanchiku</font> <br><font size="2" color="pink">江戸時代の絵画、書、和歌、俳句、古文書</font> <br><br><font size="3" color="white">不明の人。作品は落款は梅谷閑人、印は羅浮道者。 羅浮は梅の精の意味。「中国広東省の羅浮山で男が芳香を放つ美女に会い、 酒を酌み交わしているうちに眠り、明け方目覚めると梅樹が1本あった」。</font> </div> <p><img src="https://live.staticflickr.com/4358/37111583025_a5eb128d22_o.jpg " width="90%" height="90%"> </p></div> <h3>Header (This is h3.)</h3> <p>このページに文章、画像の書式のすべてが含まれています。 </p> <div id="box-two"> <p>完成html</p> </div> </body> </html>
#1に書いたようにして上をメモ帳にコピー、ペースト、index.htmlで保存する時、下の文字コードの部分の
indexをクリックすると下の画面が出ていると思う。画像も字も中央寄せになった。もし画像img部分だけを<div align="center"> </div>で囲めば
●下がstyle.cssである。cssは#1で作ったものに加えて見易く太字にするため、
●是非#3で学んだstyle="position: absolute; margin-top: 140px; margin-left: 80px; width: 400px;"のdivにid＝"好きな名前"を付けてcssに書き替えて指定する練習をしてみて下さい。下のcssの#
●これで<p> </p>や<div> </div>で囲った文章や画像を重ねてゆき、世界中に発信する準備は整いました、まず一歩踏み出しましょう。
h1 {
color: orange;
text-align: center;}
#box-one {
background-color: grey;
color:white;}
#box-two {
background-color: pink;
padding: 5px;}
body {
font-weight: bold;}
●#5. position:absoluteのブロックとmargin-leftで位置付け
absoluteとstaticの要素の文章に背景色を付けてその位置をmargin-left, margin-topで指定した。
そして大切なことはabsoluteの要素の
1-8まで順に要素中の文章を読んでほしい。なお
margin-top:400px;
margin-left:600px;
width:300px;
padding:20px;
absoluteで左上角基準からの距離（余白）が上400px、左600pxである
margin-left: 200px;
width: 300px;
１がabsoluteなので右下にある１の下には付かず 上にある文章の下端に付く
width:300px;
opacity:0.4;
２の下端に付く opacity:0.4;にて７の元色より黒字と空色が大分薄い
margin-top:10px;
margin-left:610px;
width:350px;
opacity: 0.6;
２の下端よりmargin-top:10px;で10pxの余白を作った opacity: 0.6;は字は３よりは濃いが７より薄い
margin-left:350px; width:250px;
３と４がabsoluteなので無視して２の下端に付く
margin-left:340px;
width:250px;
color:white;
これは５の下端に付く 字は白
空色#b2dfee; margin-left: 25px;
width: 180px;
６の下端に付く
margin-left:230px;
width:300px;
color:white;
opacity:0.5;
７はabsoluteにて８は６の下端に付く 字は白 opacity0.5で背景の茶色は薄くなるが白字には効かぬ 白を白で薄めても不変
なお上をleft、topで位置を指定する方法ではご存知のようにabsoluteがページの先頭あたりにすべて飛んでしまうし、またstatic（position無指定）は位置は指定できずすべて左端に貼付く。下がhtmlで１から８まで上から下に順に記入している。このようにmargin-left, margin-topで位置付けすればrelativeの親divでの囲みはなしで崩れない。
<div style="position:absolute; background-color:#66cdaa; margin-left:600px; margin-top:400px; width:300px; padding:20px;"> １要素</div> <div style="background-color:#ff00ff; margin-left:200px; width:300px;"> ２要素</div> <div style="position:absolute; background-color:#b2dfee; margin-left:10px; width:300px; opacity:0.4;"> ３要素</div> <div style="position:absolute; background-color:#b2dfee; margin-left:610px; margin-top:10px;width:350px; opacity: 0.6;"> ４要素</div> <div style="background-color:#fff9bf; margin-left:350px; width:250px;"> ５要素</div> <div style="background-color:brown; color:white; margin-left:340px; width:250px; opacity:0.6;"> ６要素</div> <div style="position:absolute; background-color:#b2dfee; margin-left:25px; width:180px;"> ７要素</div> <div style="background-color:brown; color:white; margin-left:230px; width:300px; opacity:0.5;"> ８要素</div>
●#6. 2列の文章をposition:absoluteとmargin位置付けで作成
上の#5を応用して2列の文章を作った。
それにしても古文書解読は面白い。多様な江戸時代の文書を読み、サイトに上げる時は一段深い考察、記載を要求されるので大変学習になる。この学習は自発的なものなので楽しい。人の精神的な健全さには時間を忘れて熱中できるものが必要であると思う。ホームページを構成し発展させるのもその対象のひとつである。
<div style="position: absolute; background-color: #e0f2f8; margin-left: 450px; width: 420px; padding: 10px;">absoluteのブロックで右側の文章を記載する。 </div> <div style="background-color: #e0f2f8; width: 420px; padding: 10px">staticのブロックで左側の文章を記載する。こちらの文章を右より長くする。 </div>
●#7. 2列の文章：absoluteのspanは賢い、指定なしで親に収まる
これは
●inline-blockは他の代替法がなく、
●これは
●
●
<div style="position: relative; border: 3px solid grey; background-color: #e0f2f8;"> <div style="width: 48%; display: inline-block; padding: 10px; " >staticのブロックで左側の文章を記載する。こちらの文章を右より長くする。 </div> <span style="position: absolute; padding: 10px;" >absoluteのspanで右側の文章を記載する。このように他のスタイル指定は無。 </span></div>
●#8. 画像と右に文章：absoluteのspanは賢い、指定なしでちゃんと収まる
これは#7の左側を画像に変えたもの。
江戸時代の絵画、書、和歌、俳句、古文書
<div style="position:relative;"> <img src="https://live.staticflickr.com/4362/36049844493_da3cf2a085_o.jpg " width="60%"> <span style="position:absolute; padding:10px; background-color:#f9f4bb;"> 不明の人。作品は落款は梅谷閑人、印は羅浮道者。羅浮は梅の精の意味。「中国広東省の羅浮山で 男が芳香を放つ美女に会い、酒を酌み交わしているうちに眠り、明け方目覚めると梅樹が1本あった 」。幕末頃の茶人ではないか?<br>江戸時代の絵画、書、和歌、俳句、古文書 </span></div>
上に戻る BACK TO TOP
●#9. 3列の文章、static1本とabsolute2本で作った。
3列の文章をstatic1本とabsolute2本で作った。幅が270px、padding:10pxなので総幅は290pxになる。これを300pxづつ離している。つまり左はmargin-left:0px;でstatic、中はmargin-left:300px;でabsolute、右はmargin-left:600px;でabsoluteである。以上単純な指定である。背景に別々に色を付ければ華やかで綺麗になるね。
彦根の母から彦根藩領世田谷代官所勤務の明塚半蔵への返事の手紙。長い手紙なので要点だけ記す。「当方元気です。金太郎もゆっくり歩くようになり達者です。金太郎へのかたびら（帷子）よい絣模様ですね。早く仕立てて着せたいです。お菓子のらくかん（落雁）に金太郎もたいへん喜びます。じばん、足袋、ねまき送るようにとのこと承知しました。最近は御地同様に蚊もめっきりと出るようになって困ります。
彦根の母より彦根藩領世田谷代官所出張の武士明塚半蔵への長い手紙。「先便にて金子届きました、御礼申上ます。およしも内股に腫物（しゅもつ）ができ肛門のきわにも出たので西沢道安様にかかりましたが痔瘻というもので、内股は腫物（しゅもつ）ですとのこと。服薬、膏薬をもらいましたが同じく痛みます。大変困りました、近々には治らず長引きます。全身の気分が悪くないので心配はないとのこと。それで申上ませんでした。
雨森甲介から明塚半蔵への手紙。内容は複雑なので図に解説した。雨森氏は藩士の過料（あやまち金）を徴収する役の武士である。昨年末12月までに埒明（解決）せず残っていた過料を明塚氏、さらに小堀氏（彦根藩伊賀歩行衆の頭）と上司を介して徴収していることがわかる。1人目伊賀歩行衆の杢（もく、名前）の過料の話がほとんどである。別の未納者、高野瀬信介氏の分は相部屋の横田層九郎氏が納め埒明した。<div style="position:absolute; background-color:#71e2bc; padding:10px; margin-left:300px; width:270px; opacity:0.8;">absoluteで中央の文章である。margin-left:300px; width:270px; </div> <div style="position:absolute; background-color:#b2dfee; padding:10px; margin-left:600px; width:270px; opacity: 0.8;">absoluteで右の文章である。margin-left:600px; width:270px; </div> <div style="background-color:#fff9bf; padding:10px; margin-left:0px; width:270px; opacity: 0.8;">staticで左の文章である。margin-left:0px; width:270px; </div>
御覧いただきありがとうございました。Thanks for your visit.