月別: 2015年12月

Codecademyをやってみた

こんにちは、WEBエンジニアのyuchiです。

最近、WEB上でプログラム学習ができる無料のサイトがたくさん作られていますよね。
そんな多々あるサービスの中で、私は以前「Codecademy」というサービス(もちろん無料)を使って勉強してみました。

○Codecademy
http://www.codecademy.com/

普段、私は主にPHPをさわっているので、今回は違う言語にチャレンジしようと思い、
よく使われている汎用なプログラミング言語「Python(パイソン)」を選択してみました。

すると、下記のような画面が出てきます。

 

 

「Codecademy」は日本語に対応していないようなので、説明は英語で書かれています・・・

 

とりあえず説明を読みながら、黒いエディター部分にプログラムを書いて、「Save & SubmitCode」をクリックしました。

 

書いたコードがOKだったら、右上の部分に結果が表示され、プログラムが実行されます。
このように、1つクリアすると次の章に進んでいき、徐々に基礎的なプログラミングが学べるようになっていました。
誰でも気軽に始められるので、初心者の方もこういったツールをぜひ活用してみてほしいです!

以上、終わります。

Tableの使用に際して

今回は、有名なCSSフレームワーク「Bootstrap」を使用した際に、個人的に発見のあった<table>の使用について書きます。

HTMLで<table>とは

自分がコーディングに興味を持ち始めたころは、「テーブル=食卓」のイメージがあり、「table=表」に違和感がありました。
また、コーディングを勉強し始めたころは、ゴリゴリとテーブルレイアウトでページを作成していたこともあります。
が、<table>とは、食卓ではなく、Webページのレイアウトをするモノでもなく、情報を伝わりやすくするためなどに
「表」を実現するタグです。

<table>は優秀

<table>は表の一つの列のセルの幅を内容に合わせて統一し調整してくれて優秀です!
また、ウィンドウを縮めたり、内容のテキストが長い場合は自動で折り返してくれたりもします。
もちろんCSSで横、縦幅、罫線、テキスト位置などが調整できるので、デザインも自由に表現することが出来ます。

スマホでの<table>

しかし、そんなテーブルにも使用する上で問題がありました。
従来のPCの画面サイズで見ときは可読性に問題なく表示されている状態だったとしても、スマホなどの小さな画面サイズで
確認すると、テーブルの項目数が多く表示されてしまったりテキストの自動折り返しの影響でテキストがほぼ縦書きのような
状態になってしまうという問題が起こります。
また、それを回避しようとCSSの設定(折り返して表示させないなど)の親の幅を無視すると、思わぬデザイン崩れが起こって
しまうことがあります。
課題として、そういったケースをどう表現するのが賢明なのかが悩みどころでした。

Bootstrapでの仕様

そこで冒頭に書きましたが、Bootstrapという有名なCSSフレームワークを使うことがあり、確認してみたところ、

<div class="table-responsive">
<table class="table">
...
</table>
</div>

と記述することで、一定幅以下の場合にはテーブルの親のCSSに”overflow-x: scroll;”が適用され、スクロールしてテーブルを
確認することが出来るようになるという仕様でした。
この方法だと、可読性を損なうことなくスマホでテーブルの実装を行うことができる!すごい!と、目からウロコでした。

まとめ

世の中には様々な技術があり、常日頃から学ぶ意識を持ち調べることが大切だと改めて実感しました。

© SEEDS Co.,Ltd.