Flexboxでやりたいレイアウトを、ビジュアルを見ながら選択肢を選んで作成、コードをコピーできる・「Flex」
FlexはFlexboxでやりたいレイアウトを、ビジュアルを確認しながら選択肢を選んで作成、コードをコピーできるシンプルなWebアプリです。設定項目の多いFlexboxは様々なレイアウトに対応できる反面で、覚えなければならない事も多く、正直言って面倒です。使うたびに検索してる、なんて方もいるかもしれませんね。 こちらはそんなFlexboxを、完成形を確認しながら選択肢を選ぶだけでコードを完成出来る、というもの。動作するチートシート、みたいな感じでした。 使ってみる 使い方はとても簡単です。まずは下にスクロールします。アイテムの数やflex-flowを聞かれます。次にwrapやjustify-contentなどを聞かれるので選択肢を選んでいく、という流れ。最終的にできたレイアウトを実装する為のCSSコードをコピーすればOKです。僕の下手な説明を読むより、使ってみた方が早いかも、という程度には
CSSだけで三角形を作ろう！その2：吹き出しやリボンをデザインする | 株式会社グランフェアズ
こんにちは、めぐたんです。 前回は「CSSだけで三角形を作ろう！その1：borderプロパティの仕組みをマスター」と題して、なぜborderプロパティだけで三角形が作れるのか？どのような設定でどんな三角形ができるのか？を詳しく掘り下げてみました。 では、こうして作った三角形はWeb制作においてどんなときに活躍するのでしょうか？ よく見る利用例を挙げていきたいと思います。 はじめに：三角形を配置するポイント ご紹介するサンプルのラインナップは大きく分けて下記の3つです。 吹き出し ステップ表示 リボン風の装飾 上図のように、要素にくっつけて別の形を表現するという使い方が主だと思います。 この場合三角形自体にはコンテンツとして意味合いを持たないので、:beforeや:afterといった擬似要素として配置します。 また、位置調整のためのpositionプロパティも抑えておきましょう。 利用例1：
CSSのグラデーションボタンをホバー（マウスオーバー）でアニメーションさせる方法
CSSのグラデーションボタンをホバー（マウスオーバー）でアニメーションさせる方法 CSSで作ったボタンをマウスオーバーしたときに色を変えたい場合、「transition」を使うとふわっと色が徐々に変化するアニメーション効果を簡単に加える事ができます。 「transition:1s」なら1秒、「transition:0.5s」なら0.5秒のアニメーションになります。
IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！
2016年1月5日 CSS, JavaScript 昨年からいろんなサイトで続々と実装されてきているFlexbox。従来の方法とは違い、簡単にCSSでレイアウトを組めちゃう素敵技です。しかし、Internet Explorer8や9等の古いブラウザーには対応しておらず、Flexboxを使いたくても使えない…というWeb制作者さんも少なくないはず。そんな悩みを今回の記事で解消します！ ↑私が10年以上利用している会計ソフト！ Flexboxって何？ FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃうボックスです。具体的には主に以下のような事を手軽に実装できます。 CSSを一行プラスするだけで横並びにできる！ 横並びになった要素の高さが最初から揃ってる！ 要素を上下左右、好きな順序に並び替えられる！ スペースの
cssでlistのborderを斜め線にする|ユズムログ
このサイトのメニューでも使ってますが、やってみたかったけどなかなか方法が見つけられなかったリストの区切り(border)を直線でなく斜め線にする方法。 まずはHTMLでメニュー作成 普通にリストで作成しています。 <ul> <li><a href="">TOP</a></li> <li><a href="">MENU1</a></li> <li><a href="">MENU2</a></li> <li><a href="">MENU3</a></li> </ul> 何もスタイルを指定しない場合はこんな感じですね。 分かりやすいよう背景色のみ指定しています。 TOP MENU1 MENU2 MENU3 スタイルを指定していきます。 まずはメニューを横並び。 これはdisplay:flex;で指定します。 次にliに対してborderを指定します。 右側だけラインが欲しいのでborder-r
【CSS】スタイルシートだけで「border:dashed;」をグラデーションさせてみた。
だいぶ以前に「border要素にグラデーションを施す方法」という記事を公開しましたが、それとほぼ同じテクニックで、「border:dashed;」や「border:dotted;」をグラデーション処理させる方法を考えてみました。 理論としては、親要素に「position:relative;」を指定して、疑似要素:beforeでボーダーを引き、さらに疑似要素:afterで背景色と同じグラデーション処理を施します。 具体的なコードは次のようになりますね。 .border-dashed { padding:0; margin:0; position:relative; } .border-dashed:before, .border-dashed:after { position:absolute; left:0; right:0; bottom:0; display:block; conten
CSS3のアニメーションで「ふわふわ」「ゆらゆら」させる方法や便利なオンラインツール - コムテブログ
TL;DR いざアニメーションを作ろうとすると結構面倒ですよね。できれば勉強しながら便利なツールを使ってアニメーションを作りたいところ。今回は CSS3 のアニメーションで「ふわふわ」させたり「スカッシュ」させる方法や便利なオンラインツールをご紹介します。 アニメーション１２の基本原則を確認 こちらは「何か動きを出してくれ」と依頼された時に見ておきたい、ディズニーによって開発されたアニメーションの１２の基本原則（12 basic principles of animation - Wikipedia）デモですが、CSS のみでこういった動きやアニメーションを実現できたら楽しいですよね。ロゴやボタン、イラストなどの一部に使ったら一味違うアイキャッチになるかもしれません。 The illusion of life from cento lodigiani on Vimeo. THE ILLUS
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
CSSを使って蛍光ペンで太い線や細い線を引いた雰囲気を出す
文字に色を付けたり、大きくしたり、飾りをつけたりして、抑揚やアクセントをつけると読みやすくなりますよね！ 私は、長文が苦手な方です。 苦手なだけに、私と同じような気持ちの人に、ストレスなく読んでもらえるように、日々コソコソと考えています。 ということで、今回は、アクセント代わりに蛍光ペンで線を引いたような効果を中心に文字周りで使えそうなコードをメモっていきたいと思います。
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
Twitter 人気のつぶやき 3/4～3/17 2017
2017年4月1日 話題のWeb関連情報 WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったつぶやきトップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！ ↑私が10年以上利用している会計ソフト！ 1. CSS：CSSのposition:stickyがすごく便利 この記事をRTする 2. CSS：CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選 この記事をRTする 3. デザイン：おしゃれで使いやすい配色パターン見本集 この記事をRTする 4. ロゴ：ボツになったロゴを無料配布しているサイト【Logodust】商用利用OK、リンク不要 この記事をRTする 5. CSS：CSSだけで作るボーダーのア
CSS Gradients with background-blend-mode
The CSS background-blend-mode property blends the backgrounds of an element: colors, images, and gradients, together with Photoshop-like blend modes (multiply, screen, overlay, etc). It is very new and is curently supported by the latest releases of Chrome, Firefox, and Opera. The property is coming to Safari soon but not available in Internet Explorer. CSS gradients are already immensely powerful
CSS3 Patterns Gallery
Click on a pattern to expand Textareas are editable Browser support Submit a new one Github repo Enjoy! Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial
reset.cssとnormalize.cssに続く新しいリセット用CSS、モバイル対応・最近の実装スタイルを考慮したスタイルシート -sanitize.css
HTMLの各要素のブラウザごとに異なる差異をなくし、スタイルをリセットするスタイルシート「sanitize.css」を紹介します。 「Normalize.css」の共同開発者：Jonathan Nealの新しいプロジェクトで、最近の実装スタイルにあったアプローチがとられており、スマホなどのモバイルにも対応しています。 sanitize.css sanitize.css -GitHub sanitize.cssとは sanitize.cssの対応ブラウザ sanitize.cssのスタイル sanitize.cssの注目すべきスタイル sanitize.cssの適用 sanitize.cssとは sanitize.cssはHTMLのあらゆる要素を各ブラウザでの差異をなくし、整合性をもたせてレンダリングさせるスタイルシートで、ライセンスはCC 0で利用できます。 有用なデフォルトはそのまま 多
複雑なコードは不要！簡単に使えるHTML/CSSジェネレーター22選
今回はWeb制作で役立つHTML/CSSを生成してくれるジェネレーターを紹介します。 CSS3の登場でより高度なアニメーションや表現ができるようになりました。一方、CSS3のコードは複雑になりがちでプロパティの使い方を覚えるのも大変です。 ジェネレーターはリアルタイムでデザインを確認できたり、GUIで簡単にデザインを調整できたりします。より効率的なWeb制作を行うために、ぜひ活用してみてください。 WAIT! Animate http://waitanimate.eggbox.io/#/ CSSのループアニメーションで遅延を挿入するのは簡単ではありません。こちらのサービスでは一時停止機能をもったループアニメーションのコードを生成してくれます。いくつかの主要なアニメーションのテンプレートが提供されており、さらにカスタマイズも可能です。 Stylie http://jeremyckahn.gi
CSSのみで実装するキャプションエフェクト 20 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント
CSSはやっぱり便利！最近のWebページでよく使うさまざまなコンポーネントを実装するスタイルシートのまとめ
ここ数年でCSSは加速度的に進化し、ひと昔前まではJavaScriptを使用しないと実装できなかったのが、CSSのみで実装できるようになりました。また、サポートすべきブラウザもIE8が除かれるようになり、今まで躊躇していたテクニックも数多く利用できます。 アコーディオンやカルーセル、モーダルボックス、ポップオーバー、フリップ コンテンツなど、JavaScript無しのCSSで実装するテクニックを紹介します。
CSS Flexboxで実装されたマンガのコマ割り風にデザインされたレスポンシブ対応のレイアウト
CSS Flexboxで実装されたマンガのコマ割り風にデザインされたカード型レイアウトを紹介します。しかもレスポンシブ対応で、スクリプトは使用されていません。 マンガだとコマの位置に意味があるので、変化してしまうのはダメですが、カード型レイアウトにコマ割り風のデザインを適用と考えるといろいろと使えそうです。 コマ割り風レイアウトの実装 実装はシンプルです。 HTML 各カードは「<div class="panel"></div>」で実装されており、その中に画像やテキストや吹き出しを自由に配置できます。 <article class="comic"> <div class="panel"> <p class="text top-left">Suddenly...</p> <p class="text bottom-right">...something amazing happened</p
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで実装する次のコンテンツへと促すスクロールダウンボタン 10 - NxWorld
jsdo.it
