Strings of Life

PHP/Phalcon/MySQL/JavaScript/RegExp/Ruby/Perl/ActionScript

2012年03月

今まではコーディング作業時にはサクラエディタを使っていた。HTMLを書く分にはサクラエディタでも十分便利なのだけど、PHP等のコーディング作業にはより便利なツールがあると聞いた。

統合開発環境のEclipseだ。オープンソースソフトウェアで、無料で利用することができる。コードヒント機能も充実している。通常のエディタよりも遥かに高機能であるらしい。

ということで、Eclipseをインストールして、PHPを書くための環境を構築してみた。難しい作業は必要ない。

Eclipseを日本語化し、さらに各種プログラミング言語用のプラグインを同梱した製品として、Pleiades All in Oneがある。これをダウンロードして、解凍して、起動するだけ。

PHPの動作確認用にXamppも同梱されている。コードを書いた後で動作確認をする際は、Xampp/htdocs フォルダに.phpファイルを放り込んでやればいい。

手順は、
1. htdocsフォルダ直下に xxx.php を置く
2. Xamppを起動してApacheがRunningになっていることを確認
3. ブラウザのアドレス欄に http://localhost/xxx.php と入力


起動にはちょっと時間がかかるが、機能は強力。まだまだ使いこなせていない機能が大量にあるはずなので、これからじっくり学んでいきたい。


Pleiadesのインストールに関しては、この記事も参考になる:
「Eclipse+PDT」でPHP開発~環境構築と使用方法

なお、この記事の中ではEclipseのバージョンは3.5だが、現在の最新版は3.7であり、3.7でもこの記事中の解説との食い違いは見受けられない。

ナビゲーションボタンの縦幅は44px以上が望ましいとされているが、14px~16px程度の文字に<a>タグでリンクを貼る場合も多い。そのようなときに有効となるテクニックが、paddingで<a>タグのタップ可能領域を広げてやること。文字サイズを維持しつつ、ユーザビリティを向上させることが出来る。



参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

・html

<nav class="nav-topicpath">
    <ul>
      <li>a</li>
      <li>b</li>
 (ここに擬似要素が入る)
    </ul>
  </nav>


・CSS

.nav-topicpath ul:after{ ←擬似要素セレクタ「:after」でul要素の終了タグの直前に擬似要素を挿入
  content: ""; ←contentプロパティで擬似要素として""(中身なし)を挿入
  display:block;
  clear:both;
}

なお、擬似要素としては他にも :before があり、要素の開始タグの直後に要素が挿入される。




参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

nav, headerのようなHTML5の新要素をcssで装飾する際は、

header nav{ padding:10px; }

のように要素名をセレクタにするのが普通のやり方だが、これではマークアップするタグを変更する時(nav→div)や、新要素が廃止になってしまった時に、HTMLとCSSの双方を修正する必要がある。

そこで、nav要素にクラスをつけておいて(例:<nav class="nav-topicpath">)、

.nav-topicpath{ padding:10px; }

と指定してやると、nav→divと変更するような時にHTMLを変更するだけで済む。




参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display:block;
}

HTML5で追加された新要素の場合、ブラウザーによってはdisplayのデフォルト値がセットされていないことがある(Firefox3.6ではheaderがインライン要素になってたような…)。ブロックレベルに該当する要素には、あらかじめ display;block をかけておくと安心。




参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

このページのトップヘ