[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)
[CSS]画像にキャプションをさまざまなCSS3アニメーションで表示するスタイルシート、コピペで簡単に利用できます -iHover
デモページ：スクエア iHoverの使い方 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 ※スクリプトは不要です。 <head> ... <link href="styles/ihover.css" rel="stylesheet"> </head> Step 2: HTML 基本的にはノーマル時に表示するサークル（スクエア）とホバー時のものをdivで内包します。細かい点が各デモごとに異なるので、それぞれのデモページを参考にしてください。 Effect 1だと、こんな感じです。 <div class="row"> <div class="col-sm-6"> <!-- normal --> <div class="ih-item circle effect1"><a href="#"> <div class="spinner"></div> <div cl
たったの3ステップでボタン作成！プレデザインCSS「Butns.css」の使い方
通常、CSSのライブラリやフレームワークには、グリッドレイアウトやフォームなどの一連のデザインがパッケージングされていますが、ボタンに関してはカスタマイズ性がそれほど高くないのが現状です。 デザイン性の高いボタンを作りたい時に便利なのが*「Butns.css」*です。 今回は、ボタン作成に特化した*プレデザインCSS「Butns.css」*をご紹介します。 「Butns.css」を使うと、フラットでシンプル、そしてカラフルなボタンを簡単に作成することができます。 Butns.cssとは？ Butns.cssとは、ボタンデザインに特化したCSSライブラリです。 一般的なライブラリやフレームワークと違い、Butns.cssはレイアウト要素などを含んでいない軽量なCSSファイルになっており、ボタンデザインに特化しているため*「プレデザインCSS」(Pre-designed CSS)*と呼ばれるこ
95+ CSS Forms
In the ever-evolving landscape of web design, creating captivating and user-friendly forms is a crucial aspect of delivering a seamless user experience. To aid designers and developers in this endeavor, we are thrilled to present our collection of CSS forms. This handpicked selection features an array of free HTML and CSS form code examples sourced from CodePen, GitHub, and various other trusted r
Sassを使うなら知っておくと便利な色まわりの小技やMixinいろいろ
2017年2月22日 CSS, 色彩 Sassがデフォルトで用意している関数や、それを応用して設定できる小技やMixinをまとめてみました。紹介しているほとんどの小技が、色を一色してすれば他の色も自動生成してくれる…という便利なものです。Sassを勉強中の方はもちろん、ゴリゴリ使いこなしている方も参考にしてみてください！Sassの基本的な情報は、過去記事「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」に書いています ;) ↑私が10年以上利用している会計ソフト！ 目次 透明度の書き方を簡略化 色の明度を調整する 色の彩度を調整する メインカラーの明度や彩度を調整して、リンク色を手軽に設定 背景のグラデーション 文字をグラデーションにする 縞模様の背景 抑えておきたい基本編 1. 透明度の書き方を簡略化 通常色の透明度を指定する時は rgba(0,
打ち込むより簡単！保存しておくと便利なCSSスニペット18選
ホームページを製作する際、何度も繰り返し使うコードはスニペットとしてまとめておくと便利です。 スニペットとは「切れ端」「断片」という意味で、プログラミング言語の中で簡単に切り貼りして再利用できる部分のことです。 とりわけCSSは、HTMLやJavaScript以上に、繰り返して使うコードが多いので、そうしたコードをまとめておくとよいでしょう。 今回は、何度も打ち込まなくてもコピペで使える、保存しておくと便利なCSSスニペットをまとめてみました。 スニペットとしてテンプレート化することで、一部分を変えるだけで再利用することができます。 保存しておくと便利なCSSスニペット 1. CSSリセット さまざまなブラウザでデフォルトの表示方法がありますが、それらを同じように表示させるCSSリセットと呼ばれるテクニックがあります。 CSSのリセット化コードはさまざまありますが、画像のレスポンシブ化とm
[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法
先日の記事「フォントサイズの指定方法（翻訳版）」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。 これらの単位を使うことは「フォントサイズの指定方法」でフォントサイズに使うことを反対しましたが、レイアウトでは非常に役立つ単位です。 Viewport vs. Percentage Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ビューポートの単位(Viewport Units)とは 要素を幅いっぱいに指定 (% > vw) 要素を高さいっぱいに指定 (
![[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/9632aee4416db718e0899706ace859f7fdcdf363/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072201.png)
CSSフレームワークまとめ - Qiita
自分でもCSSフレームワークを作りたく、 巷にはどんなフレームワークがあるのか、ベンチマークをとる意味も含め、調べてみました。 Twitter Bootstrap 一番有名で一番使われてますね。 CSSフレームワークの王道。 v3.0からフラットになりました。 現在、v4がα版として出ています。 http://v4-alpha.getbootstrap.com/ Foundation こちらも有名。 BootstrapとこちらのFoundationは、幅広く用意されている感じがします。 Primer Github製。もちろん見た目もGithub 。 Pure YUIからでているライブラリ。 クラスのつけかたがシンプルな印象です。 Gumby こちらもなかなかのボリュームです。 Sass製。 Cardinal LESS製。 ミニマムでシンプルです。 INK Sass製。 なかなかクオリティが
jQueryとCSS3で作るページの上までスクロールするボタン
wordpressはプラグインがたくさんあって便利です。しかし、個人的には安易にプラグインを使うのではなく、自作できるものは自作できるよう心がけています。 今回紹介するのは前からよく使われている方法ですが、プラグインで実装している人も多いようなので紹介します。自分で作った方が自由ですし、無駄に大きなファイルにならないのでいいかと思います。 今回はボタンが現れるパターンを3種類作ってみました。定番のフェードインして現れるものと、CSS3を使ったものがあります。まずはサンプルをご覧ください。 HTMLは全て同じです。 <a href="#" id="page-top1">上に戻る</a> 非常にシンプルです。 では、CSSとiQueryを1つずつ解説します。 1. フェードイン まずはとても有名なやつです。ある程度スクロールするとフェードインして現れます。CSSは次のようになります。サンプルは
Photoshopいらずでオシャレな加工ができるCSSフィルターのサンプルコード12選
Web用の画像を加工する際にPhotoshopを使っている方も多くいらっしゃいますが、簡単な画像加工なら、CSSのfilterプロパティ（CSS Filter）を使うのがオススメです。 CSSフィルターを使えば、Photoshopでもおなじみの彩度、明るさ、ぼかしといった様々な画像加工が手軽にできます。しかも、数行のコードを書くだけで、動画にも使えるので便利です。 今回は、codepenに公開されているCSSフィルターのサンプルをまとめてご紹介します。 今すぐ活用できるものばかりですので、ぜひこれからの作業に取り入れてみてください。 画像加工が手軽にできるCSSフィルターサンプル 1.Grayscale Filter http://codepen.io/grayghostvisuals/pen/cgFGm モノクロ加工として画像編集ではおなじみのグレースケール（Grayscale）も、CS
Image Effects with CSS
Bennett Feely Twitter CodePenHow it worksUsing one or more newer CSS properties (background-blend-mode, mix-blend-mode, or filter) gives us a surprising amount of possibilities to manipulate a single source image. The unedited background-image manipulated using CSS. In most of these effects the single source background-image url is repeated one or more times and blended with itself using CSS blend
Photoshopはもう使わない!? 場所を問わず画像編集できるCSSデザインフィルターの画像編集エフェクト9選
CSS3では、Photoshopのようなフィルター効果を再現するイメージフィルターという機能があります。 Photoshopを使用すれば画像加工を行うことができますが、外出先などで画像の編集が行えない……そのような経験、Photoshopを使用するデザイン関連の仕事をされている方なら一度や二度ありますよね。そんな時に、少しのコードをCSSに足すだけで画像編集できてしまう機能がイメージフィルターです。 今回は、画像の明度や彩度などを簡単に調整することができる、CSSイメージフィルターについてご紹介します。 とてもシンプルなコードばかりですので、使えそうなものがあれば、早速試してみてください。 CSSフィルターができること ～基本機能「９」～ 1. レンズで覗き込むようにぼかしを加える「blur」 filter: blur( ぼかしの長さ ); blurを指定すると、ガウシアンぼかしタイプのブ
Background Segment Effect | Codrops
A background image segment effect as seen on Filippo Bello’s Portfolio, employing the CSS clip-path property and powered by anime.js. Today we’d like to share a little decorative effect with you that we’ve encountered on Filippo Bello’s Portfolio, maybe you’ve seen it. It’s a really neat way to add some jazz to background images. The idea is to replicate boxes from a background with the same backg
CSS を使って長文最後を「･･･」で省略する方法（複数行対応） - Qiita
単行だと簡単にかけたり、-webkit対応だと簡単にかけたりするのだが、 色々なブラウザでの複数行だとちょっと面倒だったのでメモ。 対応方法 htmlに長文を用意 .cut_txt { position: relative; overflow: hidden; /** 行数設定 **/ height: 3em; line-height: 1.5; } .cut_txt:before, .cut_txt:after { position: absolute; /** 塗りつぶし背景色 **/ background: #f7f6ec; } .cut_txt:before { /** 語尾文字 **/ content: "･･･"; bottom: 0; right: 0; } .cut_txt:after { content: ""; width: 100%; height: 100%; }
ウェブをもっと面白く！コピペ可能なHTML/CSSスニペット45個まとめ 2016年12月度
思わずクリックしてコンテンツを読み続けたくなるような、コピー&ペーストで利用できる最新 HTML/CSS スニペットをまとめてご紹介します。 新しいテクニックを利用した、ますます進化するWebの可能性を感じさせてくる作品ばかりで、今後のデザイン制作に活用してみてはいかがでしょう。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 ウェブをもっと面白く！コピペ可能なHTML/CSSスニペット45個まとめ Fixed Disappearing Scrolling Header スクロールすると表示されている文字テキストがフェードアウト
CSS3Generator by @RandyJensen
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s w
BootstrapのベースのCSSを使ってさまざまな要素を実装してみよう！基本要素とナビゲーションのスタイル
先日の記事「Bootstrapのグリッドシステムの基本な使い方（翻訳版）」で、Bootstrapのファイルのダウンロードからファイルのセットアップ、グリッドシステムの基本的な使い方まで紹介しました。 次のステップとして、ベースのCSSを使ってさまざまな要素を実装してみましょう。 Base CSS and Navigation Systems in Bootstrap 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 BootstrapのベースのCSS 見出し（hx）を実装する 「small」を使って実装 引用（blockquote）を実装する 連絡先情報（address）を実装する コード（code）を実装する 整列のclassを実装する 強調のclassを実装する フォーム（form）を実装する テーブル（table）を実装する 画像
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの参考になるアイデアが満載！2016年スタイルシートを使ったテクニックのまとめ
http://post.simplie.jp/posts/107
http://css3gen.com/
