フロド様との出会い

Fri, 30 Oct 2015 11:04:44 +0900

こんにちは、アメブロ始めました('-^*)/

まずこの１～２週間で自分の環境が大きく変わりました！

そのきっかけを下さったのはフロントエンドの神様こと深見さんです。
初めにお会いして、お話をした時これからの自分の将来像を一緒に考えてくれて、就活から逆算して今すべきことは何かを現在の自分の生活環境から総合的に判断して提示してくれました。

心底思ったのは「本当にこの人はガチだし自分のことを本気で育てたいと思ってくれているんだな」ということです。。

本当に感謝という言葉しかありません。。
深見さんだけでなく沼澤さん、大石さんにもこんな無力な自分を受け入れてくれたことに感謝です。
本当に人が良い人ばかりです。

イントロが長くなってしまいました。

これからはこの１週間ごとに
学んだことについてアウトプットして自分でも理解を深め、現在の進捗具合を認識していきたいと思います。

本日はcss,jQueryについてです！

まずはcssについてです。
意外と知っているようで全く自分が知らなかったことがありました。
ある要素を画面の中央に寄せるcssに記述です。

中央寄せをする際に意識しなければならないことは親要素です。
positionを指定する際は親要素を基準にして移動するということです。
更に例えば一つの要素にtransform:translate(50%,50%);と記述すると
その要素の幅と高さそれぞれ半分ずつを移動するのです。
因みに幅と高さを指定することは忘れてはいけません！！

これは本当にすごいなと実感しました。

背景画像は一般的に高さを指定しないと表示されないと思い込んでいました。
自分の中にあるその常識が覆されました。

例えばaというクラスにbackground-image:url()を指定して高さを指定するとaに高さがでるのは当たり前ですが高さを指定しない場合は

.a:before{
content:"";
display:block;
padding-top:50%;
}

と指定するとなんと高さがでるのです！
cssやばっ。。

次にjQueryにおいてですが
cssはメディアクエリーでレスポンブル対応にするのは当たり前ですが
このウインドウサイズになったらjQueryをかけたいとなった時にはてこまったとなりました。
そこで登場したのがwindowサイズを取得する$(window).width();です。
例えば変数xにウインドウサイズを代入し
yにjQueryをかけたい幅を指定します。

var x = $(window).width();
var y = 751

if ( x < y) {
ここに751px以下にかけたいjQueryの指定をします。
}

またこのボタンを押した時にこんなイベントをかけたいと思ったときに
セレクタの指定で苦しむ時がありました。そんな時に覚えておかなければならないことがあります。
find、children、next、parent、parents、closestです。

find()で子孫要素を取得します。指定した要素すべてが取得されます。
children()は子要素だけ取得されるのでfindよりは範囲が狭まります。
next()は要素集合の各要素の兄弟要素を取得します。
parent()は直近の親要素を取得します。
parents()では親要素、先祖要素まで取得します。
.closest()はアクションを起こした要素から親要素、先祖要素を取得します。

これらは言葉で説明するよりも実践した方がわかりやすいです！

またこの要素に文字の色、幅、borderをつけたいなどという時、cssメゾットを使うことが
あると思いますが処理速度などを考えるとaddclassなどであらかじめclassを作っておくと
良いそうです。自分もこれからは後者の方法でやっていきたいと思います！

まだまだ書きたいことはあるのでがこのへんで失礼します。
あまり強調する部分など色分けをすればよかったと思いました(^_^;)
また来週！
adiós

haya-johnのブログ

フロド様との出会い