:after:beforeは便利だけど

cssを書いていて、あまり使わなかった擬似クラスのafter,beforeは便利であることを今さら知らされたが、落し穴が。きっかけは画像のキャプションを画像の直後に表示すると言う要求から。

画像の下に説明をつける場合はかなりあると思う。実はこれまでそれぞれの画像と文字列をdivで囲んで、そのdivをdisplayプロパティでinline-blockを指定していたりした。
しかし、after擬似クラスを使えば簡単だろうと考えた。

そもそもbefore,after擬似クラスとは

ようするに要素の直前や直後に内容を挿入できるもの。挿入内容はcontentプロパティで指定してやればいい。
例えばh2タグがあって、それにはいつも★マークをつけたい場合

h2:before {content:”★”;}と書いてやればいい。

さて、画像の場合imgタグの属性でtitleを書くだろう。これをafter擬似クラスで書いてやれば画像の下にtitle属性で書いた文字列が現れるはずだと思った。

imgタグにbefore,after擬似クラスは効かない

その場合はこう書けばいいということになる。実はネット上の質問の答えとしてあったのだが。

しかし、これは効かないのだ。要するにimgタグにはこの擬似クラスが効かない。
理由はこの擬似クラスがタグの中に挿入するという働きでその機能を実現していて、したがって閉じタグのないimgタグのなかに書くわけにはいかないからだ。やってみればわかることだ。

時々生半可な答えがあるんで注意しましょう。

 

MacBookAirでの旧漢字入力

ここのところブログをMacBookで書いているんだけど、その内容が江戸末期から明治初期の文章についてなんで引用文の入力に苦労します。まずはその文章が所謂漢文崩しなんで送り仮名が基本的にカタカナです。さらには使われている漢字が現在の制限漢字と違ったものが多く使われている。そこでその方法をメモ。Mac使いの人には当たり前のことだろうけど。

カタカナ入力

これはMacを長く使っている人ならとっくに知っていることだろうが、control+kでカタカナ変換ができる。これは結構便利でした。キーボード操作でそのままできるので。特にcontrolキーの位置がいい。左手の小指で触れるので。

旧漢字入力

これについては以下。

先ずは日本語入力バーが右上部に表示されていることが前提。もしなければ、システム環境設定のキーボードの設定から出すようにする。

スクリーンショット 2015-12-11 8.33.27ここから下段の日本語環境設定を開くをクリック。

スクリーンショット 2015-12-11 8.35.10下段の「メニューバーとキーボードビューアと文字ビューアを表示」にチェック。

スクリーンショット 2015-12-11 8.35.54「文字ビューアを表示」をクリック

スクリーンショット 2015-12-11 8.36.12左メニューから「漢字」を選び、部首の画数から部首を選んで、旁の画数で目的の漢字を選択する。その漢字をダブルタップすれば、入力できる。
スクリーンショット 2015-12-11 8.37.04

 

成島柳北「柳北奇文」を読む5

二船問答(明治9年8月25日)

実に面白い文章。「芥舩ト屋舩ト二洲橋下ニ闘フ」という形で問答が展開する。
芥舩はゴミを運ぶ船、屋舩は遊びのための屋形船だが、芥舩が屋舩に「景気はどうだ」と聞く。屋舩はここのところ全く客がいないと嘆く。芥舩は「文明開化」の証拠だという。屋舩は「不景気」の証拠であり、「何が文明開化だ」と非難する。

「足下未ダ芥臭ヲ脱シ去ラザルヤ所謂文明開化ナルモノハ斯ノ様ナル卑陋世界ヲ謂フニ非ズ試ニ看ヨ英ト云ヒ仏ト云ヒ米ト云フ文明開化ノ本家本店タル諸都会ノ如キハ尽ク卑陋斯クノ如キ者ト思ヘル乎決シテ然ラザルナリト陸ニハ車馬有リテ水ニハ舟舫有リ日曜ハ論ナク平日モ晩食終レバ士女競ツテ遊ビ老幼争ツテ狂ス錦衣玉食嬌歌妙舞夏ハ涼ヲ清水嘉樹ノ間ニ追ヒ冬ニハ暖ヲ晶楼綺閣ノ中ニ領ス千金一擲萬銭一抛豪華互ニ誇ル何ゾ斯クノ如ク冷策憔悴(サミシキ)シタル僻邑荒村一般ノ都会ト同一ナル有ンヤ」と。

すなわち、「文明化開化の本家本元の欧米では日曜のみならず平日でも夜ともなれば老弱男女きそって遊んでいるではないか。これが文明開化じゃないのか。今の東京はまるでさびいしい鄙びた村と一緒だ。」と。

それに対して芥舩は「近事官吏ガ謹慎ナルガ」ゆえに屋形船が繁盛しないのだと言う。しかし、「とんでもない。官員が謹慎なのは当然で、全都の人民が遊べないのが問題なのだ。」と切り返す。

芥舩=薩長藩閥、屋舩=江戸町人という図式である。勿論柳北の意は屋舩にある。

柳北は旧幕時代、なによりも大川での船遊びが好きであった。ここに懐旧の情を読み取ってもいいのだが、例に江戸を引いていない。むしろ文明開化の本家である欧米を引いて、本来の文明開化はむしろ「町人が船遊びをできる世のことではないのか」と言っている。

さて、文末にこの二船の問答に糞舩が登場する。曰く

「兄等ハ何ヲ數無ク語(ホエ)ルンダ止メサツセイ己ラガ村方ア今年モドエライ豊作ダニ依テ嬶(カカ)アドノノ褌ヲ一貫三百デ新ラシク買ヒ村中揃テ豊年踊リヲブツ始メルコンダガ兄等モ来テ見ナサレ仲間喧嘩ナザアブチ止メテ」と。

ここで田舎者が登場し、二船を仲間としているところがおかしい。つまりは芥舟も屋形船も糞船からみれば仲間だということ。ここには田舎と都会という図式が現れる。田舎は結構いいよと言っている。田舎に来なよと。

だがしかし柳北は結句

「屋船ハ小声デ噫ヨクヨク銭ノ無イ国民ダナア」

と嘆く。

この図式はこの後の日本の近代の歩みを見てみればよくわかりますなあ。今だってそうなる可能性は十分にあるんじゃないかな。政府は田舎では農業(糞を運ぶ糞船)、都会では産業(ゴミを運ぶ芥船)に重きを置いて、町人の遊びが後回しになるってことがね。クワバラクワバラ。

成島柳北「柳北奇文」を読む4

狂症の説教(明治9年8月18日)

この表題が何を意味するのか詳らかにしないが、趣旨は以下の文にある。

「一郡ヲ治ムルモ一郷ヲ官スルモ同一ノ理ニテ其ノ事務ヲ総括スル先生ハ日夜勉励シテ世話ヲ焼クハ当然ノコトナレド餘リ細密ニ注意シ過ギルト往々ニ苛察ニ流レテ却テ保護ガ妨害ト化ケテ仕舞マス」

ようするに保護と言って手を出しすぎるとかえって成長を妨害することになる。人間も社会もそして植物もという訳だ。

この文の末尾に「津田先生ノ媒助法」というのが取り上げられている。これがいかなるものか、わからないので少し調べてみた。(グーグル先生に聞いた)

まず、津田先生というのは津田仙という人物。元幕府側にいた人物で戊辰戦争では幕府側に加わっている。また、福沢諭吉と渡米経験があり、帰国後農業の近代化に尽くした人物。
「農業三事」という著作があり、そのなかで「媒助法」を説いている。これはようするに「人口受粉」で、これによって農産物の生産性を高める方法。現代ではいわば当たり前の方法だが、当時は多くの反対にあったようだ。かなりの論争にもなったらしい。
また、津田は農園を作って多くの西洋野菜を栽培したことでもその名を止めている。また、キリスト教信者で青山学院の創始者でもあり、後に足尾鉱毒の反対運動にも加わっている。次女梅子は津田塾の創始者。内村鑑三もいわばその弟子筋に当たる。
(以上 小林富士雄氏「西洋農学の導入をめぐって」pdf版による)

それにしても旧幕府側の人間に優秀な人物が多かったとまた思わされる。

さて、この津田の「媒助法」論争に柳北はこう言っている。

「有益ナルコト権兵衞ニモ烏ニモ分カルコト」としながら、これが日常化すると「草デモ木デモ苦イ顔ヲシテ嗚呼ウルサイ蝿ダト小言ヲ云フニ相違無ク又何ノ益ニモ立チマスマイ」と。

津田の考えは近代が産んだものだが、とすると柳北は反近代という事になるのか。いやそうではあるまい。この文の趣旨は冒頭で言っている事にある。

世話をしすぎると人間も社会も植物もいわば「息苦しく」なるんだ。今の日本の状況を見てもそれは大いに言えると思う。親も教師も社会も手を出しすぎた結果(ああだこうだとほんと五月蝿(ウルサ)い)、ロクな大人が育っていないのもそう思える。

この文も柳北の

「水清ケレバ魚育タズ」

という人間観に基づいている。

成島柳北「柳北奇文」を読む3

東隅ノ土百姓ヲ戒ム(明治9年8月12日)

こうした逆説的な文章を書かせたら天下一品ですね。
旧幕時代の御用道中に比するに「官員様ノ派出巡行」を問題にする。
旧幕時代はもうタダでやりたい放題、今の官員様は金を払っているのだから失礼のなきようにというわけだ。しかも多額の金を使っているんだから。

曰く
「試ニ退イテ算セヨ大臣参議一人一日ノ旅費ハ汝等ガ幾日ノ且活計ヲ立ツルニ足ルカ斯ル天淵月鼈(月とすっぽん・ゲツベツ)ノ相違アル貴キ官員様ヲ粗略ニ心得テハ仮令開明ノ世界別ニ御叱リテハ之ナキモ決シテ汝等の礼節ヲ尽セル者トハ謂フ可ラザルナリ」と。
ようするに官員等が巡行と称して莫大な金を使って旅行をしていることへの批判なんだが、それを百姓に向かって
「官員様の一日の旅費は君たちの生活費の何日分にもあたるように、官員様は君たちとは月とすっぽんの違いがあるんだから決して失礼があってはいけないよ。」と言っているのだ。

何時だったか、ある政治家が日本は世界平和に人を出さないで、金だけ出しているのはいかんといった発言をしたことがある。PKOの話だったと思う。それに対して今は亡くなった女性の料理研究家がいいことを言っていた。「その金は誰のものと思っていて発言しているんだ。庶民が働いて収めた税金だ。金を出すということは庶民の生活を提供していると同じなんだ。」と言った趣旨だったと思う。
この話も同じだろう。官員様の旅費は実は百姓が払っているんだけどね。
これを読むと本当に新時代とはわかりにくい時代ということになる。結局は金を搾り取られていることに変わりはありゃしねえんだ。なんか近代というのはようするに同じことをわかりにくにしただけかなって気がしてきます。
それを柳北は面白く書いている。流石です。

成島柳北「柳北奇文」を読む2

華謡新聞題言(明治9年8月2日)

「華謡新聞」は明治9年8月1日に風香月影社と言う所から発行された。(早稲田大学図書館のDBによればその4号が現存している。宮本千万樹 編輯とある。)
「今ヤ我社友中扼腕切歯シテ慷慨悲歌シタル諸子ガ。往日ノ失策ヲ懺悔シ。幡然(ヒラリ)ト旧套ヲ脱シテ。はな謡新聞ノ一社ヲ開ク。豈之ヲ奇〃妙〃ト称賛セザルヲ得ンヤ。」
とあるようにこの新聞は「朝野新聞」によって発行されたもので、その内容はまさに政治とは無縁に見える「はな謡」を採録したもののようだ。

やはりこの文にも柳北の真骨頂が伺える。
古詩を引いて「花ニ声無シ」というものの、古歌を引いて「曙に花の雫の音をきく」とし、ましてや花街の花たるものの声(これを「はな謡」という)を聴けば、「誰カ垂涎三尺ナラザルヲ得ンヤ」ということになるはずだとする。

しかしそれに対し「仮道学先生(ニセガクシャ)」は「頑〃タル鑼声(ドラゴエ)ヲ発シ余ガ此ノ説ヲ破毀シテ」言う。鄭の国の音楽をあげそれを「淫」とし、麗人は「危」いとし、「淫褻俗ヲ乱ルハ固ヨリ君子ノ悪ム所ロナラズヤ」とする。

(いつの時代もいますね、こう言う輩。道徳を説く人です。ほんと「銅鑼声」がうるさいのだ。)
もちろん柳北はこんなことは言いません。まず自分もこうした道徳説教を家業としていたとして、(何たって柳北は幕末期の奥儒者です。「ゑへん」と言ったりしていて、これがまたいい。)

「宣尼(コウシ)ハ何故ニ詩経(別字だが)ヲ剛正スルニ当テ。しんい桑中ノ如キはな謡を尽クかわノ流レニ擲棄シ去ラザリシヤ。蓋シ之ヲ存スルハ亦為メニスル所ロ有レバナリ。」とし、

孔子だって、鄭の国の音楽をすべて捨ててはいないし、それはそこに意義を認めているからなんだという。
しかし、「はな謡」を採録するのは難しい。いっそ「寝言」を集めてみたらと提案する。
「若シ寝タ時ニ寝言ヲ採リ。覚ムル時ニはなうたヲ録セバ。」これは無尽蔵で本社の繁盛間違いなしだと言っている。

ふざけているようにように聞こえて、決してそんなことはない。「扼腕切歯」して「慷慨悲歌」するより「はな謡」や「寝言」にこそ人間の真実があるんだ。もっと言えばこっちにこそ「痛み」があるんだと聞こえる。

やはり柳北はいい。

成島柳北「柳北奇文」を読む1

成島柳北に「柳北奇文」という著作がある。これは明治11年に西山喜内という人物によって編集され、出版されたものだが、中身はすべて「朝野新聞」の「雑録」である。
「雑録」は当時の社会の様々な現象を取り上げ、それを柳北ならではの文章で料理する。するとたちまちそれは当時の新政府批判へと転じる。この雑録にこそ柳北の真骨頂を見ることができるのだ。
これから一つ一つの雑録を紹介したい。漢文崩しの独特な文章は今や多くの人にとっては読みやすいものとは言えないが、なるべく本文を引きつつ紹介する。(引用は「明治文学全集」による。ただし一部漢字を変更する場合があることをご容赦ください。)

麦湯の説(明治9年7月29日)

今で言えば喫茶店、麦湯を売る店が開かれたが、それを官が禁じた。それを取り上げた文章だ。
その論法を追ってみる。
まず、官がそれを禁じたのは麦湯そのものではなく、それを売る「白面女郎ノ醜行有ルヲ以テナリ」である。すなわち
「官家ハ汝ノ麦湯安ヲ妨害スルニ非ズ汝ガ白面安ヲ妨害スルノミ白面安ヲ妨害セザレバ則チ全府ノ風俗乱ルヲ以テナリト」
これは官の言い分だ。
それに対し柳北はこう言う。まず
「我輩ハ市上ニ大呼シテ言ハン(巡査ニ叱ラレルナラ小音デ)」と言っているのもおかしいが、
この問題を新政府の問題として取り上げる。
「其(官が)行フ所ロノ事務ハ固ヨリ行フ可キコト猶麦湯ノ利有テ害無キが如シト雖ドモ其ノ姦猾苛刻等ノ事有ルニ至テハ則チ其主旨ヲ失フ者ニシテ之ヲ排撃セズンバ有ラザルコト猶彼ノ白面的ノ醜行ヲ禁えつスルト一般ノ道理ナレバナリ」
すなわち、政府の人間に不正があれば、それを妨害するのは麦湯店の禁と同様、ことの当然だというのだ。
「我輩ハ亦将ニ大呼セントス我輩論者ハ決シテ国安ヲ妨害ス可カラズ唯姦猾安ト苛刻安トノ如キハ宜シク之ヲ妨害ス可シ此ノ二安を妨害セザレバ人民の権利ヲ失ヒ却テ国安ヲ保ツ能ハザルヲ以テナリト」
政府の非を非難するのは当然の権利であり、それなくして国安は保てないと言っている。

さて、こうした柳北の論法は見事だが、その背景に実は柳北が麦湯店の側に立っているということは見逃してならないと思う。市井に視点があるといってもいいが、ようするに実は柳北は麦湯店が好きなのだ。
では、当時の麦湯店とはどんなものだったか。ちょっと調べてみた。今でいう喫茶店のようなものだが、江戸時代からあったようで、屋台で麦湯を売っていたのだが、それを売っているのがすべからく少女であったらしい。それを目当てに若い衆が集まったと言う。今でいうメイドカフェ?いや違うか。何れにしても市井の風俗の一つであったようだ。庶民のささやかな楽しみの場であったに違い無い。
柳北はいつもこう言う場所に立っている。女好きだしね。

レスポンシブにはtableではなく、dlを使おう

以前、tableをレスポンシブ化する方法を報告した。ただ、これは縦横を(行列を)入れ替えるといった形であまりよくないので、tableと同様な形が作れるdl環境でやってみた。

そもそもdlとは

dlタグは、定義・説明リストを表す際に使用します。 dl~/dlの中に、 dtタグで定義・説明される言葉を、 ddタグでそれに対応する説明を配置してリストを作成します。 例えば、用語の定義リストを作成したり、何かの手順を箇条書きで説明する場合などに使用します。(クイックリファレンスから)
たとえば

HTMLソース

ブラウザ上の表示
作者

ジョン
ポール
ジョージ
リンゴ

しかもhtml5からは一つのdtに複数のddを付与できます。

要するにdlはデータリスト環境だということです。

(このdlの使い方についてはかつて「小技集」25で紹介しました。)

table表をdlに変更する

実は具体的な要求があります。さくらサーバーで提供されている問い合わせフォームをレスポンシブ化したいという要求です。以下がそのhtml部分です。

このtableをdlに、thをdtにtdをddに変えます。trは不要です。

cssに変更を加えます。表のような形にするわけです。

ポイントは
dtの clear: left;
float: left;
width: 26%;

ddの margin-left: 27%;

です。dtをfloatさせて、幅を決め、その幅と同じ長さをddで左マージンを取るわけです。(ただし1%多く取るときれいに表示できる)こうすると横に並びます。
後は罫線部分です。dlでトップ以外を引き、dtでトップを、ddで左とトップを引きます。
これでほぼ表と同様な形ができます。
(なお、htmlの改行タグbrを使っている部分も複数のddに変更します。)

スマホデフォルトのcss

実は表の形はPC用ですから、スマホでは最初のcssに変更を加えない形がむしろいいということになります。

ただ、このまま(postmail01.html)ではそっけないのでcssを書きます。

これをデフォルトにして、メディアクエリーでPC用を書けば良いということになります。
完成形

ここではiPad縦置き以下から表示が変わるようになります。

実際に運用する場合はhtmlのheadに以下を書きます。

実例は以下をご覧ください。
実例
以上

 

洋風濡れ縁(ウッドデッキ)作成

洋風濡れ縁(ウッドデッキ)を作ってみた。
今回は材料を以前買ってあった安価な輸入品のツーバイ材(息子のところにごみ置き場を造るため)とDIY店で売っていた赤松のシラタの角材。
ファイル 2015-11-16 17 39 25
脚になる部分を3脚作成。太い角材の上に溝を彫って、横に木を渡し、下にも横木を嵌めて作成
ファイル 2015-11-16 17 39 13
それを長いツーバイ材でつなぎとめる。いたって簡易な方法。もちろんス全てボルト締め。
ファイル 2015-11-16 17 38 30
但し庭に置くので、底が平らになっていなければならず、今回ここが一番大変だった。穴を掘ってブロックを一個半平らにおいた簡易なもの。
羽根突きの置石も考えたが、これだと脚を低くしなければならず、置石が出っ張ってしまうのでこの形にした。
ファイル 2015-11-17 15 15 35
後はツーバイ材を貼っていくだけだが、柱の間に横木を入れて、止めておきその上で3脚の柱の横木に止める。ここもビス止めだが、ダボで化粧している。
ファイル 2015-11-16 17 38 11
部屋の床とほとんどフラットの高さにした。何とか水平は保てているようだ。
塗装は組み立てる前にあらかじめ塗装しておいて、天板のみ後からもう一度塗った。キシラデコールのチークを使った。
なお、設置後高さがかなりあるので、かみさんの要望で踏み台も作った。二つ作って普段は横に置いて置くことにする。
ファイル 2015-11-17 14 40 25
作りはほとんど同じだが、やや頑丈に作ったつもり。
これで完成。これからは冬だがあったかい日にはここで喫煙・お茶ができそう。木工もここでやれるかも。と楽しみにしている。
ファイル 2015-11-17 14 42 49ファイル 2015-11-17 14 42 31

レスポンシブデザインのメニューについて

以前既存のサイトをレスポンシブ化する際のメニューについてslicknavというのを紹介した。しかしこれは適さないという向きもあるだろう。
既存の横メニューを2段や1段に表示させたいという場合があるかもしれない。
その場合の技を書いてみる。
いろんなやり方があるだろうが、ポイントはメディアクエリー内でfloatが効かないということとここでもスマホデフォルトで考えるということだ。
具体的に言おう。
普通横メニューはlistを使って、それを左からfloatさせ、メニューの数によってwidthを%で決める。
スマホデフォルトということはfloatを止めて、widthを100%近くにすれば縦にメニューが並ぶ形になる。
しかし、こうするとPC表示の時に改めてfloatさせなければならなくなる。しかし、メディアクエリー内でfloatが効かない。
どうするか。
スマホデフォルトでfloatをそのままにしておいて、widthを100%近くにすればいいのだ。そしてメディアクエリー内で%を変えてやればいい。
例えばメニューが4個だとすれば、50%に近ければ2段になり、25%に近くすれば1段になる。
これが簡単な方法だということに今更気付いたので。