Rpt!第三回 ねこへび勉強会
4月7日に、第三回ねこへび勉強会をおこないました。ﾊﾟﾌﾊﾟﾌ
(ただ二人で集って勉強しているだけの会)
一応この勉強会のテーマは、
ねこさんが主体になって目標管理のWEBシステムを作ること
になってます。
まだシステムの要件はぼやっとしか決まっていないですが、第一回の勉強会ででたアイデアはこんなの感じ
- 目標を登録できる
- 目標に経験値を設定する
- 経験値が溜まったらレベルアップする
- 雰囲気をド〇クエっぽくしたい
今後もっと詰めていきます。
今までしてきたこと
第一回 ねこへび勉強会：勉強会のテーマ決め
第二回 ねこへび勉強会：HTML入門
第三回 ねこへび勉強会 CSS入門
本題。
今回は私が資料を作成している時間がなかったので、
こちらのサイトを利用させて頂きました。
ぶっちゃけ私もCSS得意じゃなくて、本来なら他人に教えられる状況じゃありませんが…。
ちゃんと体系的に勉強をしたことがなく、本の一冊も読んだことがありません。
お仕事で必要な時にネットでちょこちょこ調べて書く程度。
正直デザインが好きじゃない。センスに自信がない。
デザイナーでもフロントサイトエンジニアでも無いしぃ←言い訳が見苦しい
いきなり後ろ向きですが、でもちゃんと基礎から勉強しなおす良い機会ですね！
1.CSSの書き方
今回はHTML内の<style>タグの中に直に書く
2.idとclass
要素に名前をつけるためのもの。 id名は複数の要素に同じ名前をつけてはいけない。 また、一つの要素に複数のid名を設定できない。 class名は複数の要素に同じ名前をつけられる。 一つの要素に複数のclass名を設定できる。 idは文頭に#、classは.(ドット)をつける
4.ブロック要素とインライン要素
HTMLの要素の多くはブロック要素かインライン要素に分類されている
divとspan
divとspanは、要素がひとかたまりであることを表している
div…ブロック要素
span…インライン要素
課題
1.div要素、span要素をいくつか作成してみよう。その要素にid名、もしくはclass名を指定すること
2.それぞれの要素を枠線で囲ってみよう
※プロパティにborder、値に1px solid #000; を指定すること
3.それぞれの要素の高さを設定してみよう
※プロパティにheight、値に50px; を指定すること
4.それぞれの要素に背景色をつけてみよう
※プロパティにbackground-colorを使うこと
ブロック要素であるdivは改行され縦に並ぶのに対して、インライン要素であるspanは横に並ぶことを確認する。
heightがdiv要素のみに効いていることを確認する。
ブロック要素とインライン要素の主な違い ･改行されるかされないか ･幅と高さの指定が可能か
5.marginとpadding
marginとpaddingプロパティは要素の余白を設定する
課題
1.上で作ったdiv要素に、marginとpaddingをそれぞれ50pxの値で設定してみよう
div要素を囲む枠線の外側、内側にそれぞれ余白が入ることを確認する。
6.1～5の知識を使って見出しを作ってみよう
今回説明に使わせて頂いたサイトの見出しを参考に、近いものをねこさんに作ってもらいました。
※border-leftプロパティを使用すること
私的には左側にオレンジの線が引かれている見出しができるところまででいいかと思ってたのですが、
ねこさんから、例のように線の角を丸くするにはどうしたら良いのかと聞かれたので、「知らんがな」と思いつつ、悪い？ハックを伝授。
そういう時は開発者ツールを使って、パ………参考にすればいいんだよぉ～
(ごめんなさい）
といったところで勉強会はお開き。
ねこさんが混乱しないようにと思って、最初から細かくは説明しないようにしているのだけど
（cssの記載場所をstyleタグのみに限定して説明する等）どっちがいいのだろ。
それはそうと、そろそろ目標管理システムの完成が実現できるような具体的な計画とスケジュールを立てないとだな。
次に会う時に相談しましょう。
(byへびさん）
