【ひとりごと】久々の更新
HTMLとCSSを勉強して部活の新サイトを１から書き上げて遊んでいたら、気付けば春休みも終わり、新学期突入。
しかも弊大学工学部のなかでもかなりブラックで有名な学科なので、4月すらあっという間にすぎてしまった…
今日から授業で学んだことも含め、積極的に記事を更新していきたい
【JavaScript】JSはなにを勉強したらいいのか
こんにちは
今日はただの独り言。
HTML5とCSS3を1週間ほど勉強したら大体のことは理解できるようになったので、次に動的処理すなわちJavaScriptに手を出そうと思った。
まぁごく自然な流れでしょう。
だけどこのJSをどう勉強するかで手が止まってしまった。
もともとはjQueryを通してJavaScriptを学ぼうと考えていたわけだが、どうもいろんなサイト(Qiitaとか)を漁ってみるとすでに時代遅れ感が否めない。2006年に登場し、界隈を席巻したjQueryが過去のものになろうとしているなんて、なんとも移り変わりの激しい世界である。
フロントエンドエンジニアになろうと決めているわけでなく、むしろ趣味でWebサイトを作れるようになろうというくらいの心持ちでやり始めたため多少遅れてても構わないのだが、なるべく時代に合ったものを習得しておきたいのは至極当然である。
なにやろうかな…
【CSS】text-alignがうまく効かない
CSSで文章の配置を決めるプロパティであるtext-alignですが、ちゃんと理解してないと機能してくれないことも多い。
最初の事例。
<p class="test-left">
文章①
<p class="test-center">
文章②
</p>
文章③
</p>
文章①～③はまとめて一つの枠囲みにしたく、そのうえで文章②だけを中央配置にしたかったのだが、上記コードで.test-centerを動かすことは出来なかった。class="test-center"をp→spanにしても動かず。
<p class="test-left">
文章①
<div class="test-center">
文章②
</div>
文章③
</p>
中央寄りにしたいところをdivにしてみたが、今度は枠囲みが①のみになってしまったので✕。
<div class="test-left">
文章①
<p class="test-center">
文章②
</p>
文章③
</div>
最終的にこれで解決。
どうやらセレクタが持つ「インライン要素」と「ブロック要素」という性質が大きく関わっているよう。
文字や画像 などのインライン要素を左寄せ・中央寄せ・右寄せするときは、インライン要素を囲んでいる
div・p・liなどのブロック要素にtext-alignを指定します。
引用元：
インライン要素を左寄せ・中央寄せ・右寄せする方法 - CSSテクニック - acky.info
ということなのでこのプロパティは「インライン要素を囲んでいるブロック要素」に適用するようにしよう。
※追記( 03/04 )
HTML5以降では「ブロック要素」「インライン要素」という言い方は廃止されたようですね…
