韓国 三食レポート

韓国へひとり旅。
美味しく食べた庶民の味をご紹介します。

1-kayu2.JPG

朝、カボチャのおかゆ。完全に裏ごししてあり、カボチャもお米も粒が残っていません。
トロリとした濃厚なスープのようでした。まわりの惣菜は、サービスのパンチャン。

おまけのような惣菜をつける商習慣があります。無料でお代わり自由。どんな料理
にもパンチャンがつくのが、あちら流。後列左から時計回りで、辛みそ、ナムル、
じゃこ、はんぺん?、キムチ、つくだ煮のり

2-kurugussu2.JPG

昼。ブチコギ 中央が盛りあがった火鍋に肉や野菜をたいて周辺にたまる
タレにつけて食べます。日本風に言えば、すき焼きに似てるかも。味は
やや濃いめ。

上方の金物がご飯が入っているお茶碗?です。汁物を含めてパンチャン
がいっぱいつきました。



3-putikogi1.JPG

昼、カルグクス。具だくさんな韓国風手打ちうどん(中央)。目の前でオモニが叩いて刻
んでゆがいてくれます。お好みですいとん状の塊を少し入れてくれと頼むと作って
くれます。これがいい食感でした。

本番がくるまえにパンチャンが次々でてきます。のり、キムチ、汁、サンチュ、
それに驚いたことに冷麺や赤飯もつきます。うどんを食べる前にお腹いっぱいに
なります。


4-samugetan1.JPG

夜、タッカンマリ。鶏の水炊きです。薬味野菜などをいれるサムゲタン(参鶏湯)
よりは庶民的なもの。若鳥一羽をまるごと鍋にいれ、オモニがあっと言う間
に食べやすいようにハサミで分解?してくれます。

トリは辛みみそやタレがはいった小皿にとって食べます。柔らかくほくほくと
溶けておいしい。

4-samugetan3.JPG

食事にはつきもののアルコール。左はハイトビール。キリンビールに似た味。
右は長寿ブランドのマッコリ。濁酒です。炭酸が効いた酸味があって美味しい。
大衆食堂なので、オッチャンたちが気炎を上げてにぎやかに食べかつ飲んでいま
した。

S_6890854862581.jpg

さて、話はかわって、こちらは緊迫?の南北軍事境界線。あのイムジン河畔
の高台から、呼べば応える距離に北朝鮮が望めます。あいにく視界がよくな
かったのですが。晴れた日なら農作業をする人たちの姿も見えるそうです。

元アラコキ

10月18日 勉強会 メニューを作って、リンクを張る。

10月18日 勉強会報告

(時間前に講師からMeanmenuの検索して、分かる人はmeanmenuを勉強し手はと提案)

出席男性7人、女性5人、講師1人

今日の目当て

     メニューを作ってみよう。(Home, Menu1, Menu2, Menu3

l  リストを作る

l  横並びにする

l  メニューの間をあける。

     作ったメニューをリスポンスで対応させてみよう


講師から配布されたUSBをもとにメニューを作る。

配られたフォルダー[10.18lesson]上を右クリックしてOpen as Brackets projectsをあけ、

“menu_sozai”をさらに開ける。

“!” +tag  htmlのフォームを作る。

例によって、en ja,  <title> document<title>は自分好みでtitleをつける。

“body”に“Home, Menu1, Menu2, Menu3”のリストを作る。

ul>li*4 → +tag で展開

  <ul>
              <li></li>

              <li></li>

              <li></li>

              <li></li>

     </ul>

<li><li>の間にHome, Menu1, Menu2, Menu3のそれぞれを入れる。

<ul>
              <li>Home</li>

              <li>Menu1</li>

              <li>Menu2</li>

              <li>Menu3</li>

     </ul>

ライブプレビューをあけて確認。

Home

Menu1

Menu2

Menu3

次にそれぞれについている“・”を外す。

そのためにressetタグを基本構文からコピペする。

コピペする場所は<title>の下。

“・”が外れたことをライブプレビューをあけて確認。

次にリストにリンクを張る。

リンクを張る”a"(アンカー)はインライン要素。

<li>Home</li>Homeをドラッグしてshift+ctrl+aを抑えてtagをクリックすると

下にEnter Abbreviationという箱が出てくるので中に aを入れ、クリックすると

                            <li><a href="">Home</a></li>が候補として出てくる。

enterで決定する。“”に#をダミーで入れる。

                            <li><a href="">Home</a></li>

Menu1にマウスをドラッグすると<li><a href="">Menu1</a></li>と表示されるのでenter

同様に“”に#をダミーで入れる。                 

                            <li><a href="">Menu1</a></li>

同様に               <li><a href="#">Menu2</a></li>

                      <li><a href="#">Menu3</a></li>

ライブプレビューをあけて確認。

マウスをHomeに移動するとマウスは矢印〔↑〕から手のひら〔👆〕に変わっていることを確認。

リンクが張れていたら文字は青、下にラインが入っていることを確認.

簡略化したstyle sheethtml内に作る。

今回は、リストを作り、デザインすることだけを目的とするので“style.css”を“head”内に作る。

リセットタグ“reset.css”のすぐ下に

style + tag   → <style> </style>と展開し、 </style>を改行。

<style> </style>の中でデザインをかけていく。

リンクを張ったHome の文字の色をとして、下線を消す

ul の下の li の下の a(アンカー)をデザインする。

下線を外す。下線を外す短縮形は tdn (text decoration no) +tagで展開。

              ul li a {

                            text-decoration: none;

             }

ライブプレビューをあけてアンダーラインが消えていることを確認。

文字を黒にする。

              ul li a {  } 内にcと入力し、+tag すると 

              color: #000;   #000は黒色

              ul li a {

                            color: #000;

                            text-decoration: none;

             }

ライブプレビューをあけてMenu1, Menu2, Menu3が黒色になっていることを確認。

リストを横並びにする。

方法1 

インライン要素とブロック要素を両方持っている。

インライン要素として横に並び、なおかつ一つ一つは塊ですよというdisplay inline blockを使う。


リスト全体を動かしたいので、ul の li だけにかける。

ul li {    } {}内に dpibと打ち、+tag

ul li {    }           → ul li { display: inline-block;}

ライブプレビューをあけてMenu1, Menu2, Menu3が横並びになっていることを確認

方法2

floatを使うと解除が必ず必要となる。方法1のほうが一行入れるだけで簡単です。

floatを使う方法。 これには、親要素を作って<header class =”clearfix”>class指定し、

ul li a {

                            color: #000;

                            text-decoration: none;

                            float: left;  (fl +tag)

             }

</style>の前に  */.cf:after {

    content:" ";

    display:block;

    clear:both;}    を設定する。

リストの左側に縦棒を入れる。

左に縦棒を入れるには、boarder leftを使って

 ul li {

 display: inline-block;

bl+ +tag で展開すると border-left: 1px solid #000; }

ライブプレビューをあけて|Menu1, |Menu2, |Menu3がになっていることを確認

縦棒とhomeの間でhomeの左に 20pxの空間を作る

ul li {

display: inline-block;

border-left: 1px solid #000;

pl20  +tagで展開すると padding-left: 0px;}

ライブプレビューをあけて| Home. | Menu1, | Menu2, | Menu3がになっていることを確認

メニュー全体を右に寄せる

ul を動かすので

ul {  }内に fr   +tag と展開し、

ul { float:right }

  float を入れると幅を指定する。幅500pxを作る。W500  +tagで展開。

              ul {

                float:right

                width:500px; }

</style>の上に

*/

.cf:after {

    content:" ";

    display:block;

    clear:both;

}     を入力する。

ライブプレビューをあけて| Home. | Menu1, | Menu2, | Menu3が横並びになっていることを確認。

メニューにマウスを移動したときに色を変えて表示する。

hoverを使う。

メニューのアンカーにデザインをかけるので

ul li a:hover{  }に c を入力し、+tagする。 color:#000が表示。#000は黒色。

変化をつけるために、#000を右クリックして、カラーピッカーを表示し、好きな色をクリック。

 ul li a:hover{ color: #f50f0f; 

変化をわかりやすくするために、文字をゴシックにする。       

ul li a{  }に font-weight: boldとする。Fwbと入力する。

ul li a{font-weight:bold }となる。

ライブプレビューをあけて| Home. | Menu1, | Menu2, | Menu3の色が変わり、太字になっていることを確認。


html全体を表示すると

<!DOCTYPE html>

<html lang="ja">

<head>

            <meta charset="UTF-8">

            <title>レスポンシブデザイン対応のメニューを作ろう</title>

            <!-- リセットCSSとのリンク-->

            <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">

            <style>

         ul{

            float: right;/*全体を右へ  */

            width: 500px;/*fロートを使うと幅を入れる、親要素にclass指定でclearfixをいれる*/

        }

        ul li{

            display: inline-block;/* リストを横並びにする */

            border-left: 1px solid #000;/*リスとの左に縦棒を入れる  */

            padding-left: 10px;/*棒と文字の左に空きを作る  */

        }

        ul li a{

            text-decoration: none; /* 1リンクのアンダーラインを消す*/

            color: #000; /*文字を黒にする */

            font-weight: bold;/*太字にする  */

           

        }

        ul li a:hover{

            color: #f50f0f; /* マウスをメニューの上に移動するとメニューの色が変わる   */

        }


      /*

=============================

.clearfix

=============================

 */

.cf:after {

    content:" ";

    display:block;

    clear:both;

}     

        </style>

</head>

<body>

            <header class=“clearfix”>

                <ul>

                    <li><a href="#">Home</a></li>

                    <li><a href="#">menu1</a></li>

                    <li><a href="#">menu2</a></li>

                    <li><a href="#">menu3</a></li>

                </ul>   

               

            </header>

</body>

</html>



White が記録しました。

もう一度、自分で作ることが課題となりました。

質問があれば次回の勉強会で講師さんに聞いてください。

11月例会は、1122日、1129日になります。

ほぼ、1か月空きますが、勉強をしておいてくださいと言われています。(⌒∇⌒)

9月20日勉強会の報告

前回と同様に復習です

講師から頂いたフォルダー【レスポンシブデザイン課題】の中の"基本構文+レスポンシブ" ファイルをデスクトップ上に貼り付けます。

tonnetのフォルダーを開きindex.html,style.cssの中を全て消します。
最初から作り始めました(前回の報告書に作成方法は詳細に記述されていますのでご覧ください。故に省略します。)

下記の状態になる様にレスポンシブデザインを指示します
  pc用          スマホ用                    
pc1.PNG →→  sumaho2.PNG 
css側
@charset "utf-8";の下に講師から頂いた【レスポンシブデザイン基本】css用の/*全サイズ共通cssとスマホ用*/をコピーし貼り付けると同じく.clearfixもコピーし貼り付けます。

/*全サイズ共通cssとスマホ用*/の下
header{
     width:100%;
     height:300px;
     backround-color:#任意の色指定;
}
#main{
     width:100%;
     height:500px;
     backround-color:#任意の色指定;
}
を指定する。
widthを100%に指定するのは全画面表示にしたいからです。
ここに表示するのは/*タブレット用*/、/*pc用*/の{ }で括らない全てに影響します。
/*.clearfix*/
.cf-after{
     content:"";
     display:block;
     clear-both;
}

/*タブレット用*/
今回はheaderの背景色のみ指定しました
@media(min-width:600px){
     header{
         background-color:#任意の色指定;
}
}

/*pc用*/
@media(min-width:960px){
    前回の報告書に詳細に記述されていますのでご覧ください。故に省略します。
}

検証方法
bracketsを開きbrackets の index.html、側で稲妻マーク(ライブブレビュー)をクリックするとpc用の画面が表示される。
画面の上で右クリック→検証クリック
   
ke.PNG
検証モードにするとpc用の全画面表示を左右に移動しなくとも、スマホ、タブレット用と画面を見ることができます。とても便利です

使い方
iphone 6 ▼→→→→  下向き▼をクリックして機種の変更が可能です。
rotate →→→→→→  クリックして、横向き、縦向きに変更が可能です。
右側の縦長はpc用の全画面表示が表示されます。

復習の部分を大分省略しましたが抜け落ちている箇所があると思います、補足など宜しくお願い致します。

お知らせ
11月勉強会日程変更に注意して下さい
11月22日(第4水曜日)、29日(第5水曜日)です

きらら記




      

続きを読む

9月6日の勉強会報告書

 96日勉強会報告書
 823日ぐらさんの報告書の続きです。
 今回から可変レイアウト(スマホ、タブレット、パソコンなど全ての閲覧環境に対応するレイアウト)について学びます。
  
 HTMLファイルの記述
 まず、HTMLファイル(index.html)に可変デザインであることを宣言するViewportを設定します。
 その方法は、<meta charset=”utf-8”>の下にmetavpと記述し、tabキーをクリックする。(tabキーをクリックすることを以下「展開」と表示する)
 すると、<meta name=viewport content”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0”>と表示されるが、とんだばやしネットの教室では、不要なものを省略し下記のように簡素化したものを使用すると講師から説明された。
 その推奨構文は<meta name=”viewport” content”width=device-width, initial-scale=1.0”>である。この構文は、今後もよく使うので、講師から提供されている「HP基本構文メモ」のHTMLきほんの中へ追記しておくとよい。
 これでHTMLファイルの記述は終わりなので、「ctrl+S」で上書き保存する。
  
 CSSファイルの記述
 従来は主にPC(パソコン)で見るホームページ作成の勉強会だったのでCSSはほとんどの場合一つであっ
 た。(複雑なホームページでは複数のCSSに分けて記述することもあったが可変レイアウトとは違うもので
 である。)
 可変レイアウトでは画面サイズ別(スマホ、タブレット、パソコン)のCSSをメディアクエリーという機能を使っ
 て記述しなければならない。
 メディアクエリー(Media Querites)とは画面サイズの閲覧環境に応じて適用するスタイルを切り替える事
 ができる機能のことである。詳しくは講師より配布されている「レスポンシブデザインのための手順と意味」
 を参照。
 勉強会での可変レイアウト作成に必要な各サイズを下記に表示する。
 ①スマホ(全サイズ共用)    ②タブレット用        ③パソコン用           
    header              header             header
    w100%                               w980px
    h300px                               h100px
    bgc 任意            bgc  任意           bgc 任意
  
       #main                                  #main                            #main
    w100%               w60%                            w700px
        h500px                                                                     h500px
        bgc 任意                            bgc 任意                        bgc 任意
                                                  fl
  
       #side                                   #side                             #side
       w100%                                 w40%                             w280px
       h200px                                                                      h500px
       bgc 任意                              bgc 任意                       bgc 任意
                                                   fl
  
       footer                                   footer                             footer
    w100%                                w980px
        h100px                                                                      h50px
        bgc 任意                              bgc 任意                       bgc 任意
  
 上記サイズ表を見るとwidthの単位が今まではほとんどの場合pxであったが可変レイアウトの場合は
 widthの単位が%になっているのもあるので要注意。
 スマホ用は画面いっぱいに表示するのでwidthは100%表示が原則。
  
 上記の単位別の記述の仕方
   w100+展開 ➡ width:100px;
   w100p+展開 ➡ width:100%;
  
   fl+展開 ➡ float:left;
  
 bgc(background-color)は任意と表示しているが同じ色を使わないこと。スマホ用、タブレット用、pc用
 3つのheader、#main、#side、footerのカラーは変えておくと見やすい画面になる。
  
 可変レイアウトの記述
 style.cssのファイルをクリックする。文字色がブルーになり、作業中ファイルになっているのが確認できる。
 ①メディアクエリーの公式をコピーする。
  方法は、講師から提供されている「レスポンシブデザインのための手順と意味」の一枚目下段で四角で
  囲まれている部分(Media Queriesといって可変レイアウトを作成するための公式)を全てコピーする。
 ②コピーした公式をCSSファイル最上段@charset”utf-8”;の下の行にペーストする。
 ①、②で、スマホ用、タブレット用、パソコン用と3つのCSSが記述できる準備完了である。
 ※メディアクエリーはスマホ用、タブレット用、パソコン用の順にCSSを編集していくのが一般的手法。
  
 スマホ用CSSの記述
 スマホ用のheader、#main、#side、footer のサイズ等は上記に示してあるので参照してほしい。
  header{
    w100p+展開 ➡ width:100%;
    h300+展開 ➡ height:300px;
 
   bgc+展開 ➡ background-color:#fff;と表示されるので、右クリック➡
   クイック編集でカラーピッカ
    -が出てくるので任意のカラ-を選択する。選択を終了したら☓ボタン。
  }
   上記headerと同じようにして,#main、#side、footerを完成させる。
  
 ※前回の勉強会でPC用CSSで#mainと#sideが縦並びだったのを横並びにした時     float leftをかけたが
   #mainと#side以外にはfloat leftを影響させたくないので、float leftを解除させる公式clearfix(cf)を
   使ったが、このclearfixはすべてのCSSで使用することになるので、全サイズ共通CSSとスマホ用の
   所に記述する。この公式は、HP基本構文の中のCSSきほんからコピぺする。
   (今回はパソコン用CSSにすでに使われているのでそれをコピペしてもよい。)
  
 タブレット用CSSの記述
 タブレット用のCSSはMedia Queriesの公式@media(min-width:600px){      }の中に記述していく。
 タブレット用のサイズ欄を見るとheightの表示がないのが多いがheightはcontentsの内容により、変化
 するものなので、特に指定しなくてもよいとされている。タブレット用CSSのheaderはwidthが省略されて
 いるが、これはスマホ用と同じwidth:100%;使うのでサイズ指定されていないのである。
 以下指定されているサイズ及び背景色についてはスマホ用CSSを編集した時と同じ要領で記述する。
 全てに記述が完成したら、ctrl+Sで上書き保存する。
 index.htmlをクリックして、作業中ファイルにして、稲妻ボタンをクリックし、表示された画面を見ると、
 #mainと#sideの高さが違っているため、#sideの下側が白くなってしまっているので、#sideの下に
 #contents{      }を記述し、bgc+展開で、background-color:#fff;となるので、#fffを#sideの
 背景色と同じカラー番号にすれば白いところがなくなり見やすくなる。
  
 PC用CSSの記述
 PC用のCSSはMedia Queriesの公式@media(min-width:960px){      }の中に記述していく。
 PC用のCSSは前回の勉強会で完成しているので、上記の{      }の中に移動させればよい。
 移動が完成したら、ctrl+Sで上書き保存する。
 稲妻マークで画面を表示させ、画面上部の□(拡大・縮小)マークをクリックして、画面を少し小さくし、
 画面の両端のどちらかにカーソルを合わせ、移動させれば、パソコン、タブレット、スマホの3つの画面を
 見ることができる。
 パソコンからタブレットへ、タブレットからスマホへと切り替わる点をブレイクポイント(分岐点)という。
  
 以上、9月6日の勉強会報告書をアップしました。理解しているつもりでも文章にあらわすことは難しく、
 説明不足も多々あると思います。講師のDさん、勉強会参加の皆さん補筆、加筆よろしくお願いします。
 担当はサンキューでした。

8月23日の勉強会報告

今回は前回の復習を一からしました。
内容は前回報告で詳述されていますのでご覧ください。
前回報告の続きより書きます~。

⛳全体をwrapperでくくり真ん中に表示させる
(htmlファイルで)
body内を全体ドラッグして、shift+ctrl+Aを押す 
  ↓
下の方に四角い欄がでるのでそこに#wrapperと記入してenter押す
  ↓
全体がwrapperタグでくくられます
  ↓
wrapperタグ上で右クリックしてクイック編集選ぶ
  ↓
w980と記入してタブ押す
  ↓
m0-aと記入してタブ押す
  ↓
htmlファイルもcssファイルも上書き保存する
  ↓
htmlファイルをアクティブにしてライブビューで全体が中央なっているのを確認

⛳ここから新しいことを学びます
●「可変レイアウト」にするにはどうしていくのか??●

☕レスポンシブデザイン勉強会用というフォルダ内の
「レスポンシブデザインのための手順と意味」を開きよく読みます。

①HTMLにビューポート(viewport )を設定する(emmet・・・meta:vp)
(意味は、メタビューポートで「可変デザインだぞ」と宣言することなのだそうです)

(htmlファイルで)
metaタグの下に、meta:vpと記入してタブを押す
  ↓
<META NAME="VIEWPORT" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> が出るので、
可変デザインに必要な部分表示だけ残して書き換える。

 ・width=device-widthとは、幅はデバイスの幅でという意味
          (そのまま残す)

 ・user-scalable=noとは、ユーザーが拡大・縮小はできない、という意味
         (この文全部削除する)

 ・initial-scale=1.0とは、最初の拡大率は1.0倍だという意味
           (そのまま残す)

 ・maximum-scale=1.0とは、最大倍率は1.0倍
    (つまり拡大表示できないという意味なので、削除する)
 ・minimum-scale=1.0とは、最小倍率は1.0倍
    (つまり縮小表示できないという意味だが、あってもなくてもよいので残す)

✋以下が出来上がりのhtmlファイルのhead内です
小文字で打つと表示されないので大文字を適当に混ぜていますが、
本当はすべて小文字です

<head>
<meta charset=”UTF-8”>
<meta name=”viewport” CONTENT="WIDTH=DEVICE-WIDTH, initial-SCALE=1.0, minimum-scale=1.0”>
<title>ブラケッツ練習</title>
<link rel="STYLESHEET” TYPE="TEXT/css” HREF="HTTP://yui.yahooapis.com/3.18.1/build/CSSRESET/CSSRESET―MIN.css”>
<link rel=”STYLESHEET" HREF≒“STYLE.css">
</head>

次回からいよいよ本格的に可変レイアウト学習スタート!
よろしくお願いします。
           by ぐら