2012-02-01から1ヶ月間の記事一覧
◆TwitterをハテナとWordPressに表示する ・Twitterに登録 https://twitter.com/about/resources/widgets●ハテナのサイドバーにTwitterをはりつける 下記のコードを管理画面→デザイン→詳細の「ページのフッター」にはりつける（一番下の</div>の上）。 <div id="twitter_div" class="hatena-module"> <div class="hatena-moduletitle"> <a href="http://twitter.com/アカウント名">Twitter Up</a></div></div>…
透過効果を重ねたサイト 透過が2重になっている。透過効果は色合いをうまく考えれば重ねることにより、きれいで凝ったサイトになると思う。参考にしたい。 細かい細工がされているサイト とても細かい細工がされている。マウスオーバーすると棚の黒のスライ…
◆サイト内検索 5ページくらいのサイトには必要なし。（逆に設定するとページ数が少ないのではずかしい場合もある） 10ページ以上のサイトに使う。→ECサイトなど ページ数が少なくても、奥に入り込んだ階層のサイトには使う。（ECサイトなど） 強調したい言葉…
画像が大きくてわかりやすいサイト とても画像がきれい。またひとつひとつ詳細がのっているのでとてもわかりやすい。画像がきれいなのでオーストラリアに行きたくなる。 透過効果もこのサイトにうまくマッチしていて参考になる。 やはり旅行に関するサイトは…
職人さんの通販サイト
jimdoのサイトにはりました。 なかなか便利。
マレーシアのサイト http://www.sksfood.com/index.htmlマレーシアのクッキーのサイト。カラフルで気持ちが明るくなる。色がきれい。 丸のデザイン、navのデザインが印象的。 http://www.hssfood.my/おかし通販のサイト。レトロな感じが新鮮でおもしろい。 …
FLASH 画像を動かす場合は、水平・垂直に動かすこと （斜めは見えにくい）。 画像またはテキストに、ドロップシャドウなどの効果をつけたいときは、ムービークリップにする。 →グラッフィックにしてしまった場合はムービークリップに変換が必要。 【変換方法…
オブジェクトをじっくり見せる横スクロールのサイト 横スクロールによって、美術館にいるかのように作品が見れる。シンプルな動きだけど、内容とあった動きでおもしろい。もっとゆっくりスクロールするともっとゆったりしたサイトになるように思う。 全体的…
フォームのデータを受け取る「$_POST」について、サーバー変数「$_SERVER["PHP_SELF"]」で指定する際は、データを受け取る側である「$_POST」の前に必ず「@」を付加する。 PHP参考（必ず読む！） http://www.php.net/manual/ja/reserved.variables.php empty…
ダイナミックなアコーディオンメニュー トップページからいきなり、アコーディオンメニューになっていて、とてもインパクトがある。メニュー内の複数枚の画像もマウスオーバーすると離れるなど、みやすくておもしろい。 ポートフォリオ、これ、参考にしよう…
ナビゲーションと横スクロールが印象的なサイト ナビゲーションが水平方向のタイムラインになっていて、クリックするとその日の内容に移動する。横スクロールのサイトだけど、横スクロールバーや矢印がなく、マウスホイールで横に移動する。ナビゲーションが…
ページ移動がおもしろいサイト スライドが開くかのようなページ移動がおもしろい。縦に並べられた写真もいい感じでぼかしていたり、影により立体感があるのも目がいく。項目の切り替えの際に、タイトルと画面いっぱいの画像で展開しているのでメリハリがある…
センターにナビがあるサイト センターにナビがあるのも印象的だけど、さらにナビからコンテンツがスライドするのが斬新。ひとつひとつの画像がきれいな上、バックグラウンドの大きな画像もプラスして視覚的に印象が残る。
◆PHP復習 【フォームを取得】 《input.php》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォーム情報を取得する</title> </head> <body> <form method="post" action="output.php"> お名前： <input type="text" name="name" size="20" maxlength="30"> <input type="submit" value="送信"> </form> </body> </html> 《outpu…
いきなり枠のみからはじまるデザインのサイト FREELANCEのINTERACTIVE DEVELOPER & DESIGNERのサイト。いきなりの可変グリッドの枠のみのデザインから始まり、マウスオーバーすると作品が表示される。マウスオーバーしないと見れないもどかしさがあるけれど…
◆jQuery Mobil <meta name="format-detaction" content="telephone=no"> をhead内に記述。 → コンピューターが電話番号と誤認識するのを防ぐ。 <link rel="apple-touch-icon" href="apple-touch-icon.png"> をhead内に記述。 → iPhone/iPod Touchにネイティブアプリと同じようにアイコンをホームスクリーンに設置できる。 【補足】WordPressでapple-touch-iconを設置 「header</link></meta>…
インパクトのある動画サイト
◆DW テンプレートについて 【DWでテンプレートを作成】 新規ドキュメント→『ページレイアウト』・『レイアウトを選択』を選択し、作成。※これ自体もテンプレートものようなもの 編集する部分を選択し（反転させる）、挿入→テンプレートオブジェクト→編集可能…
表示されたリンクにスマートフォンサイトが存在する場合、スマホサイトに自動的に誘導される設定。 ①《Windows》 「編集」→「設定」→「詳細」→「メニューバーに”開発”メニューを表示」にチェック 《Mac》 「環境設定」→「詳細」→「メニューバーに”開発”メニ…
マウスオーバーが印象的なサイト サンフランシスコのデザイン会社のサイト。 トップページに商品デザインがのっていて、マウスオーバーすると白黒からカラーになり、商品が横スライドする。小さい空間をくるくる回っているのがなんとなくかわいい。全体が白…
◆jQuery Mobile リスト ul、ol/li要素などのリストにおいて、data-role属性「listview」を追加すると、スマートフォンに最適化されたリストを表示。 ①リスト内の項目がa要素で包まれている場合 → 右端に矢印が付いたリンクとなる <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery Mobile Sample</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </meta></meta></head></html>
kerningゲームサイト カーニングが練習できるサイト。地味におもしろい。 colorマッチングゲームサイト 色をマッチさせて、色相等を練習するゲームサイト。意地になる。
かわいいオンラインショップサイト 画像が大きく、商品ひとつひとつのサイズが視覚的にわかりやすく表示されているのでわかりやすい。画像も大きくてきれいで見ていて楽しくなる。配色もメリハリがきいていていい。左サイドバーのメニューにアイコンがついて…
展開がおもしろいサイト メニューアイコンがドロップ＆ドラッグができ、クリックするとパッと展開したり上から降ってきたりと軽快な動きをする。ページ展開が非常に早く、また次から次にどんどん色々なデザインがでてくるので見ていてとてもおもしろい。オー…
トップページが斬新なサイト トップページが真ん中を黒と白で区切られたとても斬新なデザイン。マウスオーバーするとスライドされ画像が表示されるのもとても印象的。
◆スマホ用にgoogle mapを取得 PCサイトの場合はiframeでもいいが、スマホではiframeは表示されない場合があるため『Google Maps API』で地図を読み込む。 Google Maps APIのスクリプトををhead要素に読み込む。 scriptを記述 <script> $('div#access').live('pagesho…
美しいAudio Clockデザインのサイト 色々なAudio Clockが動画で掲載されている。トップページは背景が黒＆カラフルな色で目を引く。また時計デザインがひとつひとつ動画で紹介されていて、そのデザインもとてもおもしろい。特に数字がデザインによって印象が…
◆スマホサンプルサイト作成 ☆iBBDemo3.airをインストール 回転させて、横の状態での表示確認ができる。 iPhoneだけではなくiPadの表示確認もできる。 実機を操作して確認する時間が省けるので、作業の効率化が図れる。 ☆iPhone Simulator4でも表示確認可。 …
縦スクロールのインパクトのあるサイト ゆるキャラ「くまもん」のサイト
