カイブツガール

カイブツガール

⇒WEB TOP⇐

⇒BLOG TOP⇐

自然パワー

jQueryJavaScriptの入門

↑のリンクに講座があったので、ついでにやってみた。

jQuery(ジェイクエリー)はcssの超すごいやつのような機能があって、文字消したり現せたりアニメーションさせたりできて超すごいです。cssよりは複雑だけど思ったよりわかりやすい。でも、実際の使いみちがよくわかんないなー。使ってるとこみてみたい。

JavaScriptは、jQueryの元となったプログラム言語のようなもの?って認識で良いのか。なんかむずかしい割りに達成感が薄かった。ようするにプログラム言語って計算なんだな。数学は。

 

おいしいケーキ専門店

途中。箱組だけできた。

<ul><li>を中央寄せする方法がよくわからなかったので調べた。

www.acky.info

↑の中でfloatを使う方法もあったんだけどなんかしんどそうなのでやめて、display: inline-block; を使ってみた。これでインラインブロック要素にしたやつをtext-align:center; で中央寄せするという分かりやすいやつだった。

これをやると箱のなかの文字が全部中央揃えになってしまってかっこわるいので、左寄せしたい箇所は別途にタグをつけてtext-align:left;で左寄せした。でもなぜかspanにtext-alignが効かない‥。ということでhとかpを使ってがんばった。

ブロックレベル要素とインライン要素を甘く見てたんだけど、

CSSで中央配置の仕方をちゃんと理解していない人って案外いるみたいなので、詳しく解説しようかなーって思います。

div要素のようなブロックレベル要素をセンタリングするには「text-align」は使いません。「text-align」プロパティはインライン要素の位置揃えを指定するためのものですよ。

 ということでした。でもspanってインライン要素のはずなのにtext-alignが効かなかったのはなぜ?とりあえずdivとかをセンタリングしたい場合はmarginを使うというのが鉄則ってことだけはわかった。他は全然わからない。

↓考

text-alignはブロックレベル要素の中にあるインライン要素(中身、文章や画像)の位置揃えを指定するためであって、あくまで外側のブロックレベル要素にしか適用できない(= spanとかにかけても失敗する)。ブロックレベル要素自体(外側の箱)の位置を揃えるには別途にmarginをかける必要がある、ってことでいいのかな。

 

f:id:homeotic:20160819005659p:plain