『ロマンシング サ・ガ』三部作のリマスター版サウンドトラック発売を受けてゲーム熱が再燃している kagata です。 さて今回は PHP のこまかい話です。インクルードするファイルを相対パスで指定していると、思わぬ挙動をみせたり、異なる環境での使いまわしに難が出ることがあります。どんな環境でも意図したとおりのファイルをインクルードできる記述を考えてみましょう。 相対パスでインクルードした場合の挙動（Webの場合） まず、相対パスでインクルードすると何が問題になるのか見てみましょう。 例えば、次のようなファイル構成の Web アプリケーションがあったとします。 /index.php /module.php /include/ /include/inc.php /include/module.php で、それぞれのファイルの中身を次のようにします。このとき、index.php にアクセスすると

Web サイトを開発する際、みなさんはどのようなディレクトリ構成で進めてますか？ 今日は、シーブレインはこんな感じでやってます、というディレクトリ構成をご紹介してみようと思います。 なお、名称などは実際と少々異なる部分もありますし、この形式が全てというわけではありません。 ┬ [app] ────┬ [functions] ├ [bin] └ [classes] ├ [config] ├ [cgi-bin] ├ [documents] ├ [html] ├ [lib] ├ [smarty]───┬ [templates] └ [tmp] └ [templates_c] ■ app 実際に動く部分です。「functions」に関数群を、「classes」にクラス群を格納しています。ちなみに、MVC で言うところの M の部分、すなわち「モデル」に相当するものも、ここに置いています。 ■ bi

今後のWebサイト制作において、さらに重要度を増すであろうレスポンシブWebデザイン。その正しい知識や導入メリットとともに、本当の意味で有効なレスポンシブWebデザインとは何かを改めて考えてみよう。 制作・文：藤田拓人、清水豊（株式会社ワークス） Webを取り巻く環境の劇的な変化Web制作に関わる業界は、その萌芽たる時代からずっと日進月歩してきた。日々めまぐるしく変わっていく情勢をキャッチし、判断し、取り入れながら応用するということの繰り返しだったといえるだろう。 特に2010年以降、スマートフォンの普及とiPadの登場を契機とするタブレット端末の普及、そしてソーシャルメディアの急速な伸長に加え、電子書籍やクラウドコンピューティングにより、さらに身近になった動画媒体、音媒体など、それ以前にはなかったサービスが一気に多重的に現出した。また、その変遷速度はさらに加速度を増している（図01）。

webmobileは、みんなが知りたいスマホ・通信ガジェットの使い方を発信しているレビューサイトだよ♪ webmobile（ウェブモバイル）は、大好きなPixel/iPhone/MVNO/amazonについて、気づいたこと・困った事の解決など経験したことを発信しています。 運営歴はかれこれ10年以上です。 私が初めて買ったスマートフォンは、auから発売されたSHARP製IS03。今でもデザインの良さに感銘を受けます。 今のメイン機はGooglePixelとiPhone15ProMAXです。 昔はASUS製ZenFoneにはまり、新製品が発売されるごとに買っていました。 MVNOのお店に我が子と訪ねる旅、楽しかったなぁ♪ ご縁あって、UQコミュニケーションズ本社に行くこともありました。 UQモバイル公式グッズをたくさん手に入れる機会がありました。 東京新宿にあるLINE株式会社に招待して貰っ

スマホなどの小さいスクリーンでは昔からあるLightbox風の体験を与え、より大きいスクリーンではページ上にインタラクションのスペースを残すよう設計された、画像や動画をアニメーションで拡大表示させるjQueryのプラグインを紹介します。 フラットなデザインにも相性が非常によく、操作も快適でエレガントです！ しかも、IE7+にも対応。 Strip Strip -GitHub Stripのデモ Stripの使い方 Stripのデモ デモはChrome, Safari, Firefox, Opera, IEは7+、iOS5+, Android3+でご覧ください。 各画像をクリック・タップすると、拡大画像がスライドして表示されます。 拡大時はそのまま他の画像も表示できるギャラリー機能にも対応しています。 デモ：幅780pxで表示 スライド表示させるのは画像だけでなく、YouTubeやVimeoなど

どうも〜こんにちはぁ！ Web制作者として日々勉強中でありますライターの、のび太です。 先日「Webが学べる海外サイト10選」をご紹介させていただきましたが、もちろん国内サイトでも、Webに関してガッツリ学べる有益なブログはたくさんあります。 国内サイトでは、およそ80ぐらいのWeb系ブログをRSS購読させてもらっていますが、今回はその中でも厳選に厳選しまくった「これはWeb屋なら絶対必須でしょ！　もはやお金取られてもいいレベルや！」って感じた10個をみなさんにシェアしたいと思います。 また、大変恐縮ながら、個人的にベスト3だと思った記事（特に有益だと思った記事）も一緒にご紹介させていただきます。 【こちらもおすすめ】 ☞ Web制作者がマジで学べる国内ブログ厳選10個【制作+SEO対策編】 Webクリエイターボックス http://www.webcreatorbox.com/ あまりにも

作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １

2014年3月28日 CSS, Webサイト制作 ちょうど今作っているサイトで、経歴をタイムラインで表現するページがあったのでコードを紹介。コード自体はとってもシンプルなので、カスタマイズ次第でどんなデザインのサイトにもあわせられると思います。文章にするとゴチャゴチャしがちな経歴・沿革をスッキリと表示しましょう！ ↑私が10年以上利用している会計ソフト！ サンプル Chrome, Firefox, Safari, IE9・10で動作確認。 See the Pen Timeline by Mana (@manabox) on CodePen. モバイルファーストってことで、640px未満の幅のデバイスには年月・見出し・詳細文章を順に表示します。 モバイル版はこんな感じ。サンプルページの画面の幅を調整して比較してください。 HTML timeline というクラスのついたリストの中の li タ

レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記　2014.03.19】 元々のタイトルは「レスポンシブWebデザインに対応した横メニューの作り方」でしたが、よく考えるとスマホ対応になったら縦メニューになりますのでタイトルを変更しました。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; paddi

スマートフォンやタブレット、PCなどあらゆるデバイスに対応する制作手法として注目されている「レスポンシブWebデザイン」。レスポンシブWebデザインの概念からサイト制作の基本まで、菊池 崇氏が解説します。

これからWordPressを始めよう！って人も いつもWordPressを楽しんでいる人もこんにちは！ attripです。２０１２年も後少しで終わりということで、今年使っていたぼくのWordPressプラグインを紹介しちゃうよ！ 2012年版! モバデビで絶賛稼働中のWordPressプラグイン52選 | [M] mbdb http://mbdb.jp/hacks/2012-plugin-list.html という記事をみつけてなるほどなー。と思ったり、ちょっとそれいらないだろ。。。 と思ったりするのもあったり、したので、僕のも公開しちゃうぞ！ 2012年版attripで絶賛稼働中のWordPressプラグイン43選 を書きました。 実装しているプラグインがこれだけあると、、、まとめておくと自分の為にもなりました。 もし、これからWordPressでメディアを作りたい！blogを作りたい！

『WordPress』と聞くと、ブログや企業などのウェブサイト、ポータルサイトなど、いわゆる日本で「ホームページ」と呼ばれるモノを連想される方が多いと思いますが、WordPressは非常に柔軟に設計されていますので、カスタマイズによって様々な事が出来ます。 今回、実案件でちょっとした管理システムを制作させていただいたのですが、これが自分としては、なかなかの出来で、クライアントさんにとってかなり業務効率の改善に繋がったと思うので、 “どやぁ！( ﾟдﾟ)” “WordPressってこんな事も出来るんですよ” って感じでご紹介したいと思います。 ちなみに今回の記事はWordPress Advent Calendar 2012に参加しています。 「クリスマスまでの間、みんなで順番にWordPressの記事を書こう」っていうイベントです。 WordPress Advent Calendar 201

jQueryというのは、JavaScriptのライブラリのひとつ。どんなライブラリかというと、「htmlから特定のclassや属性のタグを選んで書き換える」とう処理がとても簡単に書けてしまうもの。Ajaxの機能もあるのでJavaScriptのスクリプトを作るのに手放せない。 今回はjQuryの簡単な例として「特定の入力欄に来るとIME(日本語入力機能)を自動的にオンオフする」スクリプトの紹介と、jQueryを使ったJavaScriptの書き方を解説する。 IMEが勝手にオン・オフするのは個人的にはあまり好きではないんだけど、仕事で依頼があるとやらざるを得ない。cssで指定することもできるが、今回はjQueryを使って書いてみた。ちなみにIMEオン・オフの制御はIEでのみ働く。 test.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr