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

続きを読む

コリアタウン漫歩

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

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

korea.jpg


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

P1040572.JPG

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

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

P1040580.JPG

P1040582.JPG

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

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

by 元アラコキ

4月 例会報告

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


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

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

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


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


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

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

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

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

〇記事内容について 

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

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

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


会員情報

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


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



以上 ホワイトでした。