cssによるボタンデザインの備忘録 - FOXISM
a.btn{ display: inline-block; /* インラインブロック化 */ padding: 1em 2em; /* 余白設定 */ line-height: 1; /* 行の高さ */ color: #fff; background-color: #2196f3; text-decoration: none; } a.btn:hover{ background-color: #42a5f5; } point paddingの値を上下1em、左右2emくらいにすると、フラットデザインっぽくなる。ここまで広げなくてもいいけど、狭いとダサくなるので、それなりに余裕ある数値にするといい感じ。 角丸に demo ボタンリンク a.btn{ display: inline-block; padding: 1em 2em; line-height: 1; color: #fff; b
たった1日で3億円超の現金化が話題に！『CASH』に秘められたデザインの仕掛け。デザイナー 河原香奈子 | CAREER HACK
あまりの反響に公開後わずか16時間でサービス一時停止となった買取アプリ『CASH』。デザイナー 河原 香奈子さんが語ったのはお金を扱うサービスに大切な「佇まい」について。お金をポジティブなものに変えるデザイン理論とは？ 一夜で3.6億円超が利用された『CASH』デザイン秘話 「買取してほしいアイテムをスマホで撮影＆登録すると、瞬時にお金に変わる」 まるで魔法のような体験を提供してくれるのが、買取アプリ『CASH』だ。2017年6月、サービス公開初日に3.6億円超が現金化され、その反響の大きさに、公開後わずか16時間で一時休止へ。 その後、2ヶ月間の休止を経て、サービスを再開。再開後もわずか2時間で1000万円が現金化され、現在、サービスの安定稼働を推し進めている。 『CASH』の一時停止と再開について、インフォグラフィックや動画を載せたランディングページも話題となった。反響の大きさを物語る
初心者のための簡単なBootstrap3のはじめ方
BootstrapのようなCSSフレームワークを使うことで簡単に迅速にレスポンシブデザインやWebサイトのレイアウトをつくることができるようになります。 今までは１からレイアウトを作っていたり、テンプレートを使用して毎回同じようなレイアウトになったりしていましたが、Bootstrapを使うことでより簡単に自由なレイアウトを構築することが可能になりました。 そこでこの記事では最新版の3.0を使ってBootstrapの基本的な使い方から、Gridシステムの使い方まで紹介していきます。また、Bootstrapをさらに使いやすくするためのツールなども紹介していきます。 Bootstrap3をダウンロードする ではまず始めに以下の公式サイトからデータをダウンロードします。左側にあるダウンロードボタンからダウンロードしましょう。 Bootstrap3のダウンロード ファイルの中身はこのようになっていま
Photoshopで1クリックの時代がきた！Webページ用のグリッドも簡単に作成できる便利すぎる無料の機能拡張 -Bootcomp 2.0
Webページやスマホアプリのデザインカンプを作成する時に、大幅な時短になる便利な機能がたくさん詰まったPhotoshop CC2015.5対応の機能拡張を紹介します。 Bootstrapでつくる時はもちろん、それ以外のデザイン作業でも強力な機能を発揮します。 Web制作に携わるすべての人が、入れておいて損はない機能拡張です。 Bootcomp Bootcompの特徴 Bootcompのインストール Bootcompの使い方 Bootcompの特徴 先日当ブログで紹介したBootcompが昨日、CC2015.5にも対応してアップデートされました。1.0でも便利でしたが、2.0で更に便利になっています！ OS X, Win両対応で、日本語にも完全対応の無料の機能拡張です。
BootstrapのベースのCSSを使ってさまざまな要素を実装してみよう！基本要素とナビゲーションのスタイル
先日の記事「Bootstrapのグリッドシステムの基本な使い方（翻訳版）」で、Bootstrapのファイルのダウンロードからファイルのセットアップ、グリッドシステムの基本的な使い方まで紹介しました。 次のステップとして、ベースのCSSを使ってさまざまな要素を実装してみましょう。 Base CSS and Navigation Systems in Bootstrap 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 BootstrapのベースのCSS 見出し（hx）を実装する 「small」を使って実装 引用（blockquote）を実装する 連絡先情報（address）を実装する コード（code）を実装する 整列のclassを実装する 強調のclassを実装する フォーム（form）を実装する テーブル（table）を実装する 画像
海外で活躍したいデザイナー必見 デザインに関する英語表現と用語まとめ デザイン会社 ビートラックス: ブログ
こちらサンフランシスコ・シリコンバレー地域では、エンジニアだけではなくデザイナーの需要が非常に高まっている。 WebやアプリのUIや、プロダクト全体のUX,、AI活用によるデザインなどなど。そして、グローバル規模でのブランディングに至るまで、ビジネスの様々な局面において、デザイン的考え方が重要とされてきているのが理由である。 そして、少し前までは、”デザイナー”と聞くと絵を描く仕事の延長線上にあると思われていたが実はその仕事にとって重要な内容として相手を理解するコミニュケーション能力と自身の問題解決策を説明するプレゼンテーションも含まれる。 次世代のデザイナーは、クリエイティブな考えに加えて、異なるバックグラウンドを持つ人々の考え方を理解する能力が必要とされる。 【改めて基本を解説】デザイナーの役割とその仕事内容とは 実は、日本国内でも非常に優秀なデザイナーは多く、細かな表現技法や、最新の
Webサイトリニューアルの9ステップをWeb制作会社が解説！ | 株式会社LIG
成果が出るサイトリニューアルの実績多数！ 年間150サイトを制作・リニューアルし、毎年複数のWebデザインアワードを受賞。 成果にしっかり向き合い、一目見た瞬間に貴社の魅力がグッ！と伝わる、そんなWebサイトにリニューアルいたします。お気軽にご相談ください！ 💡株式会社LIGのWeb制作実績・お問い合わせはこちらから こんにちは。2007年創業のWeb制作会社、株式会社LIGのデザイン部 部長の吉田です。 これからWebサイトのリニューアルを検討しているけど、どうやって進めればよいのかわからない……という方に向けて、Webサイトのリニューアルの手順を9ステップで解説します。加えてWebサイトリニューアルの基礎知識や、参考事例もご紹介していきます。 Webサイトリニューアルの進め方9ステップ Webサイトリニューアルの具体的な手順をご紹介していきます。 ①リニューアルする目的を考える ②現
iPhone Safariブラウザサイズは何px？ viewport width=device-width時
iPhone Safariブラウザサイズは何px？ viewport width=device-width時 108,078views／投稿 2014-09-19／更新 2017-11-13 ［追記］iPhone 8/8 Plus も7も6と同じブラウザサイズ。iPhone Xも幅は375です。この英語サイトがわかりやすいです。 iPhone 6と6 PlusのSafariブラウザ解像度をAppleストアに行って実機で調べて来ました。 iPhone 6 Plus ブラウザサイズ ： 414 × 736 ピクセル 物理的な解像度 ：1,080 × 1,920 ピクセル解像度、401ppi、5.5インチ iPhone 6 ブラウザサイズ ：375 × 667 ピクセル 物理的な解像度 ：750 × 1,334 ピクセル解像度、326ppi、4.7インチ iPhone 5系 ブラウザサイズ ：3
美しいWebデザインをタイプ別に！見ないと損するパーツ別ギャラリーサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
中型ライダー（二輪）免許を持っているライターの内藤です。 本日は、ライダーキック並みの強烈さで役に立つ見本サイトをまとめてみたいと思います。 Web屋さんはご存じの方も多いかもしれませんが、ブログをしている一般の方、Webデザイン・DTPに興味のある方、お店を持っている方なども必見です！ 部品に特化した見本 部品に特化した見本サイトをご紹介します。 見出しデザイン（h1,h2,h3……その他DTPでも） はじめは見出しデザインに特化した見本サイトまとめ。 見出しデザイン.com http://midashi-design.com/ 見出しタグ（h1,h2,h3……）のデザインの見本ですが、DTPなどでもヒントになるものがたくさんあります。 カテゴライズは、グラデーション・テキストのみ・テキスト非画像・上線・下線・丸・四角・囲み線・斜線・点線・角丸。 ヘッダー部分に凝っても見出しが適当だと全
スマートフォンサイトのデザインリンク集 sps collection
sps collectionは技術的・デザイン性に優れたスマートフォンサイトを掲載しているデザインリンク集です。スマートフォンからも閲覧可能です。
スマホサイトをデザインするとき参考になるWebサイト6選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのモモコです。 スマートフォンの普及率は2021年時点で80%*を超えており（総務省「情報通信白書令和３年度版」）、今やスマートフォンに対応したWebサイト制作は必須と言えます。 そこで今回は、スマートフォンサイトをデザインする際に参考になるギャラリーサイトや、スマートフォンサイトをデザインするときの注意点を紹介します。 海外のトレンドや人気のあるサイトをまとめてチェックできるので、ぜひ最後までご覧ください。 デザインの世界に飛び込んでみませんか？ 「プロから学びたい」、「クリエイティブな仕事がしたい」……という方は「スクールでの勉強」もおすすめです。 LIGが運営するWebクリエイタースクール「デジタルハリウッドSTUDIO by LIG」では、未経験から6ヶ月でWebデザイナーを目指せます。現役Webデザイナーによる授業と豊富な就職支援が特徴！ ぜひ一度詳細をチェ
iPhone 6でのスマートフォンデザイン
iPhone 6でのスマートフォンデザイン iPhone 6の発売日を明日に控え今後のスマートフォンサイトデザインをどのようにしていけばよいかSNSで見かける悲鳴を拾い上げながらQ＆A形式で答えて見たいと思います。(実物を手に入れて間違っていたら後日修正します) Q.1 iPhone 6の解像度が750×1334でdevice-pixel-ratioが2だとCSS解像度は375×667だけど横幅320pxでデザインしても大丈夫？ A.1 横幅320pxでデザインしても大丈夫。基本最近のスマホ対応では多解像度に対してリキッドでフィットするようにするのが主流。 リキッドの場合ベースデザイン320pxを375pxに広げて表現するのは難しくないが、ベースデザイン375pxを縮めて320pxで表現するのは至難の業なのでスマートフォンデバイスでの最小幅である320pxでのデザインは当分続きます。 Q.
「レスポンシブ」デザインを前提としたWebサイト制作【基礎編】
「レスポンシブ」Webデザインは、スマホサイト必須化の流れの中で、より効率的にWebサイトの制作・運用ができる、と期待されている技術です。 「レスポンシブ」に厳密な定義があるわけではありませんが、「レスポンシブ」という言葉を有名にしたGoogleのデベロッパー向けコラム（https://developers.google.com/webmasters/smartphone-sites/details?hl=ja）によると、同一のHTMLがすべてのデバイスに配信され、CSSによってデバイスでどのようにページをレンダリングするかが決まります。 という構造を持つページを「レスポンシブ」と呼んでいます。スタイルシート（CSSファイル）がデバイスの違いを吸収して、ブラウザ上の見栄えをコントロールする代わりに、htmlデータはPCもスマホも同一のものを使うことで、運用上の負荷が減ることになります。 で
実機検証！スマホサイトで最適な画像サイズとは
見やすく伝わりやすいスマホサイトにするには、画像作成が必要不可欠だ。 しかし、スマートフォンは機種によって画面サイズが異なるため、どのサイズで画像を作成するのが最適なのか迷う人も多いと思う。 そこでこの記事では「何を基準にして画像を作成すればよいか」というところからお伝えし、最適な画像サイズは何か、実際に機種で検証する。 ぜひ参考にして欲しい。 ＜目次＞ １．基準となるスマホサイトの横幅 ２．最適な画像サイズと実機検証 ３．ボタンやアイコンのサイズ １．基準となるスマホサイトの横幅 iPhoneのRetinaディスプレイのような高解像度ディスプレイが増えてきたため、画面の横幅320px～480pxに合わせた画像を作ると表示の際に画像がぼやけてしまう。 それを避けるために、320pxの2倍の解像度である「640px」を横幅の基準としてデザインするのが主流となっている。 最近になって
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
Web制作者がマジで学べる国内ブログ厳選10個【制作+SEO対策編】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさんどうも〜こんにちはぁ！ 日々レベルアップを目指してWebを学んでおりますライターの、のび太です。 以前「Web制作初心者がマジで学べるおすすめ国内ブログ厳選10個」という記事を書かせていただいたのですが、予想以上に好評で驚きました。お役に立てて光栄です！ そのときご紹介したブログの他にも、まだまだ有益で素晴らしい国内ブログはたくさんあります。そこで今回は、「やばい！ マジで有益すぎる！ ありがてぇ！」と感じたブログを、制作系とSEO系とに分けて、計10個ほどご紹介したいと思います。 今まで知らなかったという人は、ぜひこの機会にRSS購読を！ 制作系 以下7ブログが、デザイン、コーディング、CMSなど制作系の内容になります。 NxWorld http://www.nxworld.net/ どの記事もシンプルかつ丁寧な説明で非常にわかりやすいです。特にWordPressカスタマイズ系の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Grids跡地
新着記事
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
