サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
スマホやタブレット、ラップトップ、デスクトップ、最近はWebページを表示するデバイスは多様化しています。レスポンシブデザインでよく使われているMedia Queries（メディアクエリ）の書き方、ブレイクポイントの最適な値など、制作に役立つリソースやツールを紹介します。 各デバイスのブレイクポイントに合わせたメディアクエリの書き方 複数のブレイクポイントを使ったメディアクエリの書き方 人気のフレームワークのブレイクポイントの設定 レスポンシブの確認が簡単にできる最強ツール 各デバイスのブレイクポイントに合わせたメディアクエリの書き方 スマホ、タブレット、ラップトップ、デスクトップごとのブレイクポイント、そしてiPhone,iPad, Nexusなど各デバイス用のブレイクポイントに合わせたメディアクエリの書き方がまとめられています。SimpleCSS Media Queries デバイ
![[CSS]レスポンシブデザインでよく使うメディアクエリの書き方、ブレイクポイントの最適な値のまとめ](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2f7c5c596162907ccc099585ca47e2a595ce4e13c0%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fcoliss.com%252Fwp-content%252Fuploads-201603%252F2016091201.gif&f=jpg&w=240)
By Wicker Paradise アイコンに関するニュースから販売まで手がけるサービス「Icons8」の中の人が、ウェブサイトのデザインを大幅に変更したところ47％ものユーザーを失ったことをブログで明らかにしました。ブログではユーザーを失うまでの経緯や、なぜ失ってしまったのかの分析結果まで書かれていて、興味深い内容になっています。 How We Lost 47% of Our Users After a Redesign | Icons8 https://icons8.com/articles/how-we-lost-47-of-our-users-after-a-redesign/ サービス開始当初、Icons8はアイコンの開発・販売を手がけるサービスでしたが、毎日新しいアイコンを作り続けるのには無理があるため、「リクエストアイコン」という機能を実装しました。リクエストアイコンとは、
デザインやイラストにすぐに使いたくなるようなミニマルな5つのカラーで構成されたカラーパレットを紹介します。 カラーパレットは全部で、8種類。 魅力的なカラーの組み合わせは非常に参考になります。
最近のWebのUIはフラットデザイン・Material Designが着実に進化し、シンプルでコンテンツにフォーカスされたデザインが定着してきました。テキストは読みやすく、写真はより大きく使用されています。レイアウトは縦長型やカード型の人気が高く、デスクトップでもスマホでもスクロールを前提にしたデザインが主流となっています。 最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材やプレビューを紹介します。 Boring CardsUI Kit PSD、個人・商用利用無料。Bootstrap 4でも新しいコンポーネントとして注目されているカードを使用したUIキット。黄金比をベースにしたデザインはさまざまなサイズ・カラーで展開することができます。
CSSリセットと呼ぶべきか、もしくはフレームワークと呼ぶべきか、非常に迷うのですが、そのどちらにも利用できるスタイルシート「Marx」を紹介します。 単なるCSSリセットに留まらず、レスポンシブ対応の最近のWebサイトの制作を見据えたさまざまなテクニックが盛りこまれており、コードを一行ずつ勉強したいですね。 Marx Marx -GitHub Marxの特徴 Marxのデモ Marxの中身 Marxの特徴JavaScriptやclass付けを使用しないrawCSS すべてのブラウザに一貫したレンダリングを提供 クリーンなタイポグラフィ ナビゲーションやボタン、フォームなど、カスタマイズ可能 レスポンシブ対応 シンプルでミニマルなデザイン ファイルサイズは、7.7kbCSSリセットとしてはスタイルが少し多く、ページ作成のフレームワークとしては足りない感じです。 Marxのデモ デモペー
シンプルなHTMLでセマンティックに実装することにこだわった、アクセシブルでレスポンシブ対応のサイトをより簡単に制作するためのフレームワークを紹介します。 MIT Licensesで、個人でも商用でも無料で利用できます。 Turret Turret -GitHub Turretの特徴 Turretはアクセシブルで、セマンティックで、レスポンシブ対応のサイトをより簡単に制作するためのフレームワークです。 レスポンシブ対応 読みやすいマークアップを使い、レスポンシブ対応のグリッドやエレメントを汎用性に優れたclassを使って実装しています。 Design First 直感的なユーザインターフェイスのために、文字の定義とカラーパレットにフォーカスしています。 NoJavaScript スクリプトは使用せず、LESSベースでネイティブのWeb要素を採用しています。 セマンティック マークアップは
ウェブデザイン技能検定とはウェブデザイン技能検定は、国家検定制度である技能検定制度の一つとして、 厚生労働省より職業能力開発促進法第47条第1項の規定に基づき指定試験機関の指定を受け、 特定非営利活動法人インターネットスキル認定普及協会（以下、当協会）が実施するものです。 試験は実技および学科試験で実施され、 関連国際標準規格等に基づきウェブデザインに関する知識・技能、実務能力等が問われます。 1級の合格者には厚生労働大臣より、2級及び3級の合格者には当協会理事長より、 ウェブデザイン技能士の合格証書が発行されます。
数多くのブログで2015年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 注目すべきキーワードは、Material Designの本格始動、マイクロデザイン、スクロールコンテンツ、スマフォ・タブレットユーザーの更なる増加、そしてHTML/CSSのフレームワークの陰り。 写真：re:splashed 2015年、現在のWebデザインを確認しながらこれからのトレンドを探る 2015年、Web制作業界全体の流れ 2015年にあなたが目にするWebデザインのトレンド 2015年に大きく変化するウェブデザインの10の傾向 2014年のトレンドで良かったもの、ダメだったもの モバイルデザインに向けたWebデザインの7つの戦略 2015年、IT系で求められているスキル 2015年、現在のWebデザインを確認しながらこれからのトレンドを探る
2014年、デザインやコンセプトが素晴らしかったWebサイトのまとめ -Best Website Designs of the Year 2014
大きな写真画像の背景やMaterial Designなどのフラットなスタイルに合うソリッドなラインでデザインされたゴーストボタンを実装するチュートリアルをまとめました。 シンプルなものから、かわいいアニメーションや一味違ったアニメーションなど、さまざまなものが揃っています。
![[CSS]写真画像の背景やフラットなスタイルのWebデザインにぴったりなゴーストボタンの実装方法のまとめ](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2fe899eb8da8739d23bb0715fe273fb5e1d72d6be1%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fcoliss.com%252Fwp-content%252Fuploads-201501%252F2015011500.gif&f=jpg&w=240)
レスポンシブ対応の縦長ページ、プロダクトページ、ランディングページ、ポートフォリオ、ブログなど、今時のかっこいいエフェクトを備えたHTML5+CSS3の無料のテンプレートを紹介します。 そのまま使うもよし、スキルアップ用に勉強してもよし、です！ Beetle - ResponsiveHTML5Template Beetleには、最近のWebサイトで人気のあるさまざまなコンポーネント・エフェクトが用意されています。大きい背景画像をつかったヘッダ、カード型のレイアウト、サークルを使ったエレメント、パララックススクロール、スクロールをトリガーにしたエフェクトなど、今年のWebデザインのトレンドがたくさん詰まっています。
Client: KOKUYO Co.,Ltd. Project Management: Masato Yamaguchi (THEGUILD,Alpha Version Inc.) Art Direction: Chiharu Kodama (THEGUILD, ium inc.) / Yukiya Okuda (THEGUILD, Shouwakiden Inc.) Design: Konami Endo (THEGUILD, ium inc.) / Hana Ihara (THEGUILD, Shouwakiden Inc.) Development: Niwayama Naomoto / Kenji Wada (THEGUILD,Alpha Version Inc.) Illustration: SANDER STUDIO ルール？展 Organized by: 21
レンタルサーバなら「さくらのレンタルサーバ」！ 月額換算でわずか131円、缶ジュース1本分のお値段で使える格安プランから、ビジネスにも使える多機能＆大容量プランまで、 用途と予算に合わせてプランを選べます。 さらにマルチドメイン対応でメールアドレスも無制限。無料ウイルススキャンや無料電話サポートもあるので安心して ご利用いただける共用レンタルサーバサービスです。
Webサイトを彩るアイデア集HTMLやCSS、JavaScriptの基礎を一通り学習した方向けに 『CSSとJavaScriptで作る動くUIアイデアレシピ』という本を執筆しました！ 詳細を見る
ステンシル ステンシルの中からワイヤーフレームを選び、下のボックスからドラッグ&ドロップで挿入します。 メニューバーのボタンをクリックすると設定画面が出てきます、この画面で、好きな値に変形できます。 そして背景はロックすることをおすすめします！ロックすることで、ほかの要素を動かすときに背景が影響を受けなくなりますのでおすすめです。 グループ ある程度要素がまとまったらグループ化すると作業が楽になりますよ！ 画像挿入 画像も簡単に挿入できます、Cacooは画像を自由に変形させることができるんですが、この機能は便利です。画像を無理矢理、枠におさめることが可能です。 （本当はちゃんとサイズを計算して画像も作りますが急ぎのときなどは便利です。） 書き出し 完成したら、書き出します。 無料版はPNGのみ回数無制限で、PDFなどは３回まで無料となってます。 簡単にワイヤーフレームが完成しました。次はこ
つい最近までSketchは日本であまり知られておらず、日本語でSketchについて書いている記事はほとんどありませんでした。ところが5月7日にFireworksの開発終了が発表され、代替ツールとしてSketchの名前が急浮上。それに合わせたのかSketchが5月8日に半額セールを行い、Sketchについて書かれた記事やツイートも増えてきて、注目度の高まりが感じられます。とはいえ英語日本語問わず、Adobe製品に比べたら圧倒的に情報量が少ないSketch。Adobe製品と同じような機能やショートカットも多いですが、使いこなせるようになるまでは少し時間が掛かりそうです。Goodpatchでもマニュアルや記事を読みながら、隙間時間にSketchを触ってその機能を確かめています。というわけで今回は、Sketchの基本的な機能や、発見した小技、ショートカットなどをまとめてみました。 先日アップした「
web-cocoon.jp は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、web-cocoon.jpが全てとなります。あなたがお探しの内容が見つかることを願っています！
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
