2014年 3月 の投稿一覧

1を聞いて10を知る

技術スタッフブログ

技術スタッフブログmrp-staff blog

アイコン技術スタッフの一言

1を聞いて10を知る

この言葉はみなさんご存知の通り論語の言葉です。
本来は「物事の一端を聞いただけで全体を理解する。」という意味で理解力が
あることを指すものですが、私は日々の仕事の中で「1つのことを調べて10を学ぶ。」という意味で使っています。

たとえば、Androidアプリを作るとします。
アプリにはPUSH通知機能という便利な機能があるらしく、なんだかわからないけど
実装したいなと思いました。
その場合、まずはPUSH通知機能とはどんな便利な機能なんだ?とネットで調べると思います。
ネットで調べると「アプリに対して何らかの通知を、サーバー側から送信する機能」とわかりました。この機能はメールなどで受信した際にお知らせする機能なんだと理解したあなたはこれで1つPUSH通知機能について理解したと思います。
ですがこれだけでこの機能を利用することはできません。
通知できるのは文字なのかな?画像も送れないのかな?
サーバー側からはどんな形式で送るのか言語はなにで実装するのか、などなど。
でてくる疑問を調べ、その都度解消していくでしょう。

このように、1つの調べものからいくつもの疑問が湧き、またその疑問を解消し理解していきます。仕事や私生活などどの場面でもこれは出てきます。調べるということは学ぶことです。
学ぶということは結果的に自分の成長に繋がる明確なチャンスだと私は思います。
1つの調べもので1つの答えだけではなく、1つの疑問から多くの戦果が得られる教訓として
使ってみてはいかがでしょうか。

一覧へ戻る最新一覧へ戻る

◇CSSのdisplay:table;ら辺のお話

技術スタッフブログ

技術スタッフブログmrp-staff blog

アイコン技術スタッフの一言

◇CSSのdisplay:table;ら辺のお話

スマホ向けサイトを作っていてtableタグを用いずに表組したり、ナビゲーションを表示する際にはよくCSSプロパティと値としてdisplay:table;が用いられると思います。
このdisplay:table;とdisplay:table-cell;は比較的セットで使われることも多いかと思いますが、これに加えてdisplay:table-row;を使うとちょっと便利だというお話をさせて頂きたいと思います。

例えば

>>あああああアアアアア
>>いいいイイイ
>>ううううううううウウウウウウウウウウ

この様なHTMLコードがあったとして

こんな感じの完成イメージで、CSSを書く際にdisplay:table;とdisplay:table-cell;だけだったとすると

.cssTable {
padding: 0;
list-style: none;
border:solid #999;
border-width: 1px 0 0 1px;
width: 300px;
}
.cssTable li {
display: table;
width: 100%;
}
.cssTable span {
display: table-cell;
margin: 0;
padding: 3px 5px;
border:solid #999;
border-width: 0 1px 1px 0;
}

こんな風に書くと思います。 ただこれだけだと

こんな感じで中の要素に対してそれぞれ幅が割り当てられてしまって、どうにも体裁が悪いですね・・・。

そんな時にはdisplay:table-row;を使いましょう!
上記の様なHTMLの場合、ulに対してdisplay:table;、liに対してdisplay:table-row;、spanに対してdisplay:table-cell;を使うと良いかと思います。

.cssTable {
display: table;
padding: 0;
list-style: none;
border:solid #999;
border-width: 1px 0 0 1px;
width: 300px;
}
.cssTable li {
display: table-row;
width: 100%;
}
.cssTable span {
display: table-cell;
margin: 0;
padding: 3px 5px;
border:solid #999;
border-width: 0 1px 1px 0;
}

そうすると・・・

はい。できました!

どうでしょうか?ちょっと便利ではないでしょうか。

案外display:table;やdisplay:table-cell;は使ってもdisplay:table-row;まで使う人はいないのかなと思いますので、よかったら試してみてください。

ただ、このtable-cellやtable-rowはIE7では使えず、IE8以降とchromeやFirefox、スマホのモダンブラウザで対応しているので、気を付けてください。

だったら、最初からtableタグ使えって?それは言わないでください・・・ tableタグ嫌いなんだもん。

一覧へ戻る最新一覧へ戻る