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して失礼しました。

きらら






































2月14日勉強会報告

前回はハンバーガーメニューまで作りました。
(作り方参照:meanmenu使い方.textの手順①②③)

★今回はbodyの中のサイドコンテンツ(左側)とメインコンテンツ(右側)の
位置の見え方をパソコンとスマートフォンで整えるスキルを教えてもらいました。

①自分のフォルダ上で右クリック→open as blacketsで開くを選択。
htmlで、bodyの中を見ると、

<div id="left">サイドコンテンツ左</div>
<div id="right">・・・・・・メインコンテンツ右(ごあいさつなど)・・       
        </div>   
の順で書かれている。 
パソコン上で見ると左右の位置そのままでよいが、
スマートフォンで見るとサイドコンテンツが先にきて、
メインコンテンツがその下に見えるので、おかしい見え方になる。
パソコンで見ても左右の位置が変わらずにしかも、
スマートフォンで見てもメインコンテンツが先にきて
サイドコンテンツが後で見えるようにするには・・・?

②まず、html上で
メインコンテンツを先に書き、
そのあとにサイドコンテンツが来るように位置を変える。
(*お約束その1:これから書く順番はメインコンテンツを先に書くようにしましょう*)
→でもこれだけだとパソコンで見ると左がメインコンテンツ、右がサイドコンテンツになります。

③cssファイルで、サイドコンテンツとメインコンテンツの
両方にかけていたfloat:leftを

  #left{float:left}
  #right{float:right}に書き換える。
→これでパソコンで見ても左はサイドコンテンツ、右はメインコンテンツにみえる。

★メインコンテンツの中のあいさつ文に自分のあいさつ文を貼りつける
★小見出しh2にデザインをかける
→フォントサイズを大きく(30px)して中央揃えにする
(*お約束その2:スマホ対応は2の倍数が望ましい)

 #right h2{
     font-size: 30px;
     text-align: center;}   


★文字が左右きちきちなので、
スマートフォンで手にもって見ると指でかくれるかも・・・
なので両端は1文字分空けておく必要があるので、
 paddingを20pxにする

 #right{
      width: 100%;   
      padding: 20px;}

★★次回の宿題です。★★
①H2のタイトルをインパクトのあるタイトルにする。
②3つか4つの写真(最低限300×300のサイズ)を
四角か丸か角丸で入れていくので写真のキャプチャー(説明文)を作っておく。

みなさま、未熟な報告で申し訳ありません。<m(__)m>
cssファイルでfloatを変えるのは
パソコン用なのかタブレット用なのかやってて分からなくなりました。
私はタブレット用の#rightや#leftにfloatをかけていました。
はたしてこれでいいのかなぁ~??
             by ぐら

   

   




nonkohanのおすすめbrackets拡張機能

brackets拡張機能おススメでググっていただくと色々な記事がヒットします。

ちょっとのぞいていただければ、色々面白い拡張機能が紹介されています。
ご自分に合った拡張機能をインストールしてブラケッツをカスタマイズしてみましょう。

その中で、前回の勉強会でご質問があった拡張機能がこれです。

Autoprefixer

これをインストールするととても便利です。
導入手順はこちらをご覧下さい。

nonkohan

+++++++++++++++++

前回の勉強会を最後に「学級委員長」が退会されました。
いつも単語力のない私を助けて頂き、本当にありがとうございました。
また、いつか戻ってほしいです。(´;ω;`)ウッ…

と、いう訳てとんだばやしドットネットは新規部員募集中です。
見学希望の方はコメント欄より申し込みください。

次回の勉強会は3月7日(水)1時30分~3時30分金剛公民館2階講座室です。
3月は日程変更で、2回目は3月28日(水)になっています。

learn.jpg


新入部員募集します!

とんだばやしドットネットでは新入部員を募集します!

img01.jpg

お待たせしました!
とんだばやしドットネットで新入部員の募集が再開されました。

ホームページに興味はあるけれで、何から始めていいかわからないあなた、ここにホームページを一から学ぶ勉強会があります。一緒にホームページを作ってみませんか?

開催日第1・第3水曜(変更の場合あり)
時間1時30分~3時30分
場所
富田林市立金剛公民館
月会費1000円

まずはお気軽に、見学に来てください。

見学希望の方はコメント欄よりご連絡ください。
コメントは承認制になっておりますので、書かれた内容は表示されませんのでご安心ください。
コメント欄に見学希望の旨と、メールアドレスをご記載ください。
折り返しメールに返信させて頂きます。

nonkohan