7月5日勉強会報告

7月1回目の勉強会報告です。

先回からの続きで、今回は、#side、footerを完成させました。
<html編>
1.課題コピペ用のフォルダの中の手順3から、htmlの#side、footerの中に文章をコピペします。
 ①見出しは、h2タグで囲みます。
 ②中身の文章は、pタグで囲みます。
 ③メールフォームは、pにfoamとクラス指定をして、囲みます。
 ④footerの中身は、pタグで囲みます。

<CSS編>
1.それぞれデザインをかけていきます。#sideです。
 ①sideのbackgroundを濃いグレーにします。
 ②sideの文字を白にします。
 ③sideのタイトルの文字下に線を引く。
 ④sideのタイトルを真ん中にもっていく。
 ⑤sideの文字の両脇に空間をつくる。paddingで指定してください。

2.footerです。
 ①文字を真ん中にもっていきます。
以上を入力すると、以下のようになります。

 <html>
 <div id="side">
<h2>お問い合わせはこちら </h2>
<p>ご意見ご質問は下記のボタンをクリックしてメールフォームよりご送信下さい</p>
<p class="form">メールフォーム </p>
<h2>部員募集中 </h2>
<p>ただ今部員募集中です。カメラに興味のある方はぜひご参加下さい</p>
 </div>
<footer>
<p>@Tondabayashi photograph Club</p>
</footer>


<CSS>
#side{width: 180px;
height: 1000px;
background-color: #696969;
float: left;
color:#fff;
padding:10px;}
#side h2{font-weight:bold;
text-align:center;
border-bottom:1px solid #fff;}
footer{width: 980px;
height: 30px;
text-align:center;}

以上でした。

☆便利ツール情報です。
◎ボックスサイジング・・・サイトすべてにデザインをかける。bxsz+ctrl+E
CSSのなかに

*{-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
 
CSSの中にいれておくと、padding、margin、borderで、内容が太る分、それぞれの幅を変更しなくても
自動で、調整してくれる。

今までは、padding:0 10px;としていたとき、
width:200px;にしていたら、width:180px;と変更しなければならなかったのです。


次回からは、bracketsを導入して勉強会をします。
ダウンロードできる方は、ダウンロードしておいてください。
堂園さんの導入手順書を張り付けてます。↓↓↓

http://brackets.io/

Download Brackets 1.9
ダウンロードサイトの四角い箱をクリックしてダウンロード開始します。
あとはOKでOK!


拡張機能がすごい!これだけは入れておきましょう!

*絶対入れてください!* 

Emmet おなじみのemmetは略語で書くだけなので作業が早くなります

Autoprefixer ベンダーフレックスを自動で最新版にしてくれます
(編集→Auto Prefixer on Saveにチェックを入れる)


*お好みで入れて下さい*

Display Shotcut
Ctrl + Alt + / でショートカットキーを表示してくれます。
Bracketsだけでなくemmetも表示してくれますので慣れるまで便利かも?

Beautify タグの位置を正しく直してくれます
まれに不要なスペースが入るバグがあります。
自分で修正できる人だけ入れましょう。

Response for Brackets-original
レスポンシブデザインの開発に便利ですが、まだ開発途中です・
今後に期待!!


Sidebar Pulus サイドバーのオンオフが簡単になり、画面が広く使えます。
(ツールバー → デバッグ → 環境設定ファイルを開く→brackets.jsonに
"sidebarplus.triggermode": "mouseover" , ←カンマ大事!
を追加1行目に追加したほうが無難かも?)→表示→サイドバーを隠すにチェック

本日、岡田さんが勉強会見学に来られました。
8月の勉強会は、9日、23日の第2、4週です。
9月からは、第1週、3週に戻ります。
よろしくお願いいたします。
次回の勉強会は、7月19日です。

りかこでした。



この記事へのコメント


この記事へのトラックバック