12月6日(水)の勉強会

【本日の授業の概説】

スマートフォンでよく見る形のナビゲーションメニューが作りたいなあ、どーしよっかなあ」という時に活用できるスキル[ハンバーガーメニュー(meanmenu)]が、本日のテーマです。


私はスマートフォンを持っていないので知りませんでしたが、ハンバーガーボタン (ハンバーガーアイコン)とは、スマートフォンサイトでよく見る三本線のボタンです。大抵の場合ハンバーガーボタンを押すとその下にメニューが展開されます。そしてもう一度ボタンを押すとメニューが折りたたまれます。

アコーディオンのように伸縮する様から、こういったメニューをアコーディオンメニューとも呼びます。単純にハンバーガーボタンから展開されるメニューという事でハンバーガーメニューとも言います。

この、ハンバーガーメニューを知識として理解することが、次回から始まるレスポンシブルデザインスマホ対応には不可欠となります。ホームページ作成において、今後はスマホ対応にすることを前提に授業が進められると思いますので、本日のテーマ「ハンバーガーメニュースマホ対応」については十分に理解していただきたいと思います。


【本日の授業内容】

1.nonkohan講師より「ハンバーガーメニュー」というフォルダをUSB経由でGET!

 このファイルには(1)before(2)meanmenu使い方(3)images(4)afterが入っている。


2.まず、「ハンバーガーメニュー」を開いた後で、(1)beforeのファイルを右クリックしてブラケットで開く。(1)before内には何も入っていない空白の状態である。


3.この空白に「indx.html」と「style.css」をブラケットで作成する。


作業ファイル新規作成名前を付けて保存→ indx.htmlと名前をつけて保存。

この中に、一から書き込むのが面倒な方は、前回11-29の「これだけは覚えておこう改訂版」の中のHTMLの基本構文その1から基本構文をコピーして貼り付けて保存する。


作業ファイル新規作成 名前を付けて保存style.cssとつけて保存。先頭部分に@charset "utf-8";を記入する。


4.html<body></ body >の間に、nav>ul>li*3(短縮形)を打ち込みTABキーを押す。そうすれば、<nav><ul>  <li></li> <li></li>< li></li> </ul></nav>となる。


5.<li></li>の間に、aを打ちTABキーを押すと、<li><a href=""></a></li>となる。<li><a href=""></a></li>3つ出るので、それぞれの""#を打ちこむ。そして<a href=""></a>の間にメニュー1,メニュー2,メニュー3を記入する。<a href=""></a>によりカーソルを当てれば他のところにリンクさせることが出来る。


【完成形】

navはなくても結果は同じ。しかしナビゲーションの役割をしているとPCに教える。

<body>

<nav>

    <ul>

        <li><a href="#">メニュー1</a></li>

        <li><a href="#">メニュー2</a></li>

        <li><a href="#">メニュー3</a></li>

    </ul>

</nav>

</body>


6.次にリスト1,2,3を横並びにさせる。横並びの手順として必要な3要素は

(1) 幅を決める(2) それぞれにフロートをかける(3) 親要素にフロート解除指示。


7.前記6の指示は全てCSSで行う。CSSには下記のように記載する。


@charset "utf-8";

nav ul {width: 454px;margin: 0 auto;}


nav ul li {width: 150px;              float: left;           border-left: 1px solid #000;

              text-align: center;}


nav ul li a {       display: block;text-decoration: none;              color: #000;

              font-weight: bold;}


nav ul li:last-of-type{border-right: 1px solid #000;}


上記の指示における短縮形は下記の通りである

w454width: 454px;m0-a margin: 0 auto; fl  float: left;

bl+ border-left: 1px solid #000; br+border-right: 1px solid #000;

tac text-align: center;  dbdisplay: block;  tdntext-decoration: none;

ccolor: #000; fwbfont-weight: bold;

nav ulli la: last-of-type nav ul li: まで打てばlast-of-typeが選択できる。そして、nav ul li:last-child{  br+}を入力する。


8.前記7までの作業で、ホームページの外観が出来上がったので、これをスマホ対応するためにはジャバスクリプトの指示を出す要素 [meanmenu,css]にリンクさせる必要がある。その手順を下記ので行う。


afterフォルダ内にある[meanmenu.css][jquery.meanmenu.js]

beforeフォルダ内に張り付ける


htmlheader内スタイルシートのリンク最後に下記を記載する。

               <link rel="stylesheet" href="meanmenu.css">


bodyタグの最後</body>の前にjavascript(下記の指示)を貼り付ける。

下記の文章は、【1-(2)meanmenu使い方のフオルダー】内にあります。


<!-- meanmenujavascript読み込み -->

               <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

               <script src="jquery.meanmenu.js"></script>

               <script>

                               jQuery(document).ready(function()

       {jQuery('header nav').meanmenu();});

               </script>


9.<nav></nav>の外側を<header></header>でくくる。

上記のジャバスクリプトの指示は、‘header内のnav’に適用されるので、<nav></nav>の外側を<header></header>でくくらなければなりません。くくって下さい。


【最終完成形】

<body>

<header>

<nav>

<ul>

<li><ahref="#">メニュー1</a></li>

<li><ahref="#">メニュー2</a></li>

<li><ahref="#">メニュー3</a></li>

</ul>

</nav>

</header>


10.これで完成です。スマホ対応になったかはパソコン画面で検証して下さい。

 検証するには、表示画面を出し右クリックで検証をクリック、スマホ画面で表示させて、ハンバーガーメニューが出来ていればOKです。よくできました。ハンバーガーメニュー画面の背景色や、透明度等を変えるにはmeanmenuで指示を行って下さい。(指示の箇所はnonkohan講師により示されています)。

kensyou.jpg


11. さて、何か忘れていませんか・・・、親要素にフロートの解除がなされていません。どうするかは、会員の皆さんならすぐわかると思いますので、フロート解除の指示(短縮形:ofh)を親要素に組入れてみて下さい。


12 ちなみに、前回の授業で会員の方からブロック要素とインライン要素についての質問がありました。単純に訳すと、ブロックは塊、インラインは詰め込むという意味です。塊には幅が指定できますが、詰め込みには幅は指定出来ないということです。また、固まりの中に詰め込むことが出来るのであり、固まり(ブロック要素)を詰め込み(インライン要素)で囲む状態(例: <a href="#"><li>メニュー1</li></a>)は間違いということを認識しましょう。これについてわかりやすく説明しているサイトを下記に示します。

CSSdisplayの使い方を総まとめ!inlineblockの違いは?

     https://saruwakakun.com/html-css/basic/display

                   

                             by ショコラ

11月29日(水)の勉強会報告

先週から3週連続となる勉強会の2週目です。
最初に先週の復習で短縮形タグを入力して「ボックスレイアウト」の作成をおさらいしました。
今週のテーマは「これだけは覚えておきたいメニューの作り方」です。
本日配布されたテキストメモに全て説明されていますが簡単にご紹介です。
 1.リストには番号なしリストulと番号ありリストolがありますが
  通常良く使う番号なしリストulで<li></li>を括ります。
 2.更にリスト全体の<ul></ul>を<nav></nav>で括ります。
 3.リストはブロック要素…横幅いっぱいのエリアを持っています。
 4.メニューリストは当たり前ですがどこかのページへ飛ばすため、リンクを貼ります。
 5.リンクの<a>を貼ることでリストはブロック要素からインライン要素に変化します。
 6.インライン要素に変化したリストは文字の大きさ分しか容積がありません。 
  容積の無いリストは、当然に非常にマウスが押しにくいので横幅やサイズ指定して
  容積を増やして見栄えを良くする必要があります。
 7.だからインライン要素をブロック要素に指定するdisply:block;を付け加えます。【お約束事】


  インライン要素とは文章の一部としてブロック要素内で使用される。
  ブロック要素とはひとつにまとまったブロックを構成する要素

やっと先日より解らなかったfloatが理解出来る様になりましたが、また新しい課題の
「ブロック要素」「インライン要素」が表れました。しばらくかかりそう・・・!
                               11月の報告者 ドラフト10位


11月22日(水)の勉強会

11月度の第1回目の勉強会は約1ヶ月振りの開催となりました。
また、開催週が変則的となっている影響なのか4名の欠席者がありやや寂しい勉強会でした。

 ♦2017年の反省会日程
   ・12月20日(水)18:00~で予定していますが、会場予約してから確定です。
   ・会場はとっさま(南海金剛駅前)昨年と同じです。
 ♦2018年1月の勉強会日程
   ・第3週目/17日(水)、第4週目/24日(水) 

本日の勉強会のテーマは今週より3週連続の開催となることから、今一度基本のおさらいを
きっちりマスターした上で次のステップに行きましょうとのnonkohan講師の指導で
  1. これだけは覚えておきたいCSSの基本
  2. これだけは覚えておきたいHTMLの基本その1
  3. これだけは覚えておきたいHTMLの基本その2 の3点を学習しました。

これだけは覚えておきたいCSSの基本

フォント

セレクタ

意味

短縮形

備考

color

文字色(前景色)を指定する

c


font-weight

フォントの太さを指定する

fw

fw:b(太字bold)

font-size

フォントのサイズを指定する

fz

fzの後に数字

font-family

フォントの種類を指定する

ff



テキスト

セレクタ

意味

短縮形

備考

line-height

行の高さを指定する

lh


text-align

行揃えの位置・均等割付を指定する

ta


text-decoration

テキストの下線などを指定する

td

td:n(下線無)

text-shadow

テキストに影をつける

ts+



上記のタグの短縮形を使って「ボックスレイアウト」を作成しましたが、基本レイアウトの
作成ですから簡単と思っていたもののまだまだ先導して貰わないとダメな部分もありました。
次週は最初に上記タグを使ってHTMLの作成をもう一度やりますのでしっかり復習しておいて
ください。                          報告者 ドラフト10位

韓国 三食レポート

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

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か月空きますが、勉強をしておいてくださいと言われています。(⌒∇⌒)