レスポンシブなペラページを直感で作成、CC0ライセンスでダウンロード出来る・「Launchaco Website Builder」
Launchaco Website BuilderはRWD対応のペラページを直感的に作成、ダウンロード出来るWebサイトビルダーサービスです。作成されたファイルはCC0ライセンスで配布されますので自由に利用する事が出来ます。ある程度の型は決まったものを選択、利用するので凝った事をするには作成したあとに自分で調整する必要がありますが、非常に手軽に作成出来ていいですね。ペラページ作成が理由なのかは分かりませんが、型はLP系になっています。ライセンスの配慮も素敵ですね。本サービスはドメイン名を決めるサービスも展開していますので親和性があるサービスなのだと思います。 Launchaco Website Builder
簡単！レスポンシブデザインでYoutubeやGoogle Mapsを埋め込む便利なツール | WordPressやWebデザインなど紹介 Ocadweb
レスポンシブのツールを以前紹介していますが、Webサイトでもレスポンシブが当たり前になってきています。 PCでスマホ、タブレット表示を確認しよう！レスポンシブチェックツール ただサイト元はレスポンシブ表示したけど、Youtubeなどの動画やGoogle Mapsをサイトに埋め込んだもののレスポンシブ表示されず、埋め込み部分だけ大きく表示されて半分しか表示されていないってことありませんか。 WordPressのテーマ（テンプレート）によっては普通に埋め込んだものもレスポンシブ対応してくれるものもありますが、レスポンシブ表示されない場合にはこちらを使ってみてはいかがでしょうか。 今回はYoutubeやGoogle Mapsなどの埋め込みをレスポンシブ表示できるサービス「Embed Responsively」を紹介します。 但し、2016年6月22日以降に制作した新規サイトでGoogle Map
Froont – responsive web design tool
Design in the browser Design by modifying hundreds of ready made designs or start from scratch. Prepare your assets in Photoshop or Sketch and move them online right away. All you need is a web browser. Deliver faster Publish responsive pages with your own domain name or export your work to host it yourself. FROONT is great for decision making, prototyping and publishing single page websites. A vi
あなたに特化したメガネを！メガネの選び方なら − メガネNAVI
メガネには実はたくさんの種類があります。こちらでは、種類豊富のメガネを分かりやすく紹介していますので、購入時に選び方で悩んでいる方にオススメのサイトです！さまざまなシーンに最適なメガネを購入して、よりよい生活を送りましょう。様々な生活シーンによってメガネを使い分けることにより、より快適な生活を楽しむことができます。あなたの生活シーンにあったメガネを、メガネNAVIで探しましょう。
2014年のWebデザインのトレンドがたくさん詰まったHTML5+CSS3の無料のテンプレート -Beetle
レスポンシブ対応の縦長ページ、プロダクトページ、ランディングページ、ポートフォリオ、ブログなど、今時のかっこいいエフェクトを備えたHTML5+CSS3の無料のテンプレートを紹介します。 そのまま使うもよし、スキルアップ用に勉強してもよし、です！ Beetle - Responsive HTML5 Template Beetleには、最近のWebサイトで人気のあるさまざまなコンポーネント・エフェクトが用意されています。大きい背景画像をつかったヘッダ、カード型のレイアウト、サークルを使ったエレメント、パララックススクロール、スクロールをトリガーにしたエフェクトなど、今年のWebデザインのトレンドがたくさん詰まっています。
レスポンシブなウェブデザインをする際に役立ちそうなこと（主にスマホ対応）のまとめ
レスポンシブにデザインしたサイトを作った際に役立ったこと（主にスマホ対応）を備忘録的にまとめてみます。いろんな方が同じような内容をまとめていますし、基本的なことも多いですがお役に立てばうれしいです。 メディアクエリの指定方法 小さいディスプレイから指定する場合と、大きいディスプレイから指定する場合があります。どちらにせよ、PC用、タブレット用、スマホ用と分けることが多いようです。まずは大きいディスプレイから指定する方法です。 /* デフォルト：1024px以上用（PC用）の記述 */ @media screen and (max-width: 1023px) { /* 1023px以下用（タブレット用）の記述 */ } @media screen and (max-width: 767px) { /* 767px以下用（タブレット／スマートフォン用）の記述 */ } @media scre
今からでも間に合う！レスポンシブWebデザイン作り方のまとめ
photo by Scolirk 地方でもマルチデバイス対応を求められることが多くなってきました。 徐々に対応しているところが増えてきたためだと思います。 私も昨年からレスポンシブWEBデザインについて、 対応する必要がありましたので、調べたものをまとめてみました。 もくじ レスポンシブWebデザインとは？ ギャラリーサイト レスポンシブWebデザインの作り方 画像の切り替え・最適化 レスポンシブ対応のフレームワーク レスポンシブ対応のライブラリ サイトの高速化 レスポンシブWebデザインとは？ 2年程前から流行し始めたレスポンシブWebデザイン。 基本的な考え方、メリット・デメリットを理解しておかないとトラブルの元になります。 レスポンシブWebデザインの基本 レスポンシブWebデザインの基礎 必読！5分でわかる流行のレスポンシブWebデザインまとめ | 株式会社LIG 5分で分かるレス
ここまでできる！Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個 | A40
レスポンシブWebデザインのサイトは国内でも増えてきましたが、制作するとなるとかなり手間がかかります。 そんなとき役に立つのがレスポンシブWebデザイン対応のフレームワーク。中でも「Bootstrap」は、多彩な機能を備え、その使いやすさから広く知られています。 そこで今回は、国内の秀逸なレスポンシブWebデザインを集めた「Responsive Web Design JP」から、Bootstrapを使って作られたサイトをご紹介したいと思います。 whiteSTOUT フォトクリエイティブを中心としたマネージメントオフィスのサイトです。トップに大きな画像を使い、洗練されたイメージとなっています。 AGATHA E-SHOP アクセサリーブランド「AGATHA」のECサイトです。有名ブランドの、しかもECサイトにもBootstrapが使われています。 ACTUS online こちらは有名イン
レスポンシブ対応CSSベースの軽量フレームワークのまとめ | コリス
そのままサイト制作に使ってももちろん便利、自分用のテンプレートを作るための勉強にも役立つCSSベースのフロントエンド用フレームワークを紹介します。 一部のフレームワークで古いIE用にmodernizr.jsやrespond.jsなどを使用しています。 Kube Kube -GitHub レスポンシブ対応、プロ仕様のシンプルでミニマルなフレームワーク。 ファイルサイズ 15.6KB 対応ブラウザ Chrome, Safari, Firefox, Opera, IE8+, and スマフォ用ブラウザ ライセンス 個人・商用ともに無料利用可 Base Base -GitHub レスポンシブ対応、ベーシックなUIエレメントやグリッド揃ったフレームワーク。LESS, Sassだけでなく、.htaccessを含むサイト制作用のフォルダやグリッドのPSDもセットになっています。 ファイルサイズ 3KB(
連続するリストを横並びに等分表示する方法 – イディア：情報デザインと情報アーキテクチャ
ECサイトの「商品一覧」や会社サイトの「お知らせ」などでは、連続する同格の情報をHTMLのリストアイテム要素を用いてマークアップし、横並びで表示させることが多い。固定幅での表示では厳密な計算によって美しく並べることができたが、レスポンシブなWebサイトのように画面幅が変化する環境では等分表示することは容易ではない。CSS3の疑似クラスを用いて、横並びさせたリストアイテムを美しく等分表示する方法のひとつを紹介する。なお、「連続するリストを横並びに等分表示する方法2」のほうがより簡単です。 前提となるHTMLとCSS HTML 次のようなHTMLでマークアップした「商品一覧リスト」について考える。 <html> <head> <title>商品一覧リスト</title> </head> <body> <h1>商品一覧リスト</h1> <div id="item-list"> <ul> <li>
【スマホ時代の必須課題】海外事例に学ぶレスポンシブEメールデザイン10選
もはやスマホ対応は喫緊の課題長らく”スマホ後進国”と呼ばれてきた日本ですが、その実この1~2年で急速に普及が進んでいると言われています。総務省の調査によると、平成24年度末時点でスマートフォンの普及率は49.5%（前年比68.9%増）であり、特に10代20代においては既に従来型携帯電話（いわゆる”ガラケー”）を上回るそうです。 参考：平成24年通信利用動向調査（総務省） このため、Web上でマーケティング活動を行う企業にとってスマートフォンへの対応はまさに”喫緊の課題”であり、メールマーケティングもまたその例外ではありません。今回はスマートフォン対応のHTMLメール”レスポンシブEメールデザイン”について、日本より一足早く”スマホ時代”を迎えている海外の事例をご紹介します。 ＊以下の記事はEcausultancyに許可をいただき、「Responsive email design: 10 g
使えるとレスポンシブWebデザインに便利なCSS
デフォルトのボックスモデルではwidth、heightの値にはpaddingとborderの値を含みませんが、box-sizingプロパティの値にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。 #box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; } 特にコンテンツの幅を指定するときや、Fluid Grid Systemを作成するときに計算が簡単になります。 例えば以下の図のような4カラムのGrid Systemで2カラム分の相対幅を求めるとします。 デフォルトの場合2カラム分の幅は60px×2+20px=140px、全体の幅は320pxとなるので、140÷320×100=43.75%となります。これにmarginやpaddingでガターの幅
[JS]ページ上のあらゆる要素を簡単にレスポンシブ対応にするスクリプト -Responsive Elements
最も狭い幅では、テキストのみに。 Responsive Elementsの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="jquery.min.js"></script> <script src="responsive-elements.js"></script> Step 2: HTML レスポンシブ対応にする要素に「data-respond」を加えます。 <div class="quote" data-respond> Step 3: JavaScript スクリプトは特に記述する必要はありません。 Step 4: CSS レスポンシブ用のスタイルを定義します。 ltは未満、gtは以上で、「.lt500」は500px未満、「.gt150.lt300」は150px以上300px未満のスタイルにな
» HTMLメールのスマートフォン対応はどうするべきか？ | Webnoborder
Webサイトのスマートフォン対応は進んでいますが、HTMLメールのスマートフォン対応は進んでいません。 何故、進まないか？理由はいくつかありますが大きな問題としてメールアドレスだけでは、受信しているデバイスを判別出来ない点が上げられます。 Webサイトのスマートフォン対応は進んでいますが、HTMLメールのスマートフォン対応は進んでいません。 何故、進まないか？理由はいくつかありますが大きな問題としてメールアドレスだけでは、受信しているデバイスを判別出来ない点が上げられます。 HTMLメールの最大の問題点 @docomo.ne.jpなどのキャリアドメインのメールアドレスの場合は、メールアドレスとデバイスが対になっていますが、対になっているデバイスがフィーチャーフォンかスマートフォンの判別がつきません。（i.softbank.jpはiPhone用のメールアドレスだけで判別できるようですが。）
[JS]レスポンシブ対応の非常に美しい画像ギャラリーを実装する設置が簡単なスクリプト -least.js
least.js -デモ：画像の拡大時 least.jsの使い方 実装は非常にシンプルで、簡単です。 Step 1: 外部ファイル head内に「jquery.js」と当スクリプト・スタイルシートを記述します。画像の遅延読み込みには「lazyload.js」を使用します。 <!-- least.js CSS-file --> <link href="css/least.min.css" rel="stylesheet" /> <!-- jQuery libary --> <script src="http://code.jquery.com/jquery-latest.js" defer="defer"></script> <!-- least.js JS-file --> <script src="js/least.min.js" defer="defer"></script> <!--
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用無料でしかも高品質！レスポンシブ対応、HTML5/CSS3で作成されたテンプレートのまとめ
高品質でしかも無料！すごい使えるレスポンシブ対応のHTML5/CSS3のテンプレートのまとめ
Flipsblog.jp
http://responsiveemailpatterns.com/
HTML5/CSS3のテンプレートのまとめ | コリス