FC2ブログ
111234567891011121314151617181920212223242526272829303101

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--------(--) |  スポンサー広告 |  CM(-) | Top▲

Image Composite Editor

クロスバイクを駆って、と威勢よくは行きません。緩い傾斜の上り坂をモッサリ、モッサリ漕いで上発知のヒガンザクラまで青息吐息、やっとの思いでたどり着きました。帰り路は下りですので、爺でも駆る勢いです。気をつけなくては。
上発知のヒガンザクラから4km程戻った所に観音寺があります。18日は観音様のご縁日ですので、銀輪安全やら家内・家外安全の祈願にお参りしましょう。
境内に「ほほゑみ十二観音(十二支)」が半円状に鎮座なさってました。私のカメラでは1カットに収められませんので、中央付近から3カットに分けて撮らせていただきました。これを Microsoft の Image Composite Editor でパノラマにしてみましょう。なんと4ステップ、数回のクリックだけで出来るようです。

Step1 Image Composite Editor を起動し、上部メニューの「New Panorama From Images」をクリック。開いた Select overlapping images ウィンドウで合成する画像を選択して「開く」ボタンを押す。
スタートの画面

Step2 右カラムの Simple panolama が選択されているのを確認し、上部メニューの「2STITCH」をクリック。数秒で合成される。
合成する画像の読み込み画面

Step3 右カラムのProjectionメニューから合成パターンを選択して(例題は初期値のCylindricalのまま)上部メニューの「3CROP」をクリック。
合成の画面
続いて、矩形にトリミングする。右カラムの Image completion メニューから「Auto complete」ボタンをクリック。
矩形にする画面
合成の完了。

Step4 上部メニュー「4EXPORT」をクリック。右カラムの「Export to disk...」ボタンをクリックして保存。
保存の画面
パノラマ画像の保存ファイル形式はJPEGが初期値だが、File formatのプルダウン・メニューでフォーマット形式を変更できる。

キモは画像の重なり部分を広く撮ること。私のような雑なカット向きです。
次は「沼田河岸段丘」を大パノラマするぞq(^ ^)p

スポンサーサイト
2015-04-18(土) |  情弱な翁(PC) |  コメント(0)  | Top▲

CSS事始め 6

float(回り込み)

「HTML 5」で記事に画像を埋め込みました。この画像に文字の回り込みをCSSのfloatプロパティで設定します。

<p>延元3年(1338)新田義貞が越前で亡くなり、三男の義宗が嫡嗣として扱われて越後に匿われました。<br>
義宗は、長じて越後・関東に於いて南朝方に与し足利尊氏に挑みます。一時は鎌倉の奪還を果たしますが、忽ち劣勢に追い込まれてしまいます。<br>
<img src="uri/css6__utsubushi.jpg" alt="白佐波神社本殿" style="float: left; width: 160px; height: 120px;" />正平23年(1336)二代将軍足利義詮と初代鎌倉公方足利基氏の死を機に、再び鎌倉を討たんと決起します。七千の兵を率いた義宗と、その鎮圧に向かった足利方上杉憲正將・能憲軍六万が沼田台地で激戦を繰りひろげました。義宗は、この戦いで右眼を矢で射ぬかれ、俯せ(うつぶし)に落馬して最期を遂げました。<br>
地元の民は、義宗の霊を「うつぶし明神」として祀り、かの地を「うつぶしの森」と称して伝えてます。<br style="clear: left;" ></p>


回り込みをさせたい文字列(あるいはオブジェクト)の直前に<img>を置いて、style属性にfloatプロパティを追加します(行番号10)。floatのプロパティ値は、"left"、"right"、"none"の三つで、初期値はnoneです。ちなみに、noneはfloatを解除することではなく、floatしないという意味です。実際にnone値を明示的に使う場面は、ほとんど無いと思います。
floatを「回り込み」の設定と表現してきましたが、実はfloarの意味の通り、"画像(オブジェクト)"を左右どちらかに浮動させるプロパティなのです。結果として、後に続く文字列なりオブジェクトが回り込むということです。
floatプロパティの影響を排除、つまり「回り込み」を解除する属性値(CSSのプロパティ)が"claer"です。解除させたい要素の開始タグにstyle属性で設定します。claerのプロパティ値は、"none"、"left"、"right"、"both"の四つで、初期値はnoneです。
例題のように、回り込みの解除を必要とする要素が続かなければ"clear"をする必要はないのですが、多くのCSSの解説ではfloatは必ず解除しましょうとなっていますので、私も記事の最後に改行タグ<br>を付けて"clear"を設定しています(行番号11)。今まで、HTMLやCSSをできるだけシンプルにと主張に反するようですが、ブログなどでは想定外のオブジェクトがfloatの影響を受けてレイアウトが崩れることもありますので、無用と思われても"claer"しています。

2014-05-31(土) |  情弱な翁(PC) Home Page事始め |  コメント(0)  | Top▲

HTML事始め 5

画像を配置

テキスト(文字)だけだった記事に画像を配置しましょう。画像は、絵文字の一種と捉えると分かりやすいかと思います。配置する画像がある場所(フォルダー)と画像のファイル名を文章の任意の位置に記入して、ブラウザに表示してもらいます。

正平23年(1368)二代将軍足利義詮、初代鎌倉公方足利基氏の病死を機に、再び鎌倉奪還をと決起します。七千の兵を率いた義宗に、これを鎮圧せんと寄せ来る足利方上杉憲正將・能憲軍六万の兵が沼田の台地で激戦を繰りひろげます。義宗は、この戦いで右眼を矢で射ぬかれ、うつぶし(俯せ)に落馬して戦死。ここに新田氏は実質的に滅びました。
地元の民は、義宗の霊を「うつぶし明神」として祀り、かの地を「うつぶしの森」と称して伝えてます。

白佐波神社本殿
「うつぶしの森」白佐波神社の画像を上の記事に配置します。場所は最後の行の"「うつぶしの森」…"の前です。

地元の民は、義宗の霊を「うつぶし明神」として祀り、かの地
<img src="http:// URI /HTML5_utsubushi.jpg" alt="白佐波神社本殿" style="width: 160px; height: 120px;" />
を「うつぶしの森」と称して伝えてます。


タグは終了タグはありません。src(ソース)属性の値に画像データの保存先を、alt属性に画像が表示されなかった場合の代替文字を記入します。width、heightの値を指定しておくことで、画像が表示それなかった場合に、記事のレイアウトの崩れを防ぐことができます。
さて、行中に画像を配置したレイアウトはブラウザの表示幅によって位置が変わってしまいます。そこで画像は、多くの場合行間に配置されます。タグの前後に改行タグ
を入れてみます。

地元の民は、義宗の霊を「うつぶし明神」として祀り、かの地<br>
<img src="http:// URI /HTML5_utsubushi.jpg" alt="白佐波神社本殿" style="width: 160px; height: 120px;" />
<br>を「うつぶしの森」と称して伝えてます。


文字列、画像、文字列と層を重ねたような、かつてはよく見られたレイアウトです。

2014-05-25(日) |  情弱な翁(PC) Home Page事始め |  コメント(0)  | Top▲

CSS事始め 5

color(表示色)

CSSのプロパティcolorは、文字の色だと思われがちですが少し違います。また、CSSの所以たる"プロパティ値の継承"という性質もあります。
プロパティcolorは表示色と言い、その値は要素の内容に適用されます。CSS事始め 4のHTMLソースのp要素(行番号8)にcolorとborderの線種を以下のように指定してみます。(記事の文章は一部省略)

<h1 style="width: 400px; height: 60px; background-color: #ffc; font:bold larger serif;">うつぶしの森</h1>
<p style="color: #00c; border: solid; width: 400px; height: 240px; background-color: #ffc;">延元3年(1338)新田義貞が越前で亡くなり、…<br>
義宗は、長じて越後・関東に於いて南朝方に与し…<br>
正平23年(1336)二代将軍足利義詮と初代鎌倉公方足利基氏の死を機に、再び鎌倉を討たんと決起します。<span style="width: 60px; height: 60px; background-color: #cfc;">七千の兵</span>を率いた義宗と、その鎮圧に向かった足利方上杉憲正將・能憲軍六万が沼田台地で激戦を繰りひろげました。義宗は、この戦いで右眼を矢で射ぬかれ、俯せ(うつぶし)に落馬して最期を遂げました。</p>


colorの初期値は"黒"ですので、指定をしてない要素h1の文字色はになってます。要素pは、colorに値"#00c"(青色)を指定しましたので文字が青色です。要素pの子要素spanにはcolorを指定してないのに、黒ではなく青色になってます。また、要素pにはborderにプロパティ値"solid"のみの指定で文字と同色の枠線が表示されましたが、子要素spanには枠線が表示されていません。
そこで、要素spanにも同じように線種を指定してみます(行番号10)。

正平23年(1336)二代将軍足利義詮と初代鎌倉公方足利基氏の死を機に、再び鎌倉を討たんと決起します。<span style="border: solid; width: 60px; height: 60px; background-color: #cfc;">七千の兵</span>を率いた義宗と、その鎮圧に向かった足利方上杉憲正將・能憲軍六万が沼田台地で激戦を繰りひろげました。義宗は、この戦いで右眼を矢で射ぬかれ、俯せ(うつぶし)に落馬して最期を遂げました。</p>


インライン要素のspanにも枠線が表示されましたね。線の色は、親要素pで指定した"青色"です。colorのプロパティ値は指定した要素(この場合p)が内包している要素(span)にも引き継がれてます。colorは、継承されるプロパティなのです。線の色の初期値は、color値です。しかし、borderのプロパティ値solid(線の形状)は継承されません。同様に、プロパティborder-color(線色)も継承されません。なお、pとspanの線の太さがが同じなのは継承されのではなくて、指定をしてないので初期値medium(3px)が適用されてるからです。
ちょっとややこしいですが、線を表示するためには、"太さ(border-width)・色(border-color)・形状(border-style)"のプロパティ値が必要です。それぞれの初期値は、"太さ:medium・色:color・形状:none"です。形状(border-style)を指定すれば、表示色(color)で太さ3pxの線が引かれるわけです。これらは、継承されません。子要素spanの線色が親要素と同じなのは、border-colorが初期値であるcolor(表示色)なので、親要素pのcolorプロパティの値#00cを継承したからです。
CSSプロパティの初期値と継承性を効率よく利用してスリムなCSS設定をすれば、HTML書類が読みやすくなり、ブラウザの処理速度も上がります。

2014-05-06(火) |  情弱な翁(PC) Home Page事始め |  コメント(0)  | Top▲

CSS事始め 4

background-color(背景色)

地の色を"背景色"と言い、CSSのプロパティbackground-colorで要素ごとに設定します。背景色に対して文字や線などの色を"表示色"と言います。プロパティは、foreground-colorと予測してしまいそうですがハズレです。colorなのですが、少しややこしい事情がありますので背景色を先に取り上げます。
背景色を指定しなければbackground-color値(初期値)は"transparent"、透明になります。白のような印象を持ってしまいそうですが、それは多くのブラウザが地の色を白にしているからでしょう。背景色は要素全体に施されますので、CSSのボックスモデルとHTMLのブロック要素、インライン要素の違いも見ていきましょう。
bodyの幅を固定して、h1、p要素の背景に黄、span要素の内容"七千の兵"語句の背景に緑を設定します。

<body style="width: 600px; border: 1px solid;">
<h1 style="background-color: #ffc; font:bold larger serif;">うつぶしの森</h1>
<p style="background-color: #ffc;">延元3年(1338)新田義貞が越前で亡くなり、三男の義宗が嫡嗣として扱われて越後に匿われました。<br>
義宗は、長じて越後・関東に於いて南朝方に与し足利尊氏に挑みます。一時は鎌倉の奪還を果たしますが、忽ち劣勢に追い込まれてしまいます。<br>
正平23年(1336)二代将軍足利義詮と初代鎌倉公方足利基氏の死を機に、再び鎌倉を討たんと決起します。<span style="background-color: #cfc;">七千の兵</span>を率いた義宗と、その鎮圧に向かった足利方上杉憲正將・能憲軍六万が沼田台地で激戦を繰りひろげました。義宗は、この戦いで右眼を矢で射ぬかれ、俯せ(うつぶし)に落馬して最期を遂げました。</p>


ブラウザで開くと、h1、p、spanの各要素の領域が矩形(ボックス)になっています。CSSは、このように要素の範囲をボックスに見立てます。width、heightを指定しませんので初期値のautoで、内容の量に応じて要素の領域が設定されています。なお、body要素の領域(幅600px)を視覚的に捉えるため枠線を設定しました。
ブロック要素であるh1、pとインライン要素であるsapnの違いを比べるため、。以下のように、要素にwidthとheightの属性値(CSSでは、プロパティ値)をしてみましょう。(記事の文章は、一部省略してます)

<h1 style="width: 400px; height: 60px; background-color: #ffc; font:bold larger serif;">うつぶしの森</h1>
<p style="width: 400px; height: 240px; background-color: #ffc;">延元3年(1338)新田義貞が越前で亡くなり、…<br>
義宗は、長じて越後・関東に於いて南朝方に与し…<br>
正平23年(1336)二代将軍足利義詮と初代鎌倉公方足利基氏の死を機に、再び鎌倉を討たんと決起します。<span style="width: 60px; height: 60px; background-color: #cfc;">七千の兵</span>を率いた義宗と、その鎮圧に向かった足利方上杉憲正將・能憲軍六万が沼田台地で激戦を繰りひろげました。義宗は、この戦いで右眼を矢で射ぬかれ、俯せ(うつぶし)に落馬して最期を遂げました。</p>


ブラウザ表示の画像を見ると、span要素に設定したwidth、heightが反映されません。ブロック要素とインライン要素の違いは、要素の内容領域の「幅と高さ」を持っている(指定できる)か否かです。
ちょっとややこしいのですが、インライン要素にmarginとpaddingを指定しますとしますと変則的な設定になります。

2014-05-04(日) |  情弱な翁(PC) Home Page事始め |  コメント(0)  | Top▲
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。