新人プログラマーの軌跡　#3

5883 ワード
未経験 Web 新人 Web テキストリンク

この1週間は前回に引き続きレスポンシブ勉強用の課題サイトの作成に勤しんでいました。
また空き時間にドットインストールとprogateのJavaScriptの講座を受け終わりました。
JavaScriptは想像してたよりいけそうです。もっと難しく思っていたので・・・
ではまたこの1週間にあったことを書いていきますよ。

この1週間で悩んだ事とその理解

box-shadow

x方向・y方向・ぼかし・広がり・色の5要素から影の形を決定されます。
今の所、その要素の真下に指定した色の影が隠れているのでそれを動かして表示させてあげると認識しています。
数値を上手く調整することで自分の好きな方向に影を表示出来ることを学習しました。
ただ頑張って考えてものの、時間がかかってしまったのでbox-shadowのジェネレーター(http://www.bad-company.jp/box-shadow/) を用いました。

%を用いたmargin padding

今まで曖昧なまま来ていましたが、ようやく理解できました。
％をmarginに用いたことで悩んだ部分があったので、実験をしました。

最初は以下のようにし、子要素のmarginに％を用いました。
この段階で縦と横のmarginが等しく・・・？？？です。

<body>
    <div class="outBox">
        <div class="box">
            <div class="inBox01">
            </div>
            <div class="inBox02">
            </div>
        </div>
    </div>
</body>

.outBox {
  background: red;
  width: 500px;
  height: 250px;
  margin: 0 auto;
}
.box {
  border: 3px dotted white;
  width: 300px;
  height: 150px;
  margin: 0 auto;
}
.inBox01 {
  background: blue;
  width: 200px;
  height: 100px;
}
.inBox02 {
  background: green;
  width: 50px;
  height: 25px;
  margin: 10% 10%;
}

　

緑のboxの情報

だがmarginが30pxなので、その基準は恐らく親要素のwidthにあることは予想していました。
　　
もう少し考えるため、次は.boxにpaddingを付け加えてみます。

.box {
    padding: 20px;
}


緑のboxの情報

緑のboxには変化が見られません。

次は.boxにbox-sizing:border-box;を付け加えてみます。

.box {
    box-sizing:border-box;
}

緑のboxの情報

そうすると縦と横のmarginが変化しました。
どうやらmarginの%指定は指定した場合、基準は親要素のwidthかbox-sizing:border-boxが指定されている場合にはwidthからpaddingとborderの数値を引いたものが基準となります。
親要素のwidthが基準と書いてある記事を読んだこともありますが、親要素がbox-sizing:border-box;をしていると親要素のwidthが基準とはならないので注意です。特に今週はレスポンシブ勉強用の課題サイトの作成をしていたので、悩まされました。
　　
marginに％を付けたものを考えていましたが、widthやpaddingに％を付けた場合も同様に、基準は親要素のwidthかbox-sizing:border-boxが指定されている場合にはwidthからpaddingとborderの数値を引いたものが基準となります。

まとめるとこんな感じですね。

box-sizing (親要素) content-box border-box
100% (子要素) width(親要素) width(親要素)　－　(padding+border(親要素))

レスポンシブに対応したアイコン

タイトルの前にアイコンが貼ってあることってよくありますよね。
レスポンシブを考えるうえで、zoomで大きさを変えればよいなと思っていたのですが、FireFoxに対応しとらず断念・・・
そこでbeforeセレクタのcontent要素に入れてwidthとheightを変えようと思ったが変化せず・・・
そこでbackgroundに入れてbackground-sizeを%指定することでレスポンシブに向いたコーディングが出来ました。
画像を表示するにもいろいろな方法があると再認識できました。

backgroundの記述順

background-imageは表示されているのですが、どうもbackground-imageのsize・positionの変更が効かず30分ほど悩んでいました。
原因は以下のように、記述順にありました。

{
background-position: center center;
background-size: cover;
background: url('');
}

cssは上から読み込まれていくということを忘れており、画像もないのにsizeやpositionを指示していたんですね・・・

smallタグ

smallタグはどこかで聞いたことはありましたが、耳にした時はstrongと逆のようなものでしょ。何となくわかるよ、と思っていたのですが他にも使い道が！
copyrightに使われるんですね！
実際はもう少し広く、免責・警告・著作権・ライセンスに関して使われるようです。こんな細かな部分まで目を行き届かせる必要があるのですね。
ちなみに感覚的に当たり前ですが、インライン要素なのでそこも間違わないようにっと。

JavaScriptにおける [] {} , . : ; の使い分け

JavaScriptを学習する際に、phpに軽く触れていたので記号には気を付けていたのですが、自力でコードを打ち込むとその辺の曖昧さが露呈してしました。
何かルールに従っていればもっと分かるんですが・・・もしかしたら知らないだけであるのですかね！？

　　

　　
この1週間は物事に入る前にゆったりと構え、全体を俯瞰することでどこに注意していけばよいかが分かってきた毎日でした。
ただ注意すべき部分が分かっても、そこで上手くいかないのが今の現状ですが・・・
くやしいですね