HTMLテンプレートの基本ファイル一式、Webページを実装するための必要最小限をまとめたHTML
HTMLで、Webページやアプリを作成する時に役立つ、フロントエンド用に必要最小限をまとめたシンプルなHTMLの基本テンプレートのファイル一式を紹介します。 v.8.0.0がリリースされ、現在の環境に合わせた設計にアップデートされました。 IE11を含む、すべてのモダンブラウザをサポートしています。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による分析・研究・実験をもとにしています。 ブラウザの見え方を最適化 プログレッシブエンハンス
【保存版】作りたいイメージ別！ランディングページ 「デザインの指南書」 | LISKUL
どうすれば「リッチな」印象のページになる？ ランディングページの製作時、デザインを「こんな印象のページにしたい」というのはあっても、いざ「どんな配色で」「どんなフォントで」「どの程度の派手さで」を決めるとなると、一体どうやったら自社のターゲットに適したデザインに仕上がるのか分からない！ ということはありませんか？ 今回は、「可愛らしい」「真面目で冷静な」「先進的な」「信頼感のある」といったイメージ・印象ごとに、適した配色・フォント等デザインを実際のサイトを例に出してご紹介します。 あなたの「こんな印象を与えたい」という思いをデザインにするとこうなる！ というのを具体的にまとめていますので、デザインの方針を立てる上での参考にしてください。 ※ランディングページ改善に重要な要素を大きく4つに分け（ファーストビュー、ライティング、導線、その他のポイント）それぞれの項目で訴求ポイントのチェックが行
デザイナーがチェックしておきたい最新フリーフォントまとめ「12 Newest Free Fonts for Designers」
日々新しいものがどんどんと誕生しているデザインフォント。常にチェックされている方も多いのではないでしょうか？そんな中今回紹介するのは、デザイナーがチェックしておきたい最新フリーフォントまとめ「12 Newest Free Fonts for Designers」です。 （firsttype.portfoliobox.me） デザイナーとして活躍されている方、デザインを手がけている方なら是非知っておきたいデザインフォントがまとめられています。 詳しくは以下 Neythal Free Font on Behance 手描きのような雰囲気も感じさせてくれるフォント。ラフ感や柔らかさを表現したい時に。 VAGTUR – Fontdesign on Behance アンティークなテイストを持ったフォントは、見本のようにレトロな質感を全面に取り入れたデザインにぴったりですね。 Choplin Free
Famo.us·WebGL/Canvasを使って高度な表現を可能にするJavaScriptフレームワーク MOONGIFT
スマートフォンにおいてWebかネイティブかと言った議論は常にされています。ネイティブアプリは高度なUI/UXを提供する一方、インストールの手間が否めません。Webは速度やUXにおいて見劣りがします。 しかしWeb（HTML5）の進化は止まりません。ついにここまで！というフレームワークがFamo.usです。3Dを備えたレンダーを行うJavaScriptフレームワークになります。 Famo.usの使い方 たくさんのデモが登録されていますので見ていきましょう。 写真と画像の組み合わせ。左右から表示されるアニメーションもあります。 スクロールパララックスエフェクトのデモ。 アニメーションのデモ。 カレンダーの日付を選択するとスケジュールが開きます。アニメーションがスムーズです。 スライドして表示される写真のデモです。 ページ送りのデモ。 天気アプリデモ。ベクター調の表示がいいですね。 タスク管理。
デザインのレベルを上げる！レイアウトやタイポグラフィに関するまとめ - コムテブログ
TL;DR 先日名刺の入稿用データを作成していたのですが、印刷物用のデザインは慣れていなかったので結構時間がかかってしまいました。Web 関係の知識だけでは、綺麗な制作物は出来ないと思い、総合的なデザインができるようにデザインの基礎を勉強。今回は Web 関係者も知っておきたい、タイポグラフィやフォントに関する知識をまとめました。また使う機会があるかもしれないので、メモしておきます。 レイアウト 視覚的に明快で上手に配置されたものは読者に好まれます。そういったレイアウトを作るために、余白の使い方や文字や画像配置などの知識をおさらいします。 １．アクティブ・ホワイトスペース 小さなテキストを広い余白に配置すると存在感が増し、視線の滞在時間が長くなります。余白は一見無駄のように見えますが、意図的に配置されていることが多いです。 余白の美 空白により読者のコンテンツの読み進めを制御することができ
[JS]実装は簡単でスマフォにも対応、縦長ページをスクロールする時にちょうどいい位置にスナップさせるスクリプト -Scrollify
section要素やdiv要素でパネルを垂直に配置した縦長ページをスクロールする時に、各パネルをちょうどいい位置にスナップさせるjQueryのプラグインを紹介します。 デスクトップのホイール操作、スマフォやタブレットなどのタッチ操作にも対応しています。 ちょうどいい位置に自動でスクロール スクロールはイージングやバウンドなど、さまざまなエフェクトが利用できます。 Scrollifyの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsとeasing.jsを</body>の上あたりに記述します。 jQueryは1.6+で、どれでも可です。 <body> ... <script src="script/jquery-1.6.js"></script> <!--<script src="script/jquery-2.1.1.js"></script>--> <!--<scri
マークアップからWebデザイナーへ５つのお願い ｜ Qrious Blog
NEW こんにちは。マークアップの胡夢です。 わたしが個人で請けている、外部のWebデザイナーさんから送られてくるデザインデータで、「これだけはやめて欲しい」って事をつらつらと書いてみます(´・ω・｀)ｷﾋﾞｼﾒ 基本的にPSD（Photoshopデータです、一応念のため）を頂いて、そこからマークアップに必要な画像を切り出して使うのですが、毎回苦労する羽目になっておりまして、同じように苦労しているマークアップさんの声をTwitter等で見かけるので、「Webデザインをやるなら、これくらいは知って置いて欲しいなぁ」という内容をまとめてみましたので、記憶に留めてもらえると非常に有り難いです。 お願い【１】レイヤーについて ●レイヤーの結合はホントにヤメテ！ わたしが対応するマークアップ案件はこういったことはほとんど無いのですが、コーディングをしたことがないデザイナーさんでこれをやっちゃう方が居
ウェブ制作者がチェックしておきたいアイデア満載のUIを備えたウェブデザインのまとめ -2014年上半期
うまくトレンドを取り入れ、デザインの細部まで徹底的にこだわり、気持ちのいいインタラクションとアイデア満載のUIを備えた素晴らしいウェブサイトを紹介します。 画像の一部だけ動くシネマグラフを使ったコンテンツ、ペルソナを使ったユーザー中心のレイアウトなど、最新のトレンド情報もお見逃しなく！ VOTD.tv シンプルですっきりしたデザインだけでも素敵ですが、ロゴ、ナビゲーションやサムネイルやコンテンツなどの随所に仕掛けたインタラクションの芸が非常に細かく、楽しませてくれます。
[CSS]動画を背景として表示させ、オーバーレイでコンテンツを配置するテクニック
動画をブラウザいっぱいに背景として表示させ、その上にコンテンツをオーバーレイで配置するテクニックを紹介します。 HTML5 Video 実装 HTML 現在、動画ファイルは二つのフォーマットを用意するのがよいでしょう。WebMはGoogleが推奨するものでChrome, Firefox, Operaでネイティブにサポートされています。 <video autoplay loop poster="polina.jpg" id="bgvid"> <source src="polina.webm" type="video/webm"> <source src="polina.mp4" type="video/mp4"> </video> オーバーレイで表示するコンテンツは、通常通りの実装です。 <div class="overlay"> コンテンツ </div> CSS まずは、動画をフルスクリー
レスポンシブなウェブデザインをする際に役立ちそうなこと（主にスマホ対応）のまとめ
レスポンシブにデザインしたサイトを作った際に役立ったこと（主にスマホ対応）を備忘録的にまとめてみます。いろんな方が同じような内容をまとめていますし、基本的なことも多いですがお役に立てばうれしいです。 メディアクエリの指定方法 小さいディスプレイから指定する場合と、大きいディスプレイから指定する場合があります。どちらにせよ、PC用、タブレット用、スマホ用と分けることが多いようです。まずは大きいディスプレイから指定する方法です。 /* デフォルト：1024px以上用（PC用）の記述 */ @media screen and (max-width: 1023px) { /* 1023px以下用（タブレット用）の記述 */ } @media screen and (max-width: 767px) { /* 767px以下用（タブレット／スマートフォン用）の記述 */ } @media scre
デザインのひきだし見せます！あら便利♡フォントまとめ ｜ 箱庭 haconiwa｜女子クリエーターのためのライフスタイル作りマガジン
【KGRoyals】 トップバナーの旗の部分はこのフォントを使ってます♪ 小文字と大文字で旗の大きさが違うんです！気が利くぅ♡
サイトの移転をより容易に
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
左が過去で右が未来…？ページ送りの正しい方向とは？WEB屋のみなさんに聞いてみました
ブログって、ページ送りがついてますよね。一覧にも、記事詳細にも。先日気付いたのですが、 記事一覧のページ送りは『右』にいくほど過去になって、詳細ページは『左』にいくほど過去になるサイトが多いのです。 これって何か変じゃない？という疑問をWEB屋の皆さんにぶつけてみましたので、いただいた回答をまとめます。 何が言いたいか よくあるページ送りはこんな感じなんです。 記事一覧のページ送り 記事詳細のページ送り 仮に最新の記事の詳細とします。『次』にあたる記事がない場合こんな感じになっています。 記事一覧は右に行くほど過去なのに、詳細に入ったときにページ送りの方向が変わるのが何か気持ち悪いなぁという事なのです。 （ちなみに、説明上『前の記事』『次の記事』というボタンを置いていますが、普段は記事タイトルを表示させています） 記事詳細のしっくり来るページ送り こっちの方が矛盾がないというか、しっくり来
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.nijilog.info/2014/05/09/178
Flipsblog.jp
3media.biz
html5-memo.com
よりシンプルに手描き風にデザインされたBootstrapのワイヤーフレーム用のテーマファイル -Bootsketch
Stylepit | Op til 65 % billigere end detailprisen på tøj, sko og tilbehør
IDEA * IDEA
