[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)
注目度アップ！画面を二分割するWebサイトの制作ポイントまとめ（参考テンプレート付）
画面を縦半分に二分割した「スプリット・スクリーン（英: Split Screen）」デザインの利用がウェブサイトで増えてきています。このレイアウトは、「ひとつの画面に2つのメッセージ」というシンプルなルールだけです。 各パネルには写真イメージや文字テキスト、イラストなど異なるさまざまな要素を配置できるのが特長のレイアウトです。 シンプルとなってきているグラフィックのデザイントレンドに比べ、画面を2つに分割することは、よりユニークな方法でサイトへの興味を引くことができます。もう少し詳しく見ると、以下のような利点があります。 特定のパートにユーザーの注意を引きつける。 コントラストをうまく利用できる。 これまでにないスタイルを提供できる。 また、あらゆる画面サイズに対応する、レスポンシブデザインにとっても良い選択と言えるでしょう。このタイプのレイアウトは、大画面やタブレットでの表示が特におすす
デザイナーが確認しておきたいデザインリソース完全ガイド80選
今の作業フローをもう少し良くしたい、と考えているデザイナーの方は多いのではないでしょうか。 日々のデザイン作業を"より快適に" "効率良く"するためには、デザインリソースを確認しておくことが重要です。 しかし、たくさんのツールやサービスがあり、実際問題どれを選んだらいいかわからなかったり……そもそも調べるのが面倒という方も決して少なくないはずです。 そこで今回は、数ある中からオススメしたいデザインリソースをピックアップしてご紹介します。 気になるものがあれば、今すぐ活用してみてはいかがでしょうか。 ※素材数などは2016年12月21日時点での情報です。今後変更となる可能性がありますのでご了承ください。 画像・動画素材関連 1. freepik http://www.freepik.com/ ベクター、PSD、アイコンと、様々な形式でデータが用意されている、便利な素材がたっぷり揃った素材サイ
ずっと使える、デザインの基本まとめました。【2020年改訂版】
「デザイン」に対して興味のあるすべての人を対象に、いつまでも長く利用できるデザインの基礎テクニックを、これまで当サイトで紹介したエントリーの中から、各ポイントごとにまとめました。デザイン入門編として覚えておきたい基本から、サンプル例を見ながら理解できる、より実践的なデザインテクニックまで幅広く網羅しています。
ダミー画像生成の真打ちとも言える高性能がすごい！オンラインなのにオフラインでも利用できてしまう -satyr.io
ダミー画像の無料サービスはいくつかありますが、真打ちとも言える高性能なダミー画像が利用できる無料オンラインサービスがリリースされました。 ダミー画像はレスポンシブ対応、可変画像や高さが不揃いの画像にも対応しています。しかもオンラインなのにオフラインでも利用できてしまう優れものです。
[CSS]レスポンシブ対応のグリッド システムを実装する時に絶対覚えておきたいテクニックを詳しく解説
HTMLとCSSでグリッド システムを実装する際、何から始めればいいのか、どういうことを考え、決めて、どんな手順で進めるのか。 カラムの幅のつくり方、溝はmarginとpaddingのどちらがよいか、レスポンシブはどう対応するのかなど、グリッド システムを実装するテクニックを詳しく解説します。 かなり長いので、時間のある時に読んでいただければと思います。 How to build a responsive grid system 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 グリッドの実装に必要な準備 グリッド システムの構築 Step 1: グリッドを作成するための仕様を選択 Step 2: border-boxにbox-sizingを指定 Step 3: グリッドのコンテナを作成 Step 4: カラムの幅を計算 Step
![[CSS]レスポンシブ対応のグリッド システムを実装する時に絶対覚えておきたいテクニックを詳しく解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/973ddf236729b95ec2af2884162bebe179d65cb5/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016111201.png)
Bootstrapで日本語をより美しく表示させることにこだわった無料のテーマ -Honoka
Bootstrapは人気のフレームワークですが、日本語のコンテンツを表示するために最適化されているとは言えません。フォント指定・文字サイズをはじめ、日本語をより美しく表示するためのさまざまなアプローチを取り入れたテーマ「Honoka」を紹介します。 単に使用するだけでなく、他のものでも日本語を美しく表示させるのに役立ちます。 Honoka Honoka -GitHub 日本語フォントは、たくさんのフリーフォントがあります。 2017年用、日本語のフリーフォント 259種類のまとめ Honokaの特徴 Honokaのデモ Honokaのアプローチ -Bootstrapでの日本語表示最適化 Honokaの利用方法 Honokaの特徴 Honokaは、Bootstrapでより美しく日本語を表示させることにこだわったオープンソースのテーマファイルで、これをベースにWebサイトを作成したり、既にBo
今さら聞けない！Webデザインの定番とも呼べるレイアウト方法「グリッドレイアウト」の基本
画面を縦横で分断した"方眼のブロック"を組み合わせてコンテンツを作り上げていく、Webデザインの定番とも呼べるレイアウト方法を「グリッドレイアウト」と言います。 しかし、一口に「グリッドレイアウト」といっても「リキッドレイアウト」や「レスポンシブレイアウト」のようにグリッドレイアウトから派生したレイアウトも登場し、レイアウトの組み方も刻々と変わってきています。 そこで今回は、「グリッドレイアウト」の基礎をおさらいしながら、実際にどのようにレイアウトをしていくのかを見ていきます。 グリッドレイアウトとは グリッドレイアウト(グリッドデザイン、グリッドシステム)はホームページのデザイン手法の一つで、画面やページを縦横に分断する直線で格子状に分割し、これを組み合わせてブロック内の要素の大きさや配置を決定していく方法のことです。 特に、ページを方眼のように同じ大きさの正方形や長方形に分割し、これを
Blogger templates 2024 - BTemplates
What is Blogger and why should you use it?Blogger is a publishing platform that allows you to create a blog under the subdomain blogspot.com or your own domain. It was created in 1999 by Pyra Lab and acquired by Google in 2003. Some of the advantages of using Blogger are: Free service with almost 100% uptime.It uses Google's infrastructure. Very fast page loading.Adsense already integrated into th
ウェブをもっと面白く！コピペ可能なHTML/CSSスニペット45個まとめ 2016年12月度
思わずクリックしてコンテンツを読み続けたくなるような、コピー&ペーストで利用できる最新 HTML/CSS スニペットをまとめてご紹介します。 新しいテクニックを利用した、ますます進化するWebの可能性を感じさせてくる作品ばかりで、今後のデザイン制作に活用してみてはいかがでしょう。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 ウェブをもっと面白く！コピペ可能なHTML/CSSスニペット45個まとめ Fixed Disappearing Scrolling Header スクロールすると表示されている文字テキストがフェードアウト
Stockvault.net | Free Stock Photos & Free Images | Share and download
Need Stock Photos for your next Project? We are a free stock photo community where photographers & artists can share their own photos and artwork with people from all over the world. We offer thousands of pictures and illustrations of people, animals, buildings and street photography, beautiful landscapes, plant & flower photos, objects from computers & electronics to food images and jewelry photo
Bootstrap 3でレスポンシブ対応のwebページをつくろう！グリッドシステムの基本な使い方
Bootstrapはここ数年人気が非常に高く、多くのWebデザイナー・制作者がレスポンシブ対応のWebサイトを作るための本当に便利なツールです。使いやすいclassを備えたモジュール式のフレームワークで、カスタマイズ性にも非常に優れています。 Bootstrapのファイルのダウンロードからファイルのセットアップ、グリッドシステムの基本的な使い方を解説した記事を紹介します。 Installing Bootstrap and the Bootstrap Grid System 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Bootstrap 3の特徴 Bootstrapのダウンロードとインストール Bootstrapのファイル構成 このチュートリアル用のファイル構成 デバイス用のclass コンテナの実装と配置 グリッドの実装 オフセッ
面倒なレスポンシブイメージの画像作成を自動化してくれる神ツールとブレイクポイントの考え方
レスポンシブイメージ、使ってますか？ ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、イメージオプティム とかMac Automatorとpngquantなどのツールを駆使して一生懸命に画像自体を最適化したりレスポンシブイメージを使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。 そ・こ・で！ 本日ご紹介したいのが「Responsive Image Breakpoints Generator 」です。このツールを使えばレスポンシブイメージの複数画像の作成やHTMLの記述を自動化できて、しかも！アートディレクションまで自動化できるんです。 ということで、今回はレスポンシブイメージについての簡単なおさらいと、画像作成の基本的な考え方、それから自動化について書いてみます。 では、行ってみ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS・スタイルシートテンプレート - ネットマニア
TechAcademyマガジン
コリス
これは簡単でいいね！コンテンツの区切りを斜め線にするテクニック（レスポンシブ対応） -Angled Edges
HTML5 UP! Responsive HTML5 and CSS3 Site Templates
よりシンプルに手描き風にデザインされたBootstrapのワイヤーフレーム用のテーマファイル -Bootsketch
Blugraphic
