6月21日の報告

1.今回の課題
  
  1-1 4枚の写真(img00.jpg~imgo3.jpg)と各見出し・文章を
      それぞれ一つのグループに分けて取り込む
  1-2 各写真と各小見出し(文章含む)を左右テレコに配置する


2.紹介プログラム

  2-1 Brackets(編集用プログラム)
  2-2 CSS3(スマホ対応)
  2-3 Scratch(2020年より教科採用のビジュアルプログラミングツール)


3.連絡事項(勉強会開催予定日)

  3-1 7月 → 5日と19日 (申請書提出済)
  3-2 8月 → 9日と23日 (第2・4週に変更)


4.余録

  「Scratch」は「ドットインストール」の中に詳しく説明されているので
   興味のある方はそれを参照してください
   HTMLに使われている「JavaScript」を理解する上で役に立つと思います


                             BY    バッテリー





  


6月7日 勉強会

1.まずはこのようなデザインを作ってみよう


study6-7-NO1.png


(1)デスクトップ上に、新規ファイルを作成、ノートパッドを開き、index.htmlHTML形式として新規ファイルに保存、style.cssCSS形式にして新規ファイルに保存する。

index.htmlで !を打ち、CTRL+Eで変換、ひな形が出たら、言語をjaに変えて、リセットCSSを記載して、style.cssにリンクさせる(会員はすべて把握されていると思います)。


(2)短縮一括打ちを行うheader+#contents.cleafix>#main+#side^footer|c[CTRL+E]  

<header></header>

<div id="contents" class="cleafix">

              <div id="main"></div>              <!-- /#main -->

              <div id="side"></div>  <!-- /#side -->

</div><!-- /#contents.cleafix -->

<footer></footer>     

これでHTMLは完成です。つづいてCSSでデザインをかける必要があります。


(3)CSSでは、まず最初に@charset "UTF-8";を打ち込む。 その後、

header{}においてW100ph300bgc と短縮形を打ち込む(CTRL+Eで下記が出る)。

header{   width: 100%;height: 300px;background-color: #FF26C9;}


(4)下記も短縮形で打ち込みCTRL+Eで表示させる。 w500  h500  bgc  fl

① #main{width: 500px;height: 500px;background-color: #FFFF00;float: left;}


#side{width: 300px;height: 500px;background-color: #008C8C;float: left;}


#main#sideの両方にfloat: left;をかけたので、これはこの二つの塊でしか作用しないようにする為に、親要素の#contents"cleafix"をかけている。#contentsの中に#main#sideが詰め物として入っているので、これを中央に位置させるためには、#contentsmargin: 0 autoをかける。

しかし、margin: 0 autoをかけるには必ずサイズ指定をしなければならないので、#contentswidth: 800px; margin: 0 auto}と打つ。

ここで#contentsに高さは書かなくて良いかといえば、高さは自動的にheight: auto;が入っているのでなくても良いが、気になるなら入れてもよい(入れなくても自動的に完了済み)。


footer{ width: 100%;height: 50px;background-color: #3600D9; }


以上が今までのおさらいです。本プログの最初に表示した図が完成したでしょうか。


2.では前回の続きです。最終的には下記のイラストになるまでデザインをかけてください。


study6-7-NO2.png

(1)ここに、手順書1のよりheaderCSSを完成させましょう。

headerの背景に画像を読み込みます。(imagesフォルダの中のheader1.jpg

h1タグは24px、太字、上下に1pxの実線を引きます。

*pタグは12px

*ナビバーは14px、太字、背景に薄いグレー、リンクの下線は無し、上下に5pxpadding、ナビバーどうしがくっつかないようにmarginも指示しましょう。

hoverで背景を濃いグレー文字を白にします。


(2)上記の支持を短縮形で打ちます(CTRL+Eで全表示させる)


headerの背景に画像を読み込みます。(imagesフォルダの中のheader1.jpg

bgi+CTRL+E)  background: url(images/header1.jpg) 0 0 no-repeat;

header{width: 300px; height: 1000px;  background-color: #ff4c4d; float: left;           background: url(images/header1.jpg) no-repeat; }

[補足] 写真を入れるときはbackground: url(images/header1.jpg) no-repeat;とすべきであり、background-color:;という指示をしてはいけない。


h1タグは24px、太字、上下に1pxの実線を引きます。

header h1{fz24fwbbdt+ } (CTRL+Eで全表示させる)。

header h1{font-size: 24px;font-weight: bold;

border-top: 1px solid #000;border-bottom: 1px solid #000;}


pタグは12px

header p{fz12}CTRL+Eで全表示させる) {font-size: 12px;}  


ナビバーは14px、太字、背景に薄いグレー、リンクの下線は無し、上下に5px

header nav{fz14fwbbgc}

header nav{font-size: 14px;font-weight: bold;background-color: #DDDDDD;}


ナビバーの一塊にバックグランドカラーをつける header nav ul li{bgc}

header nav ul li{background-color: #DDDDDD;}


リンクの下線をなしにする。

header nav ul li a{tdn} header nav ul li a{text-decoration: none; }


上下に5pxpadding、ナビバーどうしがくっつかないようにmarginも指示しましょう。

display: block; の短縮形はdbです、その他は各自で考えてみてください.

header nav ul li a{text-decoration: none;padding-top: 5px;padding-bottom: 5px;

display: block;}

paddingmarginを支持する場合に絶対に忘れてはいけないことはインライン要素にはmarginpaddingは発動しない。アンカータグ(a)はインライン要素なので、ブロック要素に変える必要がある。そこでdisplay: block;という指示をheader nav ul li aに組み入れなければならない。


マウスを持って行った場合にNAVの項目のバックグラウンドカラー-や文字の色を変えるにはhoverが必要という項目が必要である。:をhoverの前に入れる。約束を忘れてはならない、

header nav ul li a:hover{background-color: #464637;color: #FFF;}



HOME WORK】今日渡した手順書2にmainを支持する説明分を記載しているので、その手順書に従ってmain を次回までに作成して下さい(写真を縦に入れてみて下さい)。


【その他 規約決定事項】 休会についての規定が決まりました。事前に1~3か月休むということを申し入れても休会として受け付けはできません。3か月までは会員は会費を支払わなければならない。3か月以上(4か月め以降の復帰予定)の場合は事前に文書(メール可)で休会届を役員に提出することで翌月からの休会会員(4か月め以降の復帰予定)として認められ翌月からの会費は支払わなくてもよい。休会が認められた会員が3か月以内に復帰する場合は過去の1~2か月分の会費を復帰の際に支払う義務が生じる。


今回のブログ担当は ショコラでした。

5月24日の報告

今回は今までの復習です。
目標は下の図の 外枠を作り header を完成させることです。
      m1.jpg
①まずはhtmlファイルに以下のボックスを作りましょう。(html)
    m1-2.JPG
  header   幅300px 高さ1000px
  #main  幅480px 高さ1000px  
  #side   幅200px 高さ1000px
  footer  幅980px 高さ30px         です
     背景に色を入れて区別できるようにする。
なので、Html のbodyにそれぞれのboxを作る。
  header main side footer を1度に作る短縮形は
     header+#main+#side^footer|c  として ctrl+E (ctrlを押しながらEを打つ)
         勿論
           #wrapper>#contents.clearfix>header+#main+#side^footer|c が良い
    m2.jpg 
                         左のようになるが右のように修正する。

CSSで箱に大きさや色を付けます
 先ず大きさ  header { 
                                      w300   +   ctrl+E           幅  
                                      H1000  +   ctrl+E          高さ  
                                       }

       #main { 
                                       w480   +   ctrl+E         幅        
                                       H1000  +   ctrl+E        高さ  
                                       }

                           #side { 
                                       w200   +   ctrl+E         幅    
                                       H1000  +   ctrl+E        高さ
                                       }

                           footer { 
                                       w300   +   ctrl+E         幅  
                                       H1000  +   ctrl+E        高さ
                                       }

     そして色をつける  それぞれに
         bgc   +  ctrlE     で あと色を選ぶ

    m3.jpg      m4.jpg

                    となり、右の図のよう縦に並ぶ

②ボックスの回り込み  float 指定をする
  float の指定は   
    ①サイズを決める
    ②それぞれに指定する
    ③解除する         が必要

   float 指定をすると   それぞれに fl と ctrl +E で
       m5.jpg

   html に contents として大枠を決め 次のように最後に解除を指定する
       m6.jpg
     
     画面の真ん中に指定するには
     contents の外側に footer も含めてwrapper の枠を作り
               次のように指定する。
    
        #wrapper {
                                            width : 980px ;
                                            margin :0 auto ;
                                          }
                        #contents {
                                            width : 980px ;
                                          }

               すると次のようになる。少し色が異なるがお許しを!
                          m6-2.jpg   

③headerの中に以下の文章を入れます(html)
<h1>富田林写真クラブ</h1>
 <p>富田林写真クラブのWEB作品展のサイトです。メンバーの写真を紹介します</p>

   NAVをつくる 
    HOME ABOUT MEMBER PHOTOGRAPHY LINK       を貼り付けておく

            nav>ul>li*5  と  ctrl  +  E   で
   m7.jpg      m8.jpg
         となり、これを               のようにする。
 リンクをかける
  m9.jpgのように HOMEの上にマウスで指定しctrl,shift,altを
  同時に押したままenterを押すと四角の箱が出る。そこに a と打ち、OKを押す。
  これを ABOUT MEMBER PHOTOGRAPHY LINK について繰り返すと 
     m10.jpg  

 となる。#はHOMEの "# "のようにすべてに入れておく。これでリンクがかかった。

ここからが宿題でした。
*headerの背景に画像を読み込みます。(imagesフォルダの中のheader1.jpg)
       header の中に  bg+  と ctrl+E  
     すると  background: #fff url() 0 0 no-repeat;   と出る。
          ()の中に背景画像のアドレス images/header1.jpg を打つ
     次に不必要な #fff と 0 0 を削除し 
   background: url(images/header1.jpg) no-repeat; とする。 

 これで完了。

ここからは宿題かな?
文字のデザインは次のとおりです。(css)
 *h1タグは24px、太字、上下に1pxの実線を引きます
    header h1{ 
                     font-size: 24px;
                     font-weight: bold;                            太字
                border-top:1px solid #0036D10 ;  上に1pxの実線
                     border-bottom: 1px solid #0036D10;   下に1pxの実線
                   }
 *pタグは12px
     header p{
                        font-size: 12px; 
                     } 
   *ナビバーは14px、太字、背景に薄いグレー、リンクの下線は無し、
     上下に5pxのpadding、ナビバーどうしがくっつかないようにmarginも指示
             header nav ul li a{ 
                               text-decoration: none;      リンクの下線は無し
                               font-size: 14px;
                               font-weight: bold;             太字
                               display: block;       背景全体が反応 
                               color: #000;        文字は黒    
                               background-color: #CECEBF; 背景に薄いグレー
                               margin: 5px;
                               padding: 5px 0;
                             }
        
 *hoverで背景を濃いグレー、文字を白にします。
    header nav li a:hover {
                                color: #FFF;                            文字を白
                                background-color: #686859;   背景を濃いグレー
                               }
           赤字のところが修正したところです。                         
              以上です。  tacky


5月10日の報告

今回の講義は左の図を右の図に変えることです。
m1.jpg
右の図の赤の矢印のところが変わったところです。
1行おきに色がついているところは、リストでCHILDを使っての変更です。
リストでCHILDを使っての指定が今回の主な講義内容です。
 childには2つのパターンの使い方があります。
  ① :nth-child(odd)     
    :nth-child(2n+1)は  下の li の中で奇数番目を選びます
       :nth-child(2n)は  下の li の中で偶数番目を選びます
                      oddは2n+1   evenは2n を意味します。       
         
          
 <ul>  oddeven
<li>りんご</li> 
<li>みかん</li> 
<li>バナナ</li> 
<li>パイナップル</li> 
<li>いちご</li> 
 </ul>    

   ②:nth-of-type(even)  上は全て li だが、下は dt dd があり
   同じでないので :nth-of-type となる。


     dtdd
 <dl>   oddeven
<dt>みかん</dt><dt>の① 
<dd>オレンジ</dd><dd>の1  
<dt>リンゴ</dt><dt>の②  
<dd></dd><dd>の2 
<dt>バナナ</dt><dt>の③ 
⑥ <dd>黄色</dd><dd>の3  
 </dl>     
  
      dt:nth-of-type(n) は  上の dtの上から順番の番号になる
                dd:nth-of-type(odd)  は 上の dt  の中で上から順の偶数番目を選びます
                dt:nth-of-type(even)            dt  の中で上から順の偶数番目を選びます
     まとめは2月の擬似クラスの解説を参照して下さい。
一つ目の課題
 ①
 m2.jpgm3.jpgにする。
 左の図のHtmlは
 m4.jpg

  cssは
  m5.jpg
  #rightは        #right dt      #right dd
   width::650px = width::100px + width::550px
 にするとdt と dd は横に並ぶ。.計算をきちんと合わせることが大切。
 dt はdt の①③⑤の奇数に色を付ける、dd もdd の奇数に色を付けるから
 cssに下のように赤丸のところを付け加える。
   dt,ddの元のbackground-colorは非表示にする。
m6.jpg
あるいは
m7.jpg

 文字の間隔の指定に line-heigh を使っているのは
      padding  を使うと dt の文字のサイズが12px dd の文字の
  サイズが指定なしと、違うから別々に指定しないといけなくなる。
  line-heigh を同じに指定しておけば、文字のサイズが違っても同じ
  間隔になる。

 cssにこのように記入すると
  m8.jpg となる。
② つぎに文字が前に詰まっているので1文字分を空ける。
 padding を使う。 dt は12px だから 12px にする。
 このままだと
 dt は12px だから #right dtの幅をその分小さくしないとはみ出してしまう。
  だから 100px-12px=88px
 dd は20px空けると#right ddの幅をその分小さくしないとはみ出してしまう。
  同じように 550px-20px=530px

 cssは次のようになる
  m9.jpg

 すると
  m3.jpg となる。
  文字の前が1文字分空いた。

二つ目の課題
  footer に header と同じものを入れる
   headerをコピーしてfooter に貼り付ける。次のようにする。
 m10.jpg すると  m11.jpg

  となり、上の黄色の丸のところが下の黄色の丸のようになる。
footer に貼り付けたものに名前(id設定でfooter_inner)を付けてひとくくりにする。
  m12.jpg
  CSS に footer_inner をデザインする。
  m13.jpg

  貼り付けたものがheader と同じものだから
   header をコピーしてCSSにはりつける。
   header の部分を #footer_inner に書き換える。

   m15.jpgとする。
  footerがrheaderと同じようになった。m16.jpg
 次に、マウスが文字の上に来ると文字の色が変わるが、このままだと
 分かりにくいので、変わる文字のを白にする。
  161 の color:#ff8000;  を color:#ffffff; に変えれば
  m17.jpg となって、文字が白になる。

これで
m18.jpg
が 
m19.jpg

となって、目的が達成された。
              以上 報告は tacky でした。
    



4月19日 報告

ブログレイアウトを作る。

ショートカットキー を覚えて使う。

      更新は ctrl+̻

   1行コピー貼り付け ctrl+

前回配布された資料「4月4日勉強会」USBファイルから「勉強会3月」をデスクトップにコピーする。

Notepad を開き、

Htmlの作成   ファイルの新規作成→名前を付けて保存(名前は自由 indexとしファイルの種類はhtml)

index.html

style,cssを作成 ファイルの新規作成→名前を付けて保存→style.cssとしファイルの種類は Cascade・・


Index.html を開き、「!」を入力し ctrl+e によりホームページの基礎画面を作成。

En  を jaに変更し、さらにDocument勉強会3月に変更。

resetのリンクを張る。 linkと入力 ctrl+e  

続いてstyle cssのリンクを張る。 同様にlink と入力し ctrl+e

box1 幅800px

300

box2

200

400

box

400

400

box

200

400

box5 幅800 縦100

上記のレイアウトを作成する

html のbody に

#box1+#contents>#box3+#box3+#box4^#box5|cと入力しctrl+e

<div id="box1"></div>

      <!-- /#box1 -->

      <div id="contents"> ← ここに後でclearfixを指示する。

              <div id="box2"></div>

              <!-- /#box2 -->

              <div id="box3"></div>

              <!-- /#box3 -->

              <div id="box4"></div>

              <!-- /#box4 -->

      </div>

      <!-- /#contents -->

      <div id="box5"></div>

      <!-- /#box5 -->

となる。コメントタグを整理し</div>がどれと関連しているかわかりやすくする。



Style.css を開いて

#box1#box5{ } のそれぞれに幅、高さを入力し、bgc と打ち、ctrl+eで背景色を5つつける。

#box1{

      width: 800px;

      height: 300px;

      background-color: yellow;

      }

#contents{

     

}    

#box2{

      width: 200px;

      height: 400px;

      background-color: green;

      float: left;

     

}

#box3{

      width: 400px;

      height: 400px;

      background-color: blue;

      float: left;

}

#box4{

      width: 200px;

      height: 400px;

      background-color: brown;

      float: left;

      }

#box5{

      width: 800px;

      height: 100px;

      background-color: orange;


}ctrl + s で保存し、実行からLaunch in Chromeを開けて更新する。


黄色


   青



オレンジ

   

と縦に並ぶ。

box 2, box 3, box 4 を横並びにする。

それぞれにfl と入力し、ctrl+eで展開して、float: left; を入力する.


このままではbox 5 が上に上がるので、float を解除する。


/*

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

.clearfix最新版

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

 */

 .clearfix:after {

    content:" ";

    display:block;

    clear:both;

}    

コピペする。

Float をした時の原則

1.サイズを指定する。

2.回り込ませたい要素にfloatを指示

3.親要素にclearfix を指示する。

つまり、<div id="contents" class="clearfix">htmlに指示すると。ブログレイアウトが完成する。


box1 幅800px

300

box2

200

400

box

400

400

box

200

400

box5 幅800 縦100


定義型リストを勉強する。

html と cssnotepad を開いて作る。


定義型リストとは、「~は・・・です」という「意味のあるリスト」です。

<dl>

 <dt> </dt>

 <dd> </dd>

</dl>

で表記する。

Notepad を開いて、

では、<dl>の下にdtdd 3つ作るには、

 de>(dt+dd)*3|c ctrl+eで展開

<dl>

 <dt>りんご </dt>

 <dd>赤い </dd>

 <dt> バナナ</dt>

 <dd>黄色 </dd>

 <dt>みかん </dt>

 <dd>オレンジ </dd>

</dl>


css を開いてdtはサイズ指定幅200pxddはサイズ幅を300pxにしてそれぞれに異なる背景色を付ける。

dlのサイズは500pxにし、横並びにする。

@charset="UTF-8";

dl{

      width: 500px;

}

dt{

      background-color: #ffff26;

      width: 200px;

      float: left;

}

dd{

      background-color: #73ff73;

      width: 300px;

      float: left;

}

勉強会3月のファイルを開けると

             <dl>

                                      <dt>2017.01.01</dt>

                                      <dd>初めてのHTML</dd>

                                      <dt>2017.02.01</dt>

                                      <dd>CSS3って何?</dd>

                                      <dt>2017.03.01</dt>

                                      <dd>レスポンシブデザインについて</dd>

                                      <dt>2017.04.01</dt>

                                      <dd>画像処理について</dd>

                                      <dt>2017.05.01</dt>

                                      <dd>ホームページをアップしてみよう</dd>

                              </dl>

がある。

次には、この行間を開けること、気数行のものだけの色を変えたりするので予習をしておくこと。


間違っていたらごめんなさいです。

ホワイt 2017.422

続きを読む