コレ理解できてなかったCSS・・・first-child

WEBアプリの作成をよく行っているんですが思ったレイアウトにならないことも多々あります。
基本的にはタイプミスなのですが、今回始めて気付いたCSSの動きについて備忘として・・・

 

【 :first-child 】

セレクタとして使い慣れると便利なfirst-childですが完全に私勘違いしてました。
例えばCSSに下記を指定したとします。

div p:first-child {
color: #FF0000;
}

 

HTML部は

<div>
<p>ここは赤色</p>
<p>ここは普通</p>
</div>

 

これなら普通に1つ目のpタグに対してCSSが反映され赤色になります。

ここは赤色
ここは普通

 

ただしこんなHTMLだと・・・

<div>
<h1>タイトル</h1>
<p>ここは赤色</p>
<p>ここは普通</p>
</div>

 

なんと・・・反映されない!!最初のpタグじゃないの!?

タイトル
ここは赤色
ここは普通

 

これが勘違い・・・実は:first-childは最初の子要素であり最初のPタグじゃないんです。。
よって後者のHTMLではdivの最初の子要素はh1なのでCSSが適用されなかったんですね。

ではこの時はどうすれば良いのか?
ちゃんと用意されているんです!

【 :first-of-type 】

これこそ私の求めていた結果を導くセレクタ!

 

ということでCSSを下記に変更

div p:first-of-type {
color: #FF0000;
}

 

そうすると・・・

タイトル
ここは赤色
ここは普通

こうなります!まさに思った通り!

first-of-typeは最初の対応するタグに対してかかるってことですね。

 

ということで用途によってしっかり使い分けが必要ですね。
理解していると思っていても理解しきれていないCSS・・・奥が深い。。

社内でどれ使う?社内チャットツール4選

社内チャットツール5選

IP MessengerChatWorkHipChatslackFacebook Messenger

情シスの悩みどころとして、利便性の表裏一体のセキュリティリスクがあげられます。
社内で使うチャットツールも例外ではありません!

社内ツールも利便性を取るかセキュリティを取るかが決め手になります。

IP Messenger

ip messenger
IP Messenger

社内完結型でかなり軽量なIP Messenger!
ポップアップがたまにうざいが、軽量で相手が開封したかも分かって便利!

ChatWork

chatwork
ChatWork
WEB型のチャットソフト。iOS/Androidもあり、今後WEB版だけではなくデスクトップクライアントも開発予定。
元EC Studio株式会社の山本敏行CEOの会社。
APIも公開しておりZapierでの自動連携も可能。

ブラウザ通知が心地よいです。

ブラウザ通知だと少し気付きにくい+無償プランだとグループが14個まで+ChatWork社の
もっと細かい事がしたい時用の、KDDI ChatWorkもあります。

HipChat

hipchat
HipChat

WEB+インストール両方いけます。またモバイルへの対応も!
有償版との違いも、ビデオ通話不可、ファイル5Gまで、スクリーン共有不可とかなり良心的です。
最近は日本語サイトも出来、使い勝手もよりよくなりました。

slack

slack
slack

エンジニアを中心に人気が出ているslack
Flickrの創業者が生み出したそうです。

人気の秘密は連携系が豊富。Google Calenderとも連携可能でIFTTTなどでもレシピが豊富です。
ただし米サイトしかないので、日本語でのサポートなどは無し。

まとめ

完全インストール型でセキュリティ高 → IP Messenger
日本語 WEB+連携 → ChatWork
英語 WEB+豊富な連携 → slack
両方出来る → HipChat

私のイチオシはChatWorkです!それぞれにあった物を選びましょう!

サーバーサイドテクノロジーはどれが良い?

いつもお世話になっております。

中小企業の情報システム部の中の人、かじかじさんです。

 

社会人になって入社年数は両手で収まらなくなってくる中堅だけど平社員な私。

中小企業にありがちすぎる 「 年功序列 」 ってやつですね。

 

情報システム部の職務として、色々な作業を行っていますが、

最近あれこれ考えていたのが、タイトルの通り 「 サーバーサイドテクノロジーって何が良いんだろ? 」ということです。

 

一般的によく聞くPHP等のサーバーサイドテクノロジーですが

たくさん種類はあるけれども、中小企業なんかだとなんとなくの流れで今までの技術を使っちゃうんですよね。

ちなみに弊社はClassic ASPが80%以上占める感じで、悪くも無いけど良くも無し。

最近はasp.netなんかも使ってみてますが、開発環境を求められることが

今までテキストエディタのみで頑張ってきた私にはストレスでたまりません・・・

 

そこで私の一番尊敬する先生 「 グーグル先生 」 へ尋ねてみました。

サーバーサイドテクノロジーってどうするのがいいの?ってね。

そして見つけた回答がここにありました。

参考:どのサーバーサイドテクノロジーを選ぶか

 

なるほど!といった感じです。

まぁやはり一長一短あるということですね。

もっと自分の作る内容を見つめなおして、長い目で検討していきたいと思います。

 

でもやっぱりClassic ASPが好きだー!