[CSS]マージンとパディングの使い分け方 -コンテナとコンテンツ間、コンテンツ内の要素間
CSSでスペースを与える時、マージン(margin)とパディング(padding)はどのように使い分けをしていますか？ Webサイトやスマホアプリで実際に使用されるUIコンポーネントを例に、マージンとパディングの使い分け方を紹介します。 下記のように3つの要素間にある2つのマージン指定も、first-childやlast-childでネガティブマージンを使わずに指定する巧い方法に、目からウロコです。 Margin or padding? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 スペースの使い分け CSSを使用して例を実装 セレクタの解説 全称セレクタの活用 マージンとパディングの使い分け スペースの使い分け カード型のUIコンポーネントを用意しました。 カード型のUIコンポーネント この例では、2種類の異なるスペースが存
![[CSS]マージンとパディングの使い分け方 -コンテナとコンテンツ間、コンテンツ内の要素間](https://cdn-ak-scissors.b.st-hatena.com/image/square/e64c6fb610e050bdc9e6aad63654b01a3879a7b6/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017030610.png)
HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ
本気でweb制作を仕事にしたいなら 現場で通用する実践的なスキルを身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら 今回は、web制作時によくある悩み「ワイヤーフレームの作り方がわからない」を解決します。 意外に、ワイヤーフレームの作成方法を詳しく教えてもらう機会は少ないですよね。 そのため、以下のような悩みを抱える人が多くいます。 ワイヤーフレームが何かを知っているけど、いまいちうまくまとめられない。 ワイヤーフレームを作るときの手順が合っているかどうか自信がない。 webサイトの制作過程において、ワイヤーフレームの時点で失敗していると次の工程のデザインも絶対うまくまとまりません。 ワイヤーフレームは、家を建てるときの設計図と同じ役割をします。 適当に作った設計図をもとに家を建てたら、当然、住みにくく崩れやすいもの
フリーランスWebデザイナーという職業も無くなる4つの理由 デザイン会社 ビートラックス: ブログ
全ての事柄のデジタル化が進む中で、Webやインターネットの重要性が年々高まっている事は間違いないだろう。それに伴い、関連する業種や職業に対する需要が高まるのは必然と考えられる。 例えばWebやアプリを製作する為のデザイナーやエンジニアは、紙媒体や組み込み型ソフトウェア向けのそれに比べても必要性が格段に高いとされ、キャリアアップをする場合は新しい技術の習得が求められる。 その一方で、以前に「アメリカでWeb制作会社が存在出来ない5つの理由」で説明させて頂いたとおり、実はこちらサンフランシスコ、シリコンバレー地域では、”Web制作” をメインのビジネスとしている会社はかなり少ない。 むしろ、数年前からビジネスのコアを変換させなければ生き残れない時代に入って来たと言っても間違いないだろう。 絶滅するフリーランスWebデザイナーという職業それでは、フリーランスのWebデザイナーはどうだろうか？We
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
ウェブサイトやブログによくあるリストデザインが流行のグリッドデザインよりも有効なわけ
「ウェブの未来を担う次のUIデザインは『カード』にあり」と言われるなど、ウェブサイトを格子状にレイアウトしたグリッドデザインは人気で、多くのアプリやウェブサイトで採用されていますが、実際にグリッドデザインと以前からあるリストデザインの2種類をテストしてみたところ、「リストデザインの方が明らかに見やすく、ユーザーの反応がいい」という結論が出ました。 List Beats Grid: Linear Feeds Perform Two to Three Times Better Than Grids http://blog.getprismatic.com/list-beats-grid-linear-feeds-perform-two-to-three-times-better-than-grids-2/ グリッドデザインとリストデザインのどちらが本当に効果的なのか？ということを調査したのはソ
世界各国のWebデザインと日本のWebデザインの特徴
2013年10月29日 Webデザイン, 海外情報 私は今まで日本、カナダ、オーストラリア、イギリスと、4カ国での滞在経験があるためか、各国のデザインの違いについて尋ねられる事があります。しかし日本以外のすべての国は英語圏。Webデザインでいえば違いを感じたことはあまりありませんでした。そこで今回は今まで触れる機会のなかった言語圏のWebサイトを比較しました。アメリカ、フランス、サウジアラビア（中東）、中国、そして日本。それぞれのデザイン事情の違いを知って、日本のWebデザインについても考えてみたいと思います。 ↑私が10年以上利用している会計ソフト！ マクドナルド アメリカ 現在は全体的に濃い青をメインに使っていますが、これはキャンペーンによって変更されます。ナビゲーションバーやページしたのバナーエリアは基本的に固定。 例えば別のプロモーションページではこんな感じ。一番見せたいものをひと
Webデザインのスキルを磨こう！Webサイト模写のススメ
2014年8月17日 Photoshop, Webデザイン 先日、Webデザイナーになってもうすぐ2年がたつというMさんから、「どうすればデザインのスキルを磨くことができるのか？」という旨のご相談を頂きました。今回は彼女の相談メールでもふれられている、デザインのスキルアップに有効なWebサイトの模写のやり方について掘り下げてみようと思います！ ↑私が10年以上利用している会計ソフト！ 頂いたご相談メール 実は最近スランプぎみになっていて、サイトデザインを作成してもなぜかダサい、野暮ったいデザインになってしまいます。 デザインスキル向上させるために、いいデザインのサイトを模写するといいときいて模写もしてみたのですが、ぴったり一致するように作るのに意識がいってしまい、あまりデザインスキルが上がったと実感できないでいます。（模写したデザインを自分のオリジナルで活かせない） もし模写するときはどう
ぷるるん新感覚！スマフォでのスクロールが楽しくなるナビゲーション -Jelly Navigation Menu
ぷるるん新感覚！スマフォでのスクロールが楽しくなるナビゲーション -Jelly Navigation Menu
Webフォント・サービス FONTPLUS ｜ ためし書き
お使いのブラウザではご覧いただけません お手数ですが、最新の対応ブラウザ（Chrome／Edge／Firefox／Safari）にて再度ご覧ください。
フラットデザインとは？UIの特長と注意点 デザイン会社 ビートラックス: ブログ
最近「フラットデザイン」という言葉をよく耳にする 。 このデザインスタイルは、グラデーションやシャドウなどの立体的要素を極力避けコントラストの強いカラーパネルと文字要素を活用して構成される。このスタイリッシュなフラットデザインの出現により、今までのエフェクトゴテゴテのUIがいきなり古くさく感じる事態が発生している。 ここ最近ではGoogleが提供する種々のアプリやFacebookのUI、Windows 8、そして多くのスタートアップ企業が提供するスマホアプリで、このフラットデザインをUIのテーマとして採用するケースが増えている。 例えその呼び名を知らなくても、サイトやアプリを通して、多くのユーザーがそのデザインスタイルを目にしていると思う。代表的な例としてはClear、Moni、Clear Weatherなどが挙げられる。 フラットデザインの主な特徴特にはっきりとした決まりがある訳ではない
フラットだけじゃない、最近のチェックしておきたい良質ウェブデザインのまとめ
最近のウェブデザインのトレンドといえば、フラット、サークル、ブラー、ブラックなどがありますが、一番大切なのはコンテンツありきのコンテンツファーストではないでしょうか。 ここではコンテンツを魅力的に見せているウェブデザインをCSS Awardsから紹介します。
Webデザイナー 検索・登録／フリーランスWebデザイナーHP集
北海道 (7) 青森 (4) 秋田 (3) 岩手 (1) 山形 (5) 宮城 (4) 福島 (5) 茨城 (1) 群馬 (4) 栃木 (2) 埼玉 (8) 東京 (51) 千葉 (10) 神奈川 (27) 山梨 (3) 長野 (3) 静岡 (6) 新潟 (1) 富山 (3) 石川 (5) 福井 (4) 愛知 (9) 岐阜 (5) 三重 (4) 滋賀 (4) 京都 (12) 大阪 (25) 奈良 (2) 和歌山 (3) 兵庫 (14) 徳島 (3) 香川 (2) 愛媛 (7) 高知 (1) 岡山 (3) 広島 (4) 鳥取 (1) 島根 (1) 山口 (2) 福岡 (21) 長崎 (5) 佐賀 (1) 大分 (2) 熊本 (2) 宮崎 (1) 鹿児島 (3) 沖縄 (5) 海外 (1)
ウェブサイトやブログを制作する時の手書きのワイヤーフレームのまとめ
ウェブデザイナー・ディレクターが実際に、サイトやブログ・ポートフォリオなどの設計をどのように行っているかが垣間見ることができる手書きのワイヤーフレームをDesignbeepからとプラスαで紹介します。 30 Great Examples of Web Design Sketches ちなみに僕は勝負用にA3、携帯用にB5サイズでしゃこしゃこしてました。
DreamweaverとPhotoshopを使い、神速でスライスする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 先日、高円寺のワーキングスペース「こけむさズ」さんで勉強会があると聞いて行ってまいりました。 講師は「神速Photoshop」の著者の一人・石嶋さんで、フォトショを使って、わりとぽっちゃりな人をかなりすっきりにするテクや、ガサガサの残念肌をツルツルの潤い肌にするテクなどを教わってきました。 「カワイイはつくれる！」ということを実感いたしました。 そこで教えてもらった中でも、 「DreamweaverとPhotoshopを連動させて超効率的にスライス＆タグに埋め込むテク」がすごかったので、ご紹介させていただきます。 これを使うと、 とにかく早い 後からデザイン修正が発生した際、直すのが楽 シャドウがある画像でも正確に切り取れる などのメリットが！フォトショでもFW並か、それ以上に楽ができると思います。 そ
今年流行のフラットデザインで使われているカラーコード
【Diesel】Dieselで使われているカラー... / #F15C22 / #7A7B7D他...全42件
LightBoxはここまで進化したよ「VisualLightBox」:phpspot開発日誌
jQuery Image Lightbox: Prime Time DEMO LightBoxはここまで進化したよ「VisualLightBox」 CSS3等を使ってかなりオシャレに進化したLightBoxが実装できます。LightBoxはもう８年ぐらいまえに登場して、今オリジナルをみるとなんか古い感じがするということで時の流れを感じます クリックするとオシャレに拡大。 テーマが大量にあって好みのデザインを選びたい放題 Windowsっぽいスキン。LightBoxが出たのってポップアップを禁止するツールが多く出てきたことが背景にありますが、ページ内ポップアップされていて面白い。 関連エントリ スワイプできるLightBox実装jQueryプラグイン「Swipebox」 今こそ知っておくLightbox風プラグイン20+
フラットデザインについて @maka_velicom が思う6つのこと。 / Maka-Veli .com
フラットデザイン、流行が止まりませんね。国内サイトや記事でも、以前にも増して見かけるようになりましたし、TLでもよく議論しているのを見かけます。iOSもフラットデザインに～みたいな話もあったり、TwitterBootStrap3.0もフラットデザインですね。そんな僕もロゴ変更時にフラットチックにしていますし。個人的にもけっこう好きです。なんで好きなのかと言うと、「色」が好きなんです。色そのもの。というわけで、以下、個人的に注意している点です。 あ、始めに言っておきますが、このブログデザインがフラットデザインの正解だ、なんて本当に1mmも思ってません。むしろ前のデザインにむりやり組み込んだこのデザイン、これでフラットデザイン語るなんてヤバいです。勉強し直す自戒も含めて、書かせて下さい。そして読んでくれた皆さま、心より御礼申しあげます。 英語圏と同じにしない テキストで大胆なタイポグラフィ
アイディアをすぐに形にしよう！エンジニア必見Bootstrapライクなデザインテーマまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
エンジニアからプロレスラーに昇格した勝利です。 (首、太いだろ？) 好きな技は蝶野親分の「ケンカキック」です。 さて、 エンジニアの方なら誰しもが通ると思われる、アイディアを思いついた後に実装する際に避けては通れない道、 そう、デザイン部分の構築。 聞いただけでもう蕁麻疹がおさまらないですね。 そんなとっかかりの部分を簡単に実装できるツール。 そう、Twitter Bootstrap。 Twitter BootStrapとは・・・ BootstrapはWebデザインが得意ではないエンジニア向けにTwitter社が開発／提供するCSSフレームワークです。このTwitter Bootstrapを利用すると、簡単にTwitterっぽいデザインのWebサイトを作成できます。 ただ、Bootstrapだけではもの足りなくなったあなた。やっぱりバリエーションは多数もっといた方がいいですよね。 そんなあ
新人デザイナーならブクマして損なしのWebデザインギャラリーサイト
【フレッシュなWebデザイナーの皆さんへ】数ある... / ━━国内ギャラリーサイト━━イケサイ、ABM、S... / 【イケサイ】国内のコーポレートサイトが中心のデザ...他...全14件 【フレッシュなWebデザイナーの皆さんへ】 数あるWebデザインギャラリーサイトの中で、新卒Webデザイナーがとりあえず毎日見ておけば間違いない特にオススメのギャラリーサイトをまとめました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザイナーなら押さえておきたい、今月の優れたWebデザイン（2013年4月）
