tuffgong57のブックマーク - はてなブックマーク

レスポンシブWEBデザインでフィットネスクラブのサイトを作ってみる｜ cocope [Web制作ヒント集ココペ]
現在WordPressで実案件を想定としたWordPress構築術を紹介しています。レスポンシブWEBデザインで作っているのですがあまり詳しく解説していなかったので今回改めてまとめていきたいと思います。今回目標としているサイトは小規模のフィットネスクラブです。サンプルサイトをご用意していますのでスマホやPCで確認してみてください。今回のサンプル： Sample Fitness Club まずはサイトのデザインを考える最初はどのようにサイトを組み立ててて行くか考えていきます。完成形のデザインと変わっている場合もありますが、まずはいつも通りにPhotoshopなどでデザインをしていきます。画像にはありませんがスマートフォン用のデザインやタブレット用のデザインも用意しましょう。極端にサイトの表示、デザインが変わってしまうような場合はレスポンシブWEBデザインにする意味が無いので注意しな
tuffgong57 2015/02/26
Webデザイン

html

JS
リンク
JavaScriptを使わずに画像でGoogleマップを表示させる方法｜ cocope [コードスニペットココペ]
今回ご紹介するネタはWeb制作で利用する頻度が高いGoogleマップに関する小技です。 Googleマップの地図をJavaScriptを使った表示方法ではなく、画像形式で地図を出力する方法をご紹介します。スマートフォンなどのサイトに活躍するのではないでしょうか？表示サンプルサンプル今回のサンプルは中野駅を表示しています。画像タグで表示ができるスマートフォンで従来のGoogleマップの表示をしてしまうと地図に触ってしまうと勝手に移動することありませんか？せっかくポインターで表示しているのになくなってしまったり……そんな時は画像で頼るのが一番かと思います。設置方法も簡単でサイト制作でよく使うimgタグのみで表示ができます。JavaScriptなどの読み込みも必要ないので一気に敷居は低くなります。 http://maps.google.com/maps/api/staticmap?
tuffgong57 2014/10/31
Googleマップ

webデザイン
リンク
簡単なレスポンシブデザインのHTMLとCSSを組んでみよう｜ cocope [コードスニペットココペ]
初心者向けのWeb制作ヒント集ということで立ち上げたのですが、いきなりレスポンシブWebデザインネタです。でもWebデザイナーを目指している方もいつかはぶち当たるかもしれないので、今は不明であってもいつか役に立ったら幸いです。では話を戻して、レスポンシブデザインについてまとめていきます。レスポンシブデザインについてまずはレスポンシブデザインというのから学んでいきましょう。最近ではPCよりもスマートフォンやタブレット端末でのサイト閲覧をする方が増えてきております。 PCやスマートフォンでも同じファイル（HTML）で画面サイズを基準にしてサイトを切り替える方法のResponsive Web Design（レスポンシブWebデザイン/RWD）が誕生しました。2010年に誕生したまだ若い技術です。レスポンシブデザインは単一の技術ではなくメディアクエリ、フルードグリッド、フルードイメージ
tuffgong57 2014/10/31
レスポンシブデザイン

web

IE8
リンク
1