ウィンナスのプログラミング忘備録

アプリケーション制作をしている最中に発見したテクニックを忘備録としてまとめていきます。

【HTML/CSS】blockとinlineで変わる中央寄せの方法

中央寄せの方法がいまいちピンと来なかったので、メモっときます!

 

中央寄せの方法

中央寄せについては主に2つあります。

  • margin: 0 auto;
  • text-align: center;

 

2つの特徴は?

[ margin: 0 auto; ] ではcss指定したタグを中央寄せします。

[ text-align: center; ] ではcss指定した子要素を中央寄せします。

 

さらに!

[ margin: 0 auto; ] はブロック要素に使えます。

[ text-align: center; ] はインライン要素に使えます。

 

実際に試してみた!

まずは、[ margin: 0 auto; ] で中央寄せしてみます。

  • block要素に適用

    親要素

    block要素
  • inline要素に適用

    親要素

    inline要素
  • inline-block要素に適用

    親要素

    inline-block要素

 ブロック要素だけが中央寄せになっていることが分かります。

※幅が100%のときは [ margin: 0 auto; ] は使えません

 

次に [ text-align: center; ] で中央寄せしてみます。

  • block要素に適用

    親要素

    block要素
  • inline要素に適用

    親要素

    inline要素
  • inline-block要素に適用

    親要素

    inline-block要素

 インライン要素とインラインブロック要素が中央寄せになっていることが分かります。

【WEB】Jqueryでアコーディオンを作ってみた

今回は、Jqueryを使ってアコーディオンを作りました。

アコーディオンとはあれですね。

メニュー表示する際に「にょ~」って出てくるあれ!

 

サンプルは【凡才エンジニアの成果物】に貼っておきますね!

 

実装は、HTML , CSS , JavaScript を使います。

書かなくてもいいレベルで普通

 

全体の流れとしては、

非表示 ∧ 重ねているメニューを下にスライドさせながら表示させる!

だけです。

 

HTML

[ dl ] , [ dt ] , [ dd ] で実装しました。

これじゃなくて [ ul ] とかでもいいと思いますが、デフォで表示させる部分(今回は「メニュー」)の識別が面倒なのでこちらをおススメします。

 

CSS

最低限必要なものは [ position : absolute ] と [ display : none ] です。

つまり隠す処理ですね。

 

JavaScript

 [ dt ] タグがクリックされたら、[ dd ] タグをスライドさせながら表示して∧ [ position ] を直していきます。

サンプルはこちらから!

 

【ちょこっとニュース】 ホーキング博士が警告! 「人工知能が人類を滅ぼす!?」

最近のニュースではないけど、ちょっと思ったことがあったので書きます。

 

まず、ホーキング博士とは?

イギリスの理論物理学のすごい人らしい。

若いころにはブラックホール特異点定理を発表し...

我々凡人にはよくわからん。

 

ホーキング博士曰く、

「我々が既に手にしている原始的な人工知能は極めて有効であることが明らかになっている。だが、完全な人工知能の開発は人類の終焉をもたらす恐れがある」

「ひとたび人類が人工知能を開発してしまえば、それは自立し、加速度的に自らを再設計してくだろう」

「ゆっくりとした生物学的な進化により制限されている人類は、人工知能と競争することはできず、それに取って代わられるだろう」

 

つまり、

人工知能(アンドロイド)があれば人間なんていらねーんだよ!!」ってわけです。

・・・当たり前ですよねw

IQ4000以上あって岩をも砕く肉体があったら人間の出る幕はないです。

 

さて、ここからが思ったこと。

凡人エンジニア曰く、

「約10年後(2025年くらい)には現在の職業の約50%が存在しなくなるであろう」

「なぜならば、単純作業(販売員や清掃員など)はスマートマシンあるいは人工知能に取って代わられるからである」

「複雑な作業(クリエイトやスポーツなど)に適応できない人間は職を失い、路頭に迷うであろう」

「そのとき、人工知能による人類滅亡が始まる」

 

つまり、

「マシンにはなかなか実現できない感性を使ったことをやろうぜ!」ってわけです。

※あくまでも個人的な意見です。批判はやめてね;;

 

 

まとめ

ホーキングさん→完全な人工知能によって制御不能となり人類滅亡

凡人エンジニア→単純作業は人工知能がすべて行うので複雑な作業ができる人間になるべき