laravel 開発日記 第1回 ~ composerのインストール ~

どもです。
最近、すっかり興味の対象がwordpressからlaravelにかわったdog-earsです。

ある程度laravelを触って分かってきたので、
今日からおさらいがてら、laravelについての知識をまとめていこうと思います。

本日はcomposerのインストールから。

Continue reading “laravel 開発日記 第1回 ~ composerのインストール ~”

エレガントなコード

むぅ・・・気づけば半年近くブログほったらかし・・・。

ちゃんとした文章をと思うと更新が滞るので、
つぶやき的なのも書こうと思います。

ということで、エレガントなコードについて

■2.コードエレガンス(美しいコード)とは(PHP エキスパート プログラミング)
http://blog.livedoor.jp/php_expert/archives/cat_62692.html

> エラー処理のために、ifで分岐して、通常処理を、elseでに書いてしまう。
ごめんなさい。よくやります。

あと、命名ルールとかも、大事ですね。
それは、また別投稿でまとめたいと思います。

文字色のアニメーションについて

新規サイトを作るにあたり、
テキストリンクのロールオーバーには、
文字色アニメーションを使おうと思います。

文字色アニメーションを実装するための方法をざっと調べたところ、
以下、2種類を発見。

(1)CSS3 の transition プロパティを使って実装
(2)Jquery の プラグインを使って実装

 

(1)について、
【デモ】
■文字色アニメーション(CSS3版)
http://dog-ears.net/140715_color_animation01/index01.html

シンプルかつきれいにいけるものの、対応ブラウザが
webkit系(GoogleChrome、Safari等)
に、限られるとのこと。

ということで、パス。

【参考】
■CSS3リファレンス
http://www.htmq.com/css3/transition.shtml
■css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた
http://kachibito.net/web-design/css3-transition-sample.html

 

次、(2)Jquery の プラグインを使う場合。

プラグインにもいくつかあるもよう。
取り急ぎ、「Jquery Color Plugin」を使ってみる。

【デモ】
■文字色アニメーション(Jquery Color Plugin版)
http://dog-ears.net/140715_color_animation01/index02.html

うーん。Jqueryのバージョン1.3.2だと動くんだけど、
1.9にしたら、動かなくなった・・・
[追記]1.9にしたら、hoverファンクション自体動いてないみたいでした。1で指定したところ、問題なく動作。

【参考】
■文字色や背景色をじんわり変える「Jquery Color Plugin」
http://otani-webs.com/lab/javascript/101120.html

[追伸メモ]
あとで調べること
・Jqueryのバージョン管理をどうするか。
・プラグインのライセンスについて

HTML5 新規サイト用 テンプレート(レスポンシブル対応版)

先日アップしたHTML5用のHTMLテンプレートを、レスポンシブル対応に修正しました。

newsite_html5_ver02ダウンロード
デモ

具体的な修正点は、以下の通り。

(1)index.htmlに追加
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<meta name=”format-detection” content=”telephone=no” />

(2)CSSに追加
-webkit-text-size-adjust: none; /* フォントサイズ自動調整 */
@media screen and ( max-width : 760px ) { ~ }

なお、CSSのブレイクポイント(表示切替ポイント)は、
iPad ポートレート(768px)で、ぎりぎりPC表示にする想定で、
幅760pxに設定してます。

なお、ブレイクポイントの参考にしたのは、以下のサイト

■レスポンシブWebデザインのブレークポイント調査
http://design-spice.com/2012/05/17/break-point/

ブレイクポイントの設定については、いろいろ説がありますが、
とりあえず今回はこれで。

ちなみに、自分がiphoneユーザーでないこともあり、
retina対応は、後回しにしています。