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 ぐら




8月9日の勉強会報告

今回は、「Brackets」の扱い方について復習しました。前回の学習(7月19日)と重なる部分が
ありますので、その部分は省略しました。前回の勉強会報告と併せてお読みください。

👤 デスクトップに作った新規のフォルダに名前を付けます。→「tonnet」
👤 フォルダを右クリックして「open as brackets object」を選び、bracketsを開きます。
🎵index.htmlとstyle.cssを作る。(前回に詳述)

🎵サイドバーに出るhtmlとcssの文字がブルーになっているのは「作業中」の目印。
a005.JPG

🎵作業中のhtmlやcssの前に「・」がつく。上書き保存すると、「・」は消えます。
WS000000.JPG

☁ htmlのbodyとbodyの間に
     header
   #main
   #side
    footer

🔑 headerの上でtabキーを押すと、
  <HEADER> </HEADER>になります。

🔑 #mainの場合、tabキーを押すと<DIV ID="MAIN"> </DIV>に変わります。
  #side,footerも同じです。

☁ css側では
   header  w980
  h100
  bgc #000(任意の背景色)

 #main  w700
  h500
  bgc #000(上に同じ)

  #side   w280
  h500
  bgc #000(上に同じ)
 
  footer W980
  h50
  bgc #000(上に同じ)

🎄 下のように4つの箱をタテに並べます。
a001.JPG

⛵ bgc(背景色)を早出しするには、#000上で右クリック→[クイック編集]
を選ぶと、下記のようにカラーピッカーが出ます。
003 .JPG

0004.JPG

🐱 タテに並ぶ4箱をヨコ並びにデザインするために、まずhtmlにwrapperで囲みます。
<DIV ID="WRAPPER">

🐱 css側のheader、#main,#sideにfl(float:left)を追加します。
 floatの流れを止めるために html側に<DIV ID="CONTENTS" CLASS="CLEARFIX">と入れます。

🚩 css側には、下の定型句を書きます。
    .clearfix:after {
   content:" ";
   display:block;
   clear:both;}

🔍その他、いろいろ
🏁 htmlとcssに関する必要な基本構文(reset, clearfixなどの定型句,4月4日勉強会で
  配布済み)は、いつでも使えるようにデスクトップにフォルダで備えておくこと。

⚽ 宿題は、wrapperでくくって、全体図を中央へ移行しておくこと。

002.JPG

⚾ bracketsは、GoogleChromeとマッチしているので、IE(インタネット・エクスプローラー)でダウンロードして使うと、不具合がでるとサンキュウ―さんが教えてくれました。

⛳ 新加入予定の岡田さんは、ご都合でお休みでした。

⁉ <HEADER> </HEADER> 等は本来、小文字ですが、対句にすると、指示タグとみなされて、ブログに反映しませんでしたので、大文字にしています。

🎾 次回は、今回の復習と完成をめざします。

                           by 元アラコキ

7月19日勉強会報告

「Brackets」の勉強をスタートしました👀

🚩Bracketsインストールの確認

🚩Brackets拡張機能のインストールの確認
ファイル→拡張機能マネージャーから入手
たくさんの拡張機能があるので便利なものは入れておく
   ・emmet ・Autoprefixer ・display shortcuts ・Beautify
の4種は最低限入れておく。
入手可能タブの右上の検索窓に「emmet」と入れて検索
→インストールボタンを押す
※インストール済タブで確認できる
※ネットで検索するとBracketsの便利な拡張機能が紹介されている

🚩Bracketsを開く方法
①ファイル→フォルダを開く
②フォルダごとBracketsの画面上までドロップ(これが簡単)
※Bracketsはフォルダ単位で開く
※ファイルの切り替えは左のサイドバーで行う
※フォルダ内のファイルを削除するとBrackets上のものも削除される

🚩新しいファイルの作成方法
①HTMLファイルを作る
ファイル→新規作成(Ctrl+N)→作業中のファイルの下に青字で「名称未設定-1」とでる
②htmlファイルに変える
右下のText ▼をクリックしてHTMLを選択する
③名前を付ける
ファイル→名前をつけて保存
保存先:brackets_lesson
ファイル名:index,html  (半角英数 .htmlは変更不可)

④cssファイルを作る
ファイル→新規作成(Ctrl+N)→作業中のファイルの下に青字で「名称未設定-2」
⑤ cssファイルに変える
右下のtext▼をクリックしてcssを選択する
⑥名前をつける
右サイドバー青字「名称未設定2」を右クリック→名前を付けて保存
保存先:brackets_lesson
ファイル名:style.css

🚩HTMLファイル(index.html) を書く
①! を入力後 Tabキーを押す(ctrl+Eではない!Tabキーだけ!ラクチン)
   無題.jpg

②bodyの中に #wrapper>header+#side+#main+footer|c と入力しtabキー
    無題2.jpg

③リセットcss
「基本構文ファイル」の定型文をコピペする
ペーストの位置はheadの中でできればタイトルの下
④cssのリンク
link + tabキー
⑤上書き保存(Ctrl+S)
※サイドバーの名前の前に・がついていたら保存できていない状態なので上書き保存する

🚩CSSファイル(style.css)を書く
① @でcharsetがでてくる→@charset"utf-8";
②上書き保存(Ctrl+S)
※サイドバーの名前の前に・がついていたら保存できていない状態なので上書き保存する   
※index.htmlファイルのheaderの上で右クリック
→クイック編集→新規ルール→style.cssでcssが編集できる
         無題3.jpg
        無題4.jpg

🚩ライブプレビューでリアルタイムに画面を見る
右側のサイドバーいちばん上のマーク雷マークを押す→ネットが開く
このライブプレビューとhtmlファイルを画面の左右に配置して作業するといいとのこと

~ちょっとブレイク豆知識~
①画面を2画面にして左右で便利に使う
キーボード右下windowsロゴマーク+矢印キー(→ ←)
②画面の文字の調整
ctrl押しながら+や-キーを連打して見やすくする
③サイドバーをかくして画面いっぱいにつかう 
表示→サイドバーを隠す
 


本日岡田さんが入会されました。
次回は8月9日です。
 よいこでした

brackets使い方復習です!

次回の勉強会までに時間があるので、復習です。

①まずはフォルダを作りましょう。
bracketsはフォルダ単位で編集しますので、必ず作業用フォルダが必要です。
フォルダの作り方はわかりますか?
分からない方はこちら・・・
http://rsmay.com/online/shoumeisho2/body01-2.html

フォルダの名前を適当に付けてください。。。って言うと迷う人がいるので(笑)
testという名前のフォルダを作りましょう。


②bracketsを開いてみましょう。
bracketsのマークをクリックしてください。

brackets.jpg

③bracketsでtestフォルダを読み込ませましょう。

1.png

まずはココまで!やってみましょう!
出来ない人はnonkohanまでメールください!!!!!