5月16日(水曜日)の勉強会報告

☆毎回報告されています当日学習した「タグ入力の書式」は今回は省略させていただきます。

 ●年初から学習していますスマホ対応型ホームページの作成も最終回を迎え
 「2コンテンツを並べる」を学びました。
 ●2つのコンテンツを並べるにはfloat(フロート)を掛けますが、その為の
 「お約束事」は
   1.サイズ指定が必要
   2.回り込ませたい全てにfloat(フロート)を指示
   3.親要素にfloat(フロート)の解除
  ※毎回、気になった事や重要と感じたことはメモする様にしていますがマイノートを
   見ると何度も書いているのがこのfloat(フロート)のお約束事です。
   margin,paddingよりも圧倒的回数を記述していますのでnonkohanさんからの
   重要度が伝わりました!
 ●leftに画像、rightにテキストをどちらも<p>の中に書き込みます。
  この勉強会報告を書いていて思ったのですが、何故left画像も<p>の中で書いたのでしょう?
  多分何度も説明を聞いていると思うのですがこの様な疑問が出て来ます。次回に聞きます!
 ●大容量ファイル送信のフリーソフト「宅ファイル便」を会員登録、使い方は次回学びます。
 ●金剛コミュニティから記事取材のため記者が来られ集合写真の撮影がありました。

 ◎Windows10のアップグレードが5月初旬にリリースされていますので各自更新して下さい。
  バージョンは1803です。毎年、春と秋にアップグレードの更新がリリースされます。
  更新は2時間~3時間程掛かりますので電源を繋いで実行の事、途中1回だけ再起動が必要!
                                報告者 ドラフト10位                 


  

H30.5.2の講義

平成30年5月2日
今回は新人のためにホーームページの作り方の講義でした。

 ホームページを作るためには chrome を使ってください。
検索に便利で使いやすく、操作もしやすいです。

ホームページの初めの画面で、マウスを右クリックして出た表の 検証 を押すと下の画面が出る。

この画面が使いやすい。
ホームページは色々検索できる。

ホームページのソースの見方
ホームページ上で右クリックして「ページのソースを表示」をクリックする。 

WS000029.JPG
このような画面が出る。
これが命令文です。

一番上の
WS000056.JPG は言語を宣言しています。

命令文に成り立ちは


始め <DOCTYPE html>    (は html という言語で書きますという意味です。)
      <head>


      </head>
      <body>


      </body>
終了 </html>        / は終了タグといいます。

ホームページを作ってみよう           
  index.html を作る
  ホルダーを作る
     最初の画面上で右クリック → 新規ホルダー  をクリック
      WS000030.JPG これでホルダーが出来る。

    ホルダーの上で右クリックして  open as Brakets をクリック
      WS000057.JPG これがホルダー   
     Brakets  のうえで ファイルをクリックし新規作成をクリック
       WS000031.JPG
             名称未設定 の上で右クリックし 名前を付けて保存を選ぶ。
       WS000059.JPG
     新しく出た画面の青い部分を書き換える  index.html と記入し 保存を押す
     
      WS000034.JPG

    ここから画面を作る
      ①の横に  !  を入れる TAB キーを押す。
        WS000060.JPG
               が出る。
       
        WS000036.JPG
      HPの中身は body と /body の間に書く
        書くには約束がある
         文字には P、H1,H2,・・・・がある

        例えばPについて
          Pと打ち続いてTABを押すと  
             WS000037.JPG となる。

         続いてPと/Pのあいだに文を入れる。
           例えば 私のHPへようこそ   
             WS000038.JPG   
           ここで保存する。
         WS000039.JPG
           CTRLを押しながらSを押すと保存ができる。
          作った画面を見ようと思ったら
                 WS000040.JPG
          一度画面を見ると
                WS000041.JPG
                 ここをクリックするといつも画面が見える

          つづいてbody に次のように入力する。
              WS000042.JPG
          このように打つとPCの画面には
           と出る。   WS000043.JPG        
          次のようにもなる
              WS000044.JPG
        同じようなものを打とうとしたら、複写は行の上で CTRL+D 
       すると行全体が複写出来る  
                  注  h1には重要情報を入れる
  
  画面にデザインをかける
        デザインをかける方法の一つで stylesheet を作る
        CTRL+N で新しいbrakets 画面が出来る
              WS000046.JPG 
          名称未設定 の上で右クリックし 名前を付けて保存を選ぶ
           style.css  と記入し 保存  
                  WS000047.JPG
  style.css  の作成
       Brakets の画面に 書き込む
  WS000061.JPG →  WS000048.JPG
        次ぎ h1 に色を付ける。
           WS000049.JPG
        クイック編集を押すと  次の画面が出る。
        
          WS000051.JPG     
        このままだと index 画面と style とが関連づかないから
        関連させるために 次の操作をする。
    
        index 画面を選び  link と打つ   
           WS000053.JPG 
          TAB を押すと  
            WS000054.JPG   
          保存する すると             
             WS000055.JPG のように h1 の文字に色がついた。

          h2 にデザインをかけると
              WS000062.JPG h2に色がついた。
    背景にデザインをかける
      style.css
           WS000063.JPG
           バックに色がついた。

今回は以上です。
良く伝えられていない面がありますが、次回先生に質問してください。

                    tacky でした。               

続きを読む

パワーポイントについて

勉強会では、パワーポイントを使って解説をすることが増えてきました。
板書より、分かりやすいということなので何度か使ってみました。

ご自分のパソコンにパワーポイントが入ってない場合は、無料で使えるものがいくつかありますが、
使い方やダウンロードに関しては自己責任でお願いします。
パワーポイントの使い方に関しても、改めて解説するつもりはありません。

あくまでも、ホームページ作成するサークルですので、ご了承ください。
今の課題をきちんと終わらせ、基礎からやり直す予定ですので、寄り道はできません。

パワーポイント使い方でググれば、解説動画やサイトがたくさんあります。
また、無料パワーポイントでググっても、色々ありますので勉強してみてください。

パワーポイントを無料で使う裏技

nonkohan

3月28日勉強会報告書


 37日の勉強会終了時は、3枚の写真(各自違う)を横並びにしたところで終わっていました。


本日の勉強内容

最初の1時間は、現在コーディングしているHPのコンテンツ構成についてPowerPoint画像を使って詳しく復習してもらった。

殆どのパソコンにはPowerPointが入っていると思われるので講師から説明画像をコピーさせてもらうといいと思います。


 以下が本日新しく説明を受けた内容です。

タイトル画像の下にあるご挨拶(H2部分とP部分)について上下に空間(20px)、左右は0と設定、100%に広がっているP部分を横幅80%に縮小し、行間を一文字分空け読みやすくするための記述を勉強しました。


CSS上の記述は下記の通り

h2 {

               font-size: 30px;

               text-align: center;

               margin: 20px 0; 短縮形はmg20px 0 展開(Tabキーを押す)

  }


pで囲まれた挨拶本文は、横幅いっぱい(100%)に広がっているが、これを80%に縮めたい。しかし、Pで囲まれた部分は他にもたくさんあるので、挨拶本文のPについてのみ横幅を縮めるためにはclass設定をしなければならない。


HTML上で<p>挨拶本文</p>となっているのを次のように<pclass=”text”挨拶本文</p>と変更します。そして、上下に空間(20px)、左右は0と設定します。


CSS上の記述は下記の通りです。

.text{

    width: 80%;    短縮形はw80p  展開

    margin: 20px auto; 短縮形はmg20px-a 展開

  }

次に、行間を1文字分開けるように設定します。CSSでの記述は下記のようになります。


p{

               line-height: 2em; 短縮形はlh2em  展開

   }


以上の記述で<H2>と<P>部分の上下に空間ができ、挨拶本文の横幅が80%に縮められ、行間が1文字分開けられたことになります。


次に、3枚の画像については37日に時点では左端に偏った状態になっていて、右端に空間がある状態でした。これを等間隔に表示し、画像を左端ではなくボックス中央に配置する方法について学習しました。

3枚の画像が別々のボックスであるのを見やすくするためにCSS.boxに背景色をつけます。その記述は下記の通りです。

.box {

        width: 30%;

        float: left;       

        background-color: #a3f8f5;短縮形はbgc 展開

     }             展開後の#fffは任意の色に変更する。


次に、画像の入っているboxを等間隔に表示するためのコーディングをします。画像が入っているboxの大きさは1つは30%に設定してあるので、3つで90%となり、残りは10%となる。この10%を使って等間隔表示を行います。その方法は各boxの左側に3%のmargin を記述すればよいと説明がありました。タグの記述は下記の通りです。


.box {

        width: 30%;

        float: left;       

        background-color: #a3f8f5;

        margin-left: 3%;短縮形はmg-l3p  展開

    }

上記の記述で3枚の写真が等間隔に並びます。


最後に、<p>

      <img src=”images/.jpg” alt=”  ”>

         </p>


Pタグで囲まれた写真をbox中央に表示する記述を勉強しました。<p>タグはここだけでは無くいろんなところで使っているので写真を囲んでいるpタグのみに特別な働きをさせるにはclass設定が必要です。今回は3つの写真の<p>タグに次のようにclass設定を記述しました。


HTML 上で

<p class="center">

  <img src="images/.jpg" alt="~の写真">

</p>

と記述し、


CSS上には

.center{

    text-align: center;

}


と記述しました。

これにより3枚の写真はboxの中央に表示されます。


以上が今回の勉強会報告書です。誤字、脱字はご容赦。 担当はサンキューでした。

3月7日勉強会

※前回までの2カラムレイアウト表示から1カラムレイアウト表示に変える作業。

宿題の写真3枚又は4枚(サイズ300px x 300px  の四角)を
角丸デザインしタイトル、説明文を入れ横並びにするところまで進みました

①今回、作成中のフォルダ上で右クリック、open as blackets projact をクリックで開く。
css側
1カラムレイアウトにする為に
/*タブレット用*/ と /*pc用*/ の #left と #right の float を消し、width も消します。

②html 側
写真3枚(又は4枚)にそれぞれの<img>タグに <p> タグでくくる。
<img>を選択し shift + ctrl + a➝下に enter abbreviationが表示される p と入力、enter キー
<p><img src="images/〇〇〇〇〇.jpg" alt=""></p>
<h4>タイトル</h4>←入力
<p>説明文</p>←入力
🚩ここでブロック要素になり、画像が縦並びとなる

③css側
/*pc用*/、/*全サイズ共通cssとスマホ用*/
#left と #right の height を消します
🚩height を検索にかけると文字に色が付き作業がしやすいです

/*全サイズ共通cssとスマホ用*/
#left の下に <h4> にサイズ指定します
h4{font-size:30px;}

html 側
3枚(4枚)の画像を同時に円形のレイアウトにする為にクラス指定します。
<p><img src="images/〇〇〇〇〇.jpg" alt=""></p>
<h4>タイトル</h4>←入力
<p>説明文</p>←入力
を選択し shift + ctrl + a →下に enter abbreviation が表示されるので .box と入力、enterキー
残りの画像も同様にする

④css側
/*全サイズ共通cssとスマホ用*/
3枚(4枚)の画像を円形の画像にレイアウトします
h4{font-size:30px;}
.box p img{border-radius:50%;}←ここに追加します
(短縮形:bdrs50p + tabキー)

html 側
画像が縦並びなり float で横並びに指定する
.box におやかを作成する(float を解除するために作る)
.boxを全て選択し
 shift + ctrl + a →下に enter abbreviation が表示されるので #pboxと入力、enterキー

⑤css側
/*タブレット用*/
.box{width:30%;   /*回り込みはサイズ指定が必要*/
        float:left;      /*回り込み*/
}

#pbox{overflow:hidden;}   /*回り込み解除*/

box-sizing をcss側の /*全サイズ共通cssとスマホ用*/に入れた方がベターだという説明があり
半分理解できたか?でした

nonkohan いつもありがとうございます。

前の送信分未完成でUPして失礼しました。

きらら