これぞレスポンシブ確認ツールの決定版！OSを選ばずにウェブサイトをすぐに確認できる -Viewport resizer
ウェブページの表示サイズをデスクトップやスマフォ・タブレット用に変えてレスポンシブの確認をするツールはたくさんありますが、これはかなりおススメのツールです。 Viewport resizer Viewport resizerの特徴 Viewport resizerの使い方 Viewport resizerの高度な使い方 Viewport resizerの特徴 Viewport resizerはブラウザベースで動作するブックマークレットで、WindowsでもMac OSでも即時にツールを起動して、表示しているウェブサイトをあらゆるサイズに変更して確認できます。 フルカスタマイズが可能。 その場でサイズ変更してのカスタマイズも可能。 1クリックでスマフォやタブレットの縦・横向きを変更できます。 Media Queriesをサポート。 Metaのviewportタグを適合させます。 ページのリロ
新クラウドサービス「PHP APPS」が最強の無料ブログサービスになりそうな件
無料のブログサービスといえばアメブロやFC2、bloggerなどが有名です。かくいう私も忍者ブログの無料レンタルシステムを利用して当ブログを運営しています。 多くの人がこれらのメジャー系無料ブログサービスを利用していると思いますが、ここへ来て新たな無料ブログサービスが誕生しました。これはもしかしたら最強になるかもしれない。 ネットオウルがphpアプリケーションの無料クラウドサービスを開始まずはニュース記事で概要を。 WordPressなどPHPアプリを無料で利用できるクラウドサービス、ネットオウルが提供開始ネットオウルは2012年10月17日、オープンソースのブログプラットフォーム「WordPress」などのPHPアプリケーションを無料（広告表示付き）で利用できるクラウドサービス「PHP APPS」（写真）を提供開始した。サーバー構築や運用の知識を必要とせず、簡単なフォームを埋めるだけです
無料で商用利用できてクレジット表示も不要の画像素材検索サイト「タダピク」
仕事上で使用する画像はウェブ上で見つけにくく、いい画像だな、と思っても商用利用ができなかったりクレジット表記が必要だったりする場合もあります。そんな時に便利なのが横断検索サイト「タダピク」で、海外や日本の計24の画像検索サイトから商用利用OK・クレジット表示不要の画像素材を横断検索することが可能です。 タダピク（tadapic） - 商用利用OK・クレジット表示も不要の画像素材検索エンジン http://www.tadapic.com/ トップページの検索欄にキーワード「子猫」を記入し、検索ボタンを押すと…… こんな感じで子猫の画像が表示されます。 気になる画像をクリック。 すると、画像元のサイトに飛びます。 なお、検索対象は「画像」なので、写真だけでなくイラストも一緒に検索されます。 検索時にはイラストやアマチュアカメラマンによる写真素材サイト足成の写真を除外したり、日本のサイトに絞り込
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
あなたの作業を音速にするかもしれないWEB屋の作業スピードを上げるチートシート大量紹介 | バンクーバーのうぇぶ屋
このブログがフロントに関する記事が多いもんだから、たまにデザイナーと呼ばれることがあるんですが、僕は業務としてはデザインよか制作ディレクションの方がどちらかと言えばメインなんですよね。 そんなディレクターとしての役割の一つに、周りにいる優れたデザイナーやプログラマー、デベロッパーの業務効率を考えることが挙げられます。 何を取るわけでもなく中途半端な僕ですが、ディレクターとして周りの各プロフェッショナルの役に少しでも立てればと、そして制作する上での効率を向上させるべく色々情報収集をする中で、よくチートシートの存在を目にします。（チートシートってどれだけ普及してるのかわかりませんが、つまりカンニングペーパーのことらしいです。） WEB屋にとってのチートシートって、どれだけ優れた技術力やデザイン力を持っていても、何かしら新しい発見がある物ですよね。以前書かせてもらった時間の価値は人によって違う！
プライバシーポリシー-そのコンテンツは必要ですか？
プライバシーポリシー-そのコンテンツは必要ですか？ 『プライバシーポリシー』というコンテンツを作っているサイトを多数見かけます。 『プライバシーポリシー』とはWEBサイトなどで個人情報の扱い方や考え方を明記したものです。 たとえば、ショッピングサイトで買い物するときには、住所や氏名などの個人情報の入力が必要です。そのため、ショッピングサイトでは多くの個人情報が収集されます。これらの個人情報については、ホームページの管理者がプライバシーポリシーを定めて、正しい方法で管理する責任があります。 またプライバシーポリシーには、顧客情報を5000件以上保有する企業に義務付けられている個人情報保護法により定められている項目・事項等をあわせて併記しているものがほとんどです。 個人情報保護法については、違反時は「６ヶ月以下の懲役または３０万円以下の罰金」の刑事罰が課せられる為これからプライバシーポリシーを
[JS]あなたのウェブページを52の言語に自動翻訳するボタンを簡単に設置できる -Translate This Button
<textarea name="code" class="html" cols="60" rows="5"> <!-- Begin TranslateThis Button --> <div id="translate-this"><a href="http://translateth.is/" class="translate-this-button">Translate</a></div> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script> <script type="text/javascript"> Trans
携帯サイトのスマートフォン対応のポイント！ ～スマートフォン表示で最適サイズを設定する「viewport」～ | Web担当者Forum
1.携帯向けサイトは横幅240px、スマートフォンサイトは320px 2.スマートフォンにあるといい viewport 3.携帯サイトをスマートフォン対応させる ■携帯向けサイトは横幅240px、スマートフォンサイトは320px 携帯電話（ガラケー、フィーチャーフォン）の横幅はほとんどのものが240px前後であり、一般的に携帯向けのサイトは横幅240pxで作られます。 一方、スマートフォンでは、タブレットなどもありますが、片手で持てるタイプのものは320pxのものが主流となっています。 携帯サイトをスマートフォンサイトとして利用するにはこの横幅の問題があり、『画像が小さくなる／レイアウトが崩れる』などの問題が発生します。 ■スマートフォンにあるといい viewport スマートフォンでウェブサイトを閲覧すると、特にPC向けに作られたページの場合は、小さい画面に収まるようにして小さく表示され
携帯サイトのスマートフォン対応のポイント！ ～スマートフォン表示で最適サイズを設定する「viewport」～ - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
携帯サイトのスマートフォン対応のポイント！ ～スマートフォン表示で最適サイズを設定する「viewport」～ 2011.03.07 2019.06.21 WEBデザイン 1.携帯向けサイトは横幅240px、スマートフォンサイトは320px 2.スマートフォンにあるといい viewport 3.携帯サイトをスマートフォン対応させる ■携帯向けサイトは横幅240px、スマートフォンサイトは320px 携帯電話（ガラケー、フィーチャーフォン）の横幅はほとんどのものが240px前後であり、一般的に携帯向けのサイトは横幅240pxで作られます。 一方、スマートフォンでは、タブレットなどもありますが、片手で持てるタイプのものは320pxのものが主流となっています。 携帯サイトをスマートフォンサイトとして利用するにはこの横幅の問題があり、『画像が小さくなる／レイアウトが崩れる』などの問題が発生します。
WEBサイトのデザインについて質問です。 CSSなどを切り替える事でガラケー用とスマートフォンの表示を変えることを考えております。…
WEBサイトのデザインについて質問です。 CSSなどを切り替える事でガラケー用とスマートフォンの表示を変えることを考えております。 とはいってもガラケーとスマートフォンでは表現能力が段違いすぎますし、切り替えるといってもベースとなるHTMLは１つなので文字の装飾程度しか思いつきません。 ベースとして同じHTML(もしくはPHPなど)を使用しているが、CSSの切り替えだけでデザイン自体をガラケー用とスマートフォン用とで変えている(もしくは雰囲気がスマートフォンっぽいものを演出出来ているなど）所などあれば教えてください。 また、そういったガラケー・スマートフォン両用のサイトを作成するにあたって具体例などあれば教えてください。 ※検索等でスマートフォンサイトの作り方などの紹介は不要です。
作って学ぶスマートフォン対応サイトの基本 (2/4)
基本のHTMLを作成する 最低限の制作環境が整ったところで、さっそく簡単なスマートフォン向けWebページを作成してみましょう。エディターを起動して、次のようなHTMLを用意します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>スマートフォンサイトテスト</title> </head> <body> </body> </html> 今回はHTML5で記述していますが、基本的にはHTML4やXHTMLなど、PC向けのHTML/XHTMLがほぼ利用できます（iモードなど携帯サイト用のHTMLは正しく表示できません）。続いて、基本的なマークアップを施していきます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>
1時間で携帯サイトをスマートフォン対応にする方法 | GREE Engineering
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
CSSレイアウト時のよくやる失敗と対処法｜WEB制作（html,css(スタイルシート) )｜プログラムメモ
■floatでレイアウトしたときのボックスの間に隙間が出来る →隙間が出来るボックス要素全てに float 要素を追加 ■ <div>内に配置した<img>が<div>よりサイズが小さいと隙間が出来る → 下記を追加 img { display: block; } ■ Win IEだけずれる時があり、ずれる大きさがフォントサイズによって変わる →ずれる<div>等に vertical-align を設定する（top 又は bottom） ■ <td>内のフォントが正しく指定したとおりでない（Win IE Mac IE） →<td>の中に<span>をいれて対応する ■MacIEで<div>を floatさせると表示が崩れる。 → フロートさせるdiv の width height 属性を指定する ■<ul><li>で画像リンクを作成したときに WinIEでフォントサイズを変更すると 隙間
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
スマホサイトでケータイも対応する－画像問題解決編－