コリアタウン漫歩

ソウルに行きたしとおもえども、
目下、朝鮮半島はきな臭い。

で、生野のコリアタウンを二つ歩きました。

korea.jpg


まずは桃谷のコリアタウンこと御幸通り。歓迎アーチが迎え
てくれる。長さ300mの商店街の左右には、キムチ専門店
やら豚肉店やら飲食店、人気の韓流スターグッヅやコスメ店
がずらり。

P1040572.JPG

キムチは、どれでもおおむね1g1円と、知り合いに聞いてき
いて来ましたが、1kg600円也のダイコンキムチ、500
g300円也の白菜キムチを買いました。お買い得だった
のかな。
P1040571.JPG

韓国ふうお好み焼きこと、チジミ。具材は海鮮ものでも牛でも
豚でもOK.手前のは、韓国海苔巻き、キンパ。これは酸味
が薄いが、ほとんど和風そのままの味。

P1040580.JPG

P1040582.JPG

ランチにしたのは、いろいろ目移りしたあげく、定番の
ビビンパ。ゴマ油の効いた豆もやし、ぜんまい、ホウレン
ソウ、卵などが盛り沢山。辛口のコチジュンをまぜまぜし
て美味しかった。右のはワカメのスープ。

日差しが強いなか十分ほどかけて、鶴橋駅周辺のコリアン
タウンへ。迷路のような路地をうろうろした。若いころ
よく行った焼肉店を探したが見つからなかった。残念
でした。

by 元アラコキ

4月 例会報告

45日の勉強会におりに話し合った結果をお知らせします。


現在、「とんだばやしネット・ブログ」は写真などが多くたまった結果、キャパを超え古いものから削除されるという不具合が生じてきている。

これを改善するために、一旦全ブログ内容を消去します。

4月から新しいものを書いていく。


上記のように決まりました。


この話し合いのなかで出た意見で次のようなものがありました。

〇ブログ記事は書かなければならないか?

  → ブログ・HPFBの三つを関連させることが大切です。

    その練習としてブログを書くことになれていくようにしてほしい。

〇記事内容について 

  → どんどん詳しくなってきているが、もうすこし略してもいいのではないか。

    また、会の報告だけにかかわらず個人の趣味なども書くようにしてほしい。

    会員の交流の場になるようによろしくお願いいたします。


会員情報

 水谷さんが退会されました。


なお、学習内容については、早退しましたので書くことができませんでした。



以上 ホワイトでした。

3月22日の勉強会報告書


3月22日勉強会報告書

勉強会内容
 floatの復習
 定義リストについての予告 次回(4月5日)の勉強会主題

floatについて(講師談)
☆floatはHPのデザインをするうえで最重要事項なのでよく理解に努めること。
☆floatを指定する場合の2つの決まり
 1.floatを指定する場合はサイズ指定が必要。 
   css上にwidth〇〇px、height〇〇px を必ず記述すること。
 2.css上でfloatを指定した場合は、html上で回り込み解除のクラス設定を
   必ず行うこと。
   そして、css上に講師から提供されている回り込み解除の公式をコピペすること。

floatの復習授業
問題1
講師が下記図を示し、これを横並びにするよう指示された。
図1
1.jpg
上記の図はhtml、css上では下記の図のように表示される。
3.jpg
css上ではbox1、box2、box3のサイズが表示されている。このbox1,box2,box3にfloat指定するにはそれぞれのboxにfloat:leftと記述する。しかし、floatを記述しただけでは不十分で、floatの解除について、html,css上にその旨を記述しなければならない。なぜならfloatは次の要素に影響を与えるから………。
それではその方法は、cssで3個のboxにfloatを指定したので、html上のbox1,box2,box3をドラッグし、選択した状態でShift,Ctrl,Alt keyを同時に押しながらEnter keyを押す。Emmet Boxが表示されるのでその中に、#wrapperとインプットしてOKボタンを押す。
html上に<div id="wrapper">と表示されるので、clear fixのクラス指定を記述する。その記述は、<div id="wrapper" class="clearfix">とする。
その後、css上に回り込み解除の公式(下図)をコピペする。

110.jpg
html、cssを上書き保存し、メニューバーの実行を使って確認する。
結果、図2が表示され、floatが完成しているのが分かる。
図2
2.jpg
その時のhtml、cssの記述は下記の図4のようになっている。
図4
4.jpg
文字が小さくて読みにくいと思われるのでクリックして文字を大きくて確認してください。
文字が小さくて読みづらいときはすべて同じ操作をしてください。
赤枠で囲んであるところが解答です。以下同じ。

問題2
次は、図1から図3になるようなfloatを指定するよう指示された。
図3
13.jpg
今回は、box1,box2にfloatを指定し、box3にはfloatを指定しない問題である。
図1のhtml、cssは下記のようになっている。
3.jpg
cssのbox1,box2にfloat:left;を記述し、box3にはfloat:left;は記述しない。
なので、htmlの回り込み解除もbox1,box2のみについて行えばよい。
html上でbox1,box2をドラッグして選択し、
上記と同じようにEmmetBoxを使用して、clearfix解除の記述をすればよい。
そして、css上に回り込み解除公式をコピペする。
記述は下図のようになる。
12.jpg
html、cssを上書き保存し、メニューバーの実行を使って
検証すれば、box1,box2が横並びになり、
float指定されなかったbox3は下に表示されているのが確認できる。
図3参照

問題3
図4が表示されhtml、cssの内容が下記の通り示された。
101.jpg

html             css
102.jpg

図4と上記のhtml、cssを起点として下記の図5となるようhtml、cssを
変化させよという問題

図5
104.jpg
上記図から考えられることは図5以外のものはすべて左寄せになっているが
図5のみは画面の中央に表示されていること。(この図では、正しく中央には
なっていないが画像の作り方が悪いだけなので中央にあると想像してください。)
box1はfloat指定なし、box2,box3にfloat指定、box4はfloat指定なし、
それぞれのboxのサイズは上記のcssから読み取ってください。
問題3が問題1,2と異なる点は問題3のみがすべてのboxをパソコン等の
中央に持ってくるというところです。この中央表示のコーディングが
追加されます。
すべてのboxを中央に表示するにはhtml上で<body>      </body>の
間にあるものをすべて一つの塊としてくくる必要があります。
その方法は、box1~box4をドラッグして選択し、EmmetBoxを利用する方法である。
EmmetBoxの中に#allwrapperとインプットし、OKボタン。
そして、中央表示するための記述は
#allwrapper{
    margin: 0 auto;
    width: 600px;
}となる。
また、box2,box3はfloat指定するのでEmmetBoxを利用し回り込み解除の
class指定を設定する。方法は上記問題2を参照すればよい。
css上に回り込み解除の公式をコピペし、html、cssを上書き保存し、
メニューバーの実行を使用して確認すれば画面中央に図5が表示されるはずである。
その時のhtml、css上は下記のとおりです。
103.jpg

3月22日が勉強会だったのに報告書が大変遅くなってしまったこと反省しています。
画像作成とブログを書いている途中で改行がうまくできなくて遅くなってしまいました。
堂園さん、藤田さん、南口さんにはいろいろ教えていただきありがとうございました。
次回からはもう少し早くできるように努力します。報告書担当者はサンキュー(三丘)




続きを読む