[4140] Bootstrapの使い方をまとめてみた

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■まにまにころころ［98］
ざっくり日本の歴史（後編その16）

川合和史＠コロ。 Kawai Kazuhito
https://bn.dgcr.com/archives/20160613140300.html

───────────────────────────────────

コロこと川合です。動画配信サービスで『八重の桜』見つつテレビで『真田丸』見つつと、頭の中で時代が行ったり来たりしていますが、まにころは幕末の話。『八重の桜』や『花燃ゆ』の時代です。

今回は、だーっと主な出来事をご紹介。それぞれ詳しくは次回以降に。

◎──黒船がくるあたりまで

1792年に根室へ来たラクスマンを皮切りに、この頃からなんだかんだで外国が日本にアプローチを繰り返しては袖にされるということが続きます。

そんな中、今後は諸外国とどう付き合っていくのかという話が自然とでてくるのですが、1840年に起こったアヘン戦争が日本を決定的に揺さぶります。

清に対して麻薬であるアヘンを売りまくるイギリス。国民が端から麻薬中毒でラリっていくのを見かねて、厳しく取り締まりを行なう清。

そのごたごたが結局、戦争にまで発展して、結果はイギリスの完勝。すごい不平等条約を押しつけ、香港まで奪い取ったという事件です。

平成生まれにはピンと来ないかもしれませんが、1997年（平成9年）まで香港はイギリスだったんですよ。

とまあ、そんな話はさておき清は当時、眠れる獅子と呼ばれた大国で、アジアナンバーワンの実力を持っているとされてたんです。その獅子が永眠させられたわけですよ、欧米列強であるイギリスに。そりゃあ、明日は我が身と大騒ぎになりますよね。

まあ自然と、打ち払え、ぶち倒せ、という強硬派が出てきますが、そんな中で、強いものは強いんだから国交結んで、技術力を盗んで対抗しようぜ派も登場し、意見が分かれます。元々前者だった人が、あれこれ調べるうちに無理と悟って、後者に転向するということもしばしば。吉田松陰もそんな感じです。

なおこの時期に即位した孝明天皇は、思いっきり前者だったと言われています。

そんなこんなの混乱の中、1853年、黒船に乗ってペリーがやってきます。来ることは幕府もオランダから聞いて知ってました。でも何も準備はできないまま。

ペリー：開国シテクダサイヨー
幕府：いやー、それはちょっと……
ペリー：開国シテクダサイヨー
幕府：とりあえず長崎に回ってもらえます？
ペリー：シバクゾ
幕府：え？
ペリー：来年マタ来ルカラ、ヨーカンガエトケヤー

心労がたたったのか、同月、十二代将軍の家慶は亡くなります。そして年明け早々に、ペリーは再来航。最初に来たのが7月、次が2月なので、半年後です。

将軍は替わって十三代家定。幕府は強硬なペリーをどうすることもできずに、日米和親条約を結びます。1854年のことです。その後、各国と続々、和親条約を締結。開国の第一歩を踏み出しました。

◎──井伊直弼豪腕を振るい、目を付けられ、暗殺される

ここからは駆け足で時代を追っていきます。年月日は基本的に西暦で。

1855年11月11日、安政の大地震。水戸藩主の徳川斉昭の腹心で、水戸の両田と言われた戸田忠太夫、藤田東湖らが亡くなり、水戸藩も大いに揺れます。

1858年1月、アメリカの総領事ハリスと日米修好通商条約交渉開始。 老中堀田正睦が勅許を得るため京都へ伺うも、岩倉具視ら公家は猛反発、孝明天皇は勅許を拒否。

1858年6月、井伊直弼が大老に就任。将軍並みの強い権限で豪腕を振るい始める。将軍継嗣は徳川慶福（家茂）と宣言。

将軍継嗣問題についてですが、十三代将軍の家定は、病弱だし頭悪いしと酷い評価で、しかも幸いと言うべきかどうやら跡取りができることもなさそうだということで、この時、次の将軍に一橋家の慶喜を推す一橋派と、紀州徳川家の慶福を推す南紀派とが対立していました。井伊直弼は南紀派でした。

1858年7月、日米修好通商条約を、勅許を得ることなく調印。

ちょっと待てよ、朝廷があれだけ反対してるのに無視するのかよと、江戸城に詰めかけた徳川斉昭（水戸前藩主）、徳川慶篤（水戸藩主）、徳川慶勝（尾張藩主）、松平春嶽（越前藩主）でしたが、逆に、隠居謹慎などの処分に。

1858年11月、徳川家茂、十四代将軍に就任。

この時期、井伊直弼最強です。大政治家だと思います。まあ嫌われ者ですが。

1860年3月24日、桜田門外の変。

ということで井伊直弼、水戸藩の脱藩浪士たちに殺されました。

◎──各地で攘夷派が大暴れ

1862年8月、一橋慶喜が将軍後見職に、松平春嶽が政事総裁職に任命される。

1862年9月、松平容保（会津藩主）、京都守護職に任命される。

この頃、日本各地で外国人が襲撃されたりする事件が多発します。政治の舞台である京都も治安がやばいということで、会津藩主の松平容保に京都に行って治安を守れとの依頼が。

会津初代藩主である保科正之の教えで、会津は幕府に尽くすべしと代々たたき込まれているため、断れずに受諾。会津にとってはこれが悲劇の始まりでした。

1863年3月、徳川家茂、上洛のため江戸出立。4月到着。家光以来の将軍上洛に。

この上洛警護のために結成されたのが浪士組。二転三転の後に新撰組になる隊です。到着後は会津藩が預かることになります。

1863年6月25日、長州藩、下関で外国商船を砲撃するも、当然その後ぼっこぼこに報復されて、列強の強さを思い知る。（下関戦争）

1863年8月15日、前年に起こった薩摩藩士によるイギリス人殺傷事件（生麦事件）の解決を巡っての交渉が、薩英戦争に発展。

この薩英戦争、殴り合った結果お互いの力を認め合い、友情が芽生えるという少年漫画のような展開になります。薩摩は最新式の軍備を整えていきます。

◎──主導権の奪い合いから、まさかの薩長同盟へ

1863年9月30日、攘夷の急進派である三条実美らと長州勢を、中川宮朝彦親王を擁する薩摩・会津の公武合体派が京都から一掃します。（八月十八日の政変）

1864年8月20日、禁門の変（蛤御門の変）。八月十八日の政変を受けて、長州が軍を率いて上京したところ、薩摩・会津藩に駆逐されることに。御所に向けての発砲で、長州藩は朝敵とされ、12月、第一次長州征伐が開始されます。

ここで薩摩の西郷隆盛は長州を諭し、長州は戦わずして恭順を示します。長州は今後の方針で揺れ動きますが、翌年1月、高杉晋作が下関で挙兵して長州藩の藩論を倒幕にまとめます。藩内クーデターですね。

1866年3月7日、京都で西郷隆盛と桂小五郎会談。薩長同盟成立。間に坂本龍馬が入って活躍したとかそうでもないとか諸説ありますが、雄藩同士でライバル関係にあり、禁門の変もあって対立していた薩長がタッグ結成です。

1866年7月、第二次長州征伐開始。薩摩藩は出兵を拒否。そうこうしてるうちに、将軍家茂がなくなり、なんとなく解散。講和成立。

辿り辿れば関ヶ原の戦い、敗戦で煮え湯を飲まされた外様雄藩が手を結んだのですから、倒幕するぞーって勢いはもう止められません。

◎──徳川幕府の最期

1867年1月、もったいぶって就任を渋っていた徳川慶喜が十五代将軍に。

1867年1月30日、孝明天皇崩御。翌月、明治天皇即位。

1867年11月9日、討幕の密勅が薩摩藩と長州藩に下るも、同日、徳川慶喜は政権返上を明治天皇に上奏（大政奉還）。なお討幕の密勅は天皇によるものでなく偽造であったとの説があり、その「偽勅説」が有力とされています。

もっと言えば、孝明天皇の崩御にも暗殺説があり、ことを一気に推し進めたい討幕派のなりふり構わずっぷりが目に付きます。大政奉還なんかでまるく収めてなるものかと、なんとかして幕府を倒したい薩摩藩は、尊攘派浪士を用いて、江戸で放火・掠奪といった暴挙を繰り返させます。かかってこいよと挑発です。

1868年1月3日、王政復古の大号令。江戸幕府はここで正式に廃止となります。

1868年1月、薩摩の差し金で江戸で暴れる輩にキレて、庄内藩が薩摩藩江戸藩邸を攻撃してしまいます。待ってましたとばかりに、京都で倒幕軍が行動を開始、鳥羽・伏見の戦いが勃発。戊辰戦争の開始です。鳥羽は京都の鳥羽です。伊勢志摩サミットの開催地あたりではありません。

会津藩が勇戦するも、慶喜が松平容保を連れて江戸に逃走。主導者を失って、旧幕府軍は潰走。倒幕軍は江戸へと攻め上ります。

さあいよいよ江戸が火の海にというところで、旧幕臣の勝海舟が西郷隆盛を説得。ギリギリのタイミングで江戸攻撃中止が決定、江戸城無血開城です。

無血開城と呼ばれてなんだか賞賛されますが、その前後にどれだけ血が流れたことか。江戸の町が戦火に焼けなかっただけです。

旧幕府を叩き潰したい。なのに将軍は白旗を揚げた。倒幕軍は次なる旧幕府の象徴として、北上し、会津を叩き潰すことにします。会津戦争の開始です。

官軍である倒幕軍は、会津を逆賊呼ばわりして徹底的に攻撃しました。会津は天皇への忠義も篤く、京都守護職として孝明天皇からも信任されていたのに。

1868年11月、会津藩、庄内藩の降伏が受け入れられ本州での戦いは終了します。

1868年12月、榎本武揚は箱館府軍と戦闘、翌月に蝦夷共和国の樹立を唱えます。しかし、翌年6月には鎮圧されて降伏。戊辰戦争は終結します。

戊辰戦争、学校の授業ではかなり簡単に習った気がします。鳥羽伏見で戦端が開かれるも、幕府軍は江戸に敗走、江戸城無血開城を経て、北へ逃れた旧幕府軍の残党を新政府軍が掃討、函館にて終結、くらいに。中立に見えて官軍寄りの説明で。

勝てば官軍。結果が違っていれば、この時の官軍は偽官軍として書きたてられていたと思います。怖い怖い。

◎──新しい日本

日本は旧薩長士族を中心に、西洋の知識を取り入れつつ、新たな国のかたちを作り上げて行きます。その過程で不平士族の反乱も起こりますが、西郷隆盛による西南戦争を最後にそれも終結。憲法発布、国会成立など、近代国家らしく整備されていきました。

◎──まとめ

ペリー：開国シテクダサイヨー！
幕府：ぐぬぬ！　し、しかたない！
ハリス：修好通商条約ムスビマショウヨー！
幕府：帝、いいですか！
帝　：ダメ！
幕府：ダメって言われても、無理！　結ぶ！
志士：幕府許さねえ！
井伊：許さねえって言った奴ら許さねえ！
志士：そんなお前を許さねえ！
長州：攘夷じゃ！
薩摩：危ない奴らめ、京都から去るがよか！
長州：ギャフン！
龍馬：仲良うせんといかんぜよ！
薩長：手を組んで幕府倒すか！
幕府：つ、強い……倒される前に白旗！　幕府解散！
薩長：ちっ、しゃーない、代わりに会津をやるか！
会津：なじょして……
榎本：旧幕府チーム函館に新政府を作って対抗する！
薩長：させるかよ！
榎本：ギャフン！
薩長：よーし、新しい日本の始まりだ！

◎──次回は

今回、超駆け足で幕末を一覧してみました。有名な事件もだいぶすっとばして、全体をざっくり眺めるだけでしたので、次回以降しばらくは毎回、個々の人物や団体を取り上げ、それぞれの立場からもう少し幕末を見てみたいと思います。


【川合和史＠コロ。】koro@cap-ut.co.jp
合同会社かぷっと代表
https://www.facebook.com/korowan

https://www.facebook.com/caputllc

http://manikabe.net/



━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■クリエイター手抜きプロジェクト［466］Mac+AI編
Google Cloud Visionでランドマークとして認識された範囲を
Photoshopで描画する

古籏一浩
https://bn.dgcr.com/archives/20160613140200.html

───────────────────────────────────

今回は、Google Cloud VisionでAI（人工知能）が図形のどこをランドマークとして認識したのかを、Photoshopで描画します。認識範囲はJSON形式で矩形座標として返されます。

また、何をランドマークとして認識したのかも返してくれます。そこで、認識された名前をレイヤー名とし、認識範囲を赤い枠線としてPhotoshopのレイヤーに描画することにします。

まず、Photoshopで処理する前に、AIで認識させたい画像を用意します。日本の景観はうまく認識されないことが多いので、最初は海外の世界遺産など有名な図形を用意するとよいでしょう（エベレスト、クレムリン、エッフェル塔、ホワイトハウスなど）。

画像はひとつのフォルダにまとめて入れておきます。また、日本語ファイル名の場合は、英文字と英数字の組み合わせにしておきます。画像の形式はJPEGのみです（以下のプログラムの file=*.jpg のjpgを変更することで、PNG形式などにも対応させることができます）。

画像を用意したら、以下のシェルスクリプトをテキストエディタに入力します。入力したらai.shのように拡張子を.shにして保存します。

なお、Google Cloud Visionを使用する際には、API Keyが必要になります。以下のコードの★がAPI Keyになりますので、取得したAPI Keyを指定してください。

cd $1
file=*.jpg
for i in ${file}
do
echo '{"requests":[{"image":{"content":"' > ./temp.json
openssl base64 -in $i | cat >> temp.json
echo '"},"features":[{
"type":"LANDMARK_DETECTION",
"maxResults":5
}]}]}' >> temp.json
curl -k -s -H "Content-Type: application/json" https://vision.googleapis.com/v1/images:annotate?key=★
--data-binary @./temp.json > "$i.LANDMARK.txt"
rm ./temp.json
done

次に、ターミナル.app（アプリケーションフォルダ＞ユーティリティ＞ターミナル）を起動し、上記のプログラムを保存したフォルダに移動します。ターミナルでcdと入力し、直後に半角空白を入力します。

その後、上記プログラムが入ったフォルダを、ファインダーからドラッグドロップします。すると、自動的にフォルダパスが入力されます。入力されたらリターンキーを押します。

次に、以下のように入力します。なお、ai.shは保存したプログラムのファイル名です。とりあえず、ここではai.shとして進めます。

chomod +x ai.sh

これで実行できるようになりました。次にターミナルで以下のように入力します。

./ai.sh 画像が入ったフォルダ名

あとはリターンキーを押せば、自動的にGoogle Clound Visionを使って画像解析が行われます。すると、画像フォルダの中に以下のような「画像ファイル名.LANDMARK.txt」というテキストファイル（JSONファイル）が生成されます。

e.jpg.LANDMARK.txt

このようなファイルができていれば準備完了です。

次に、以下のプログラムを入力します。入力したらPhotoshopかESTKから実行します。最初に画像があるフォルダを聞いてきます。フォルダを選択すれば自動的に画像が表示され、赤い四角形が描画されます。

// PhotoshopでAIの認識範囲を線で描画する
var saveUnit = preferences.rulerUnits;
preferences.rulerUnits = Units.PIXELS;
(function(){
var folderObj = Folder.selectDialog("フォルダを選択してください");
if (!folderObj){ return; }
var apiText = "*.LANDMARK.txt";
var fileList = folderObj.getFiles(apiText);
for(var i=0; i<fileList.length; i++){
var f = fileList[i].open("r");
if (!f){ continue; }
// JSONデータを読み込みオブジェクトとして利用できるようにする
var jsondata = fileList[i].read();
eval("var data = "+jsondata);
var param = data.responses[0].landmarkAnnotations;
if (!param){ continue; }
for(var j=0; j<param.length; j++){
if (!param[j].boundingPoly){ continue; }
var imageFile = fileList[i].fsName.split(".LANDMARK.txt")[0];
app.open(new File(imageFile));
// レイヤーを作成する
var doc = app.activeDocument;
var lay = doc.artLayers.add();
lay.name = param[j].description;
var coords = param[j].boundingPoly.vertices;
var p = [];
for(var k=0; k<coords.length; k++){
var x = parseFloat(coords[k].x);
var y = parseFloat(coords[k].y);
p.push([x,y]);
}
doc.selection.select(p);
doc.selection.stroke(setColor(255, 0, 0), 2);
app.activeDocument.selection.deselect();
}
}
})();
preferences.rulerUnits = saveUnit;
// RGB Color Object
function setColor (r,g,b){
RGBColor = new SolidColor();
RGBColor.red = r;
RGBColor.green = g;
RGBColor.blue = b;
return RGBColor;
}

なお、画像が開かれない場合は、Google Cloud Visionでの解析結果でランドマークとして認識されなかった可能性があります。JPSONファイルをテキストエディタやブラウザで開いて、内容を確認してください。"boundingPoly" の文字がなければ、ランドマークとしては認識されなかったことになります。

Google Clound Visionは最初の3か月は無料ですが、それを超えると有料になります。一日1000回までのリクエストは無料となっています。また、初回に限って3万円分使える特典があります。

ですが、あまりに大量にリクエストすると、思わぬ金額になってしまうかもしれないので、注意しつつ利用してください。


【古籏一浩】openspc@alpha.ocn.ne.jp
http://www.openspc2.org/


ファイル名。たかがファイル名だけど、案外とトラブルを起こしやすいもののひとつかもしれません。同じ仕事をしても、一人は思わぬトラブルがあって仕事がはかどらないのに対して、もう一人はほとんどトラブルもなく終わってしまったりすることもあります。

もともとコンピューターは英語がベースなので、英語以外はおまけ扱い、また英語ベースのプログラムで様々な処理を行っています。

ですから、ファイル名に日本語や空白や特殊記号、プログラムで使用される演算記号（+-/*|^&%）を入れるとトラブルの原因になります。

肝心な部分にアルファベット26文字のみ、もしくはアンダースコア（_）しか使わない人がいます。些細なことですが、コンピューターの基礎部分（経緯）を知っていれば、後々のトラブルを防ぐことができます。

・みんなのIchigoJam入門 BASICで楽しむゲーム作りと電子工作
http://www.amazon.co.jp/dp/4865940332/


・Premiere Pro & Media Encoder自動化サンプル集
http://www.amazon.co.jp/dp/4802090471/


・JavaScriptによるデータビジュアライゼーション入門
http://www.amazon.co.jp/dp/4873117461/


・Photoshop自動化基本編
http://www.amazon.co.jp/dp/B00W952JQW/


・Illustrator自動化基本編
http://www.amazon.co.jp/dp/B00R5MZ1PA/


・Adobe JavaScriptリファレンス
http://www.amazon.co.jp/dp/B00FZEK6J6/


・データビジュアライゼーションのためのD3.js徹底入門
http://www.amazon.co.jp/dp/4797368861


・4K/ハイビジョン映像素材集
http://www.openspc2.org/HDTV/


・クリエイター手抜きプロジェクト
http://www.openspc2.org/projectX/



━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■LIFE is 日々一歩（33）［Web］
Bootstrapの使い方をまとめてみた（2）

森　和恵
https://bn.dgcr.com/archives/20160613140100.html

───────────────────────────────────

こんにちは！　森和恵です。先日、ビールティスト飲料というものを初めて飲みました。そう、ノンアルビールって奴です。

若い頃は、ビールをチェイサーにウイスキーロックを愛飲していた方でして、「ノンアルなんて！　フッ」と小馬鹿にしていたものですが、甘くない炭酸飲料として意外にいいかもしれません。ご飯にも合うしね。

え？　なんで好まないものを飲んでるか？　ですか…。

今月末から、オールフリー×おそ松新作動画キャンペーンがありまして、その応募券を集めているところなんですよ。最低でも24本は消費しないとならない予定なのです。折角だったら、美味しく思って飲みたいじゃないですか。ねぇ。

・オールフリーと楽しむ、この夏イチオシ物語 キャンペーン
http://allfreecp.jp/apc/sscp/B1606ALF/top.html


さてさて。今回は、Bootstrapの2回目です。

前回は、Bootstrapが動くようにHTMLページにCSSやらJavaScriptを組み込むところを話しました。

【Bootstrapの使い方をまとめてみた（1）】
https://bn.dgcr.com/archives/20160530140100.html


今回は、<h1> や <p> など基本タグに付加されたスタイルを確認していきましょう。よく見ていないと気づかないぐらいの地味〜なスタイル調整なのですが、きれいに作るための下地としてけっこう効いてくると思います。

“Typography”のカテゴリでは、基本のタグにつけられた文字修飾のスタイルを確認できます。公式の仕様書を読んでいくとわかるのですが、地味な部分にもしっかりとスタイルが準備されています。
http://getbootstrap.com/css/#type


以下のURLで、Bootstrap使用前と後を見比べながら、確認してみてください。

【Bootstrap使用前】
http://r360studio.com/dgcr/bootstrap/step2-before.html


【Bootstrap使用後】
http://r360studio.com/dgcr/bootstrap/step2.html



●Body copy（本文）
http://getbootstrap.com/css/#type-body-copy


まずは、本文に指定されたスタイルを紹介します。

本文には、基本的に <p> を用います。デフォルトで指定されるのは、font-sizeが14px・line-heightが1.428です。

英文ならきれいなのですが、日本語の文字に割り当てると少し行間が狭いような気がしますね（ここは、調整方法を別の回でお話しする予定）。

margin-bottomは、line-heightの半分のサイズが指定されます（デフォルトは10px）。

<p class="lead"> と <p> にCSSのクラスセレクタ“.lead”を付加するとリード文（要旨）の指定ができます（リード文に指定すると文字が少し大きくなります）。


●Headings（見出し）
http://getbootstrap.com/css/#type-headings


<h1>〜<h6>までの見出し要素にシンプルなデザインが準備されています。要素内に <small> で副題をつけることもできます。

<h1>見出し1<small>見出し1の副題</small></h1>

とすると、<small> 要素内の文字が小さめ・薄めの文字になり、見出しの横に配置されます。タイトルとキャッチコピーのようなレイアウトを簡単に指定できますね。

ちなみにマニュアルには掲載されてないようですが、<hr>もきれいな極細線になりますよ。

●Alignment classes（行揃えのクラス）
http://getbootstrap.com/css/#type-alignment


ブロックタグのalign属性のように扱える行揃えと折り返し禁止のためのクラスです。“<p class="text-left">”のように指定します。

左揃え（text-left）・中央揃え（text-center）・右揃え（text-right）・両端揃え（text-justify）・折り返さない（text-nowrap）があります。CSSがでてから、align属性は非推奨（使わない方がよい）となっているため、同じような感覚で使えるのは便利ですね。

●Abbreviations（略語）
http://getbootstrap.com/css/#type-abbreviations


“略語”を示す <abbr> タグに、title属性をつけて“略語の解説文”を指定します。見た目と動きは、略語に破線で下線が表示され、マウスでポイントするとポップアップで解説文が表示されます。

●Blockquotes（引用）
http://getbootstrap.com/css/#type-blockquotes


“引用”を示す <blockquote> タグには、左側にボーダー線が表示されます。また、<blockquote> 内に <footer> タグで、“引用元”を指定したり、<cite> タグで、“引用元のタイトル”を指定したりできます。

<blockquote class="blockquote-reverse"> と <blockquote>にCSSのクラスセ
レクタ“.blockquote-reverse”を付加すると、
引用文全体を右寄せに配置します。

●Lists（リスト）、Description（順不同リスト）
http://getbootstrap.com/css/#type-lists

http://getbootstrap.com/css/#description


リスト系タグの <ul>・<ol>・<dl> にもきちんとスタイルが割り当てられています。

<ul class="list-unstyled"> と <ul> や <ol> にCSSのクラスセレクタ
“.list-unstyled”を付加するとリストマーカー（リストの行頭マーク）と左側の余白（marginとpadding）を非表示にします。

<ul class="list-inline"> と <ul> や <ol> にCSSのクラスセレクタ
“.list-inline”を付加するとインライン表示にし、左右に5pxの余白をもうけてリスト項目を横並びにします。

<dl class="dl-horizontal"> と <dl> にCSSのクラスセレクタ
“.dl-horizontal”を付加すると用語と説明を水平に並べて表示します（2列の表組みのような感じ）。レスポンシブに対応していて、画面幅768未満になると元の垂直表示に戻します。

…というわけで、今回はこの辺まで。

Bootstrapで基本タグの表示を確認ました。HTMLタグをデフォルトのまま使うとダサダサで嫌になっちゃうのですが、Bootstrapが何もしなくてもいい感じに整えてくれます。CSSを書かなくてもやってくれるというのが嬉しいところですね。

今回紹介したタグ以外にも細かい部分でいろいろと調整がされています。公式仕様書の“Typography”を再度確認してみてくださいね。

さて次回は基本タグの発展系で、フォーム、テーブル、画像やボタンなどちょっと特殊なコンテンツに付加されるスタイルを確認していきます。（もしかしたら、そろそろ夏アニメになるので、そちらを書くかもしれません。この夏のアニメは豊作ぞろいだそうで、楽しみです）

ではでは、また！(^^)


【 森和恵 r360studio 〜 Web系インストラクター 〜 】
site: http://r360studio.com

mail: r360studio@gmail.com
Twitter: http://twitter.com/r360studio


web系の担当講座、6・7月でAdobeソフトの入門・実践講座をやります。
好評受付中です。お申し込みはお早めに。
http://r360studio.com/seminar/



━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
編集後記（06/13）

●くまモンは完成度の高いステキなキャラだが、本物の熊となると恐ろしい。6月10日に秋田県鹿角市十和田大湯の山林で、ツキノワグマに襲われたとみられる性別不明の遺体が見つかった。付近での熊による死者は4人目。熊は午後2時ごろ、遺体発見現場付近で地元猟友会員によって射殺された。被害者の死体損傷が激しいため、この熊に食われたのではないかといわれ、報道で【秋田殺人熊】と呼ばれた。このニュースを見て、そういえば昔、吉村昭が羆の小説を書いていたのを思い出し、図書館でさがしたら新潮文庫版「羆嵐」があった。同書は昭和57年11月発行、平成25年11月46刷改版とある。ロングセラーだ。

この小説は、大正4年（1915）、北海道天塩山麓の開拓村を一頭の羆が襲った日本害獣史上最大の惨事を描いた、とびきり恐い話だ。冬眠の時期を逸した羆が、わずか2日間に6人もの男女を殺害した。最初の襲撃では、9歳の少年の咽喉をえぐりとって殺し、その母の死体を山で食うために運び去った。羆は翌日の少年の通夜の席に板壁を破って踏み込み、さらに別の家で4名を殺し、3名に重傷を負わせた。村の銃携行者たちは自力で羆を斃すことができず、恐慌を来して逃げ帰る。やがて分署長と警官の二人が来村し、各町村からの救援隊の出動で、約200人の男達による一応の態勢は整えられた。が、全く無力だった。

分署長は軍隊の出動を要請したがあまりに遅かった。もはや間に合わない。羆は依然として村の山中にひそみ、家々を荒らし、放置された死体を食い散らかしているようだ。区長はついに羆撃ちを生活の糧にする銀オヤジ（山岡銀四郎）に、村落の命運を託すことを決意する。50歳を越えた銀オヤジは、大酒のみで素行が悪く傲慢で村中の嫌われ者である。こういう男の登場はフィクションだと思うが、三船敏郎を思い浮かべながら読んだ。すると区長は志村喬だな。羆は救援隊の銃の乱射でわずかに負傷し山へ逃げた。意気上がる200人の集団は、羆の足跡をたどって山を登り、銀オヤジと区長は別の方向から斜面を登る。

淡々とした描写のなかで、銀オヤジは羆を斃す。雄、7〜8歳、頭の頂から足先まで2.7m、体重は383kgであった。やがて警官も他町村の者たちも去る。羆を仕留めるまでの銀オヤジは殊勝な態度で、さすが三船敏郎と思っていたが、村の宴会が始まり酒が入ると、人に忌み嫌われる酒乱の男に戻り、村中の金を出せと喚く（この悪人を誰に演じせたらいいんだ）。銀オヤジのその後と、村のその後を述べて物語は終わる。羆が人間を襲うシーンはないが、襲われたあとの描写は淡々としているが、すさまじく酸鼻。破損された人間の死体ほど怖いものはない。科警研で死体写真を見た経験は何度かここで書いた。 （柴田）

「もしも…出会ってしまったら！〜ヒグマ対処法」（知床財団）　写真の熊は合成？
http://www.shiretoko.or.jp/library/bear/bear2/


吉村昭「羆嵐」
http://www.amazon.co.jp/exec/obidos/ASIN/4101117136/dgcrcom-22/



●ロビ続き。全部を開封し、説明書を読み込んでから作り始めてもいいんだけど、パーツが混ざると困るし、展開のわからないワクワクを揃った後に味わえるので、順次にした。

後から知ったのは、一度ねじを締めれば終わり、というものではなくて、何度かねじを外す必要があるということ。ただしねじは新たに送られてきたり、毎号予備がついてくるので、ねじ山が潰れることを心配する必要はない。

ねじは結局15〜20ぐらいの種類があったように思う。べネジと最初読んでしまい、そんなねじあるんだ〜誤植かなと思った「なべネジ」と「皿ネジ」がほとんど。

「M2x4.5mm皿ネジ」「M2x6mmなべネジ」。「な」はひらがななんだけど、「べ」がフォントの関係でカタカナの「ベ」に見えてしまって、「ベネジ」がひとかたまりだと思ってしまったのであった。

「M2x6mmな」なんて「ユニークな」という使い方をする「な」（ナ形容詞）にしてはおかしいんだけれど、パーツ一覧なのでザッピングしてしまい、サイズと種類しか目に入っていなかったのだ。 （hammer.mule）

Robi第三版全国版 創刊 2015年2/10号
http://www.amazon.co.jp/exec/obidos/ASIN/B00RVZ257I/dgcrcom-22/

今から揃えるなら、こなれた第三版がオススメ。連載記事も新しいはず。