プラカンブログ ホームページ制作に関する役立つ記事からおもしろ記事など。 プラスデザインカンパニーの スタッフによるブログです。
【CSS】今更ながら、フレックスボックスの使い方をまとめてみた。｜プラカンブログ | WEB制作会社プラスデザインカンパニー
プラカンブログ ホームページ制作に関する役立つ記事からおもしろ記事など。 プラスデザインカンパニーの スタッフによるブログです。
Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA
ボックス要素の横並びをCSSで行う場合は、CSSの「Flexboxフレックスボックス」 が便利です。Flexboxを使用することで、簡潔なコードで豊富なボックスのレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サンプルの紹介 今回はレスポンシブな
Webデザインにシャドウを取り入れる時のポイントいろいろ
Webデザインにシャドウを取り入れる時のポイントいろいろ要素に加えれば、画面に立体感をもたらすシャドウ。なんだか最近シャドウを取り入れたデザインをよく見かけるので、今回はシャドウを使う時の注意点やコツをまとめてみようと思います。 If you took a 3 year break from UI design, now you're all caught up: pic.twitter.com/4pdL17dXaF — Dylan Jones (@tDJ) March 2, 2016 この Tweet にも描かれているとおり、1 年周期でシャドウの扱いが変わっていますね。2014 年は影なしの完全フラットデザイン。2015 年はロングシャドウ。そして 2016 年はこれから紹介するぼんやりふんわりシャドウ。 CSS で実装するシャドウの基礎通常のシャドウ要素にシャドウを加えるのはとっても
เว็บสล็อตโรม่า joker123 หมดกังวลเรื่องการโกงไปได้เลย
เว็บสล็อตโรม่า joker123 เป็นทางเลือกที่น่าเชื่อถือสำหรับผู้เล่นที่ต้องการความมั่นใจในการเดิมพันออนไลน์ ด้วยระบบความปลอดภัยระดับสูงและการตรวจสอบอย่างเข้มงวด คุณสามารถวางใจได้ว่าทุกการเล่นของคุณจะเป็นไปอย่างยุติธรรมและโปร่งใส เว็บไซต์นี้ได้รับการรับรองจากหน่วยงานที่เกี่ยวข้อง ทำให้คุณหมดกังวลเรื่องการโกงได้อย่างสิ้นเชิง เว็บสล็อตโรม่า joker123 สล็อตโรม่า นอกจากนี้ ทีมงานมืออาชีพพร้อมให้บริการตลอด 24
Twitter の「お気に入り」アニメーション - CSS Animation
Twitter の「お気に入り」アニメーション 最近 Twitter は「お気に入り」(「ふぁぼ」としても有名) のデザインを変更、新しいアニメーションを取り入れました。 CSS transitions よりも、アニメーションは画像の羅列を活用できます。 そこで、 アニメーションを CSS animation の steps timing function を用いて作り直す方法を示します。 動きの錯覚 その効果は、円筒の周りに順番に絵が出てくる、昔の回転覗き絵と似ています。 円筒の代わりに、私たちは要素の中に平らな画像の羅列を表示します。 デモ 星をホバーしてアニメーションを見られます: この例ではアニメーションを構成する画像の羅列を作ることから始めます。 今回は、 Twitter のお気に入りアニメーションの画像のセットを使います。 このフレームをアニメーションするために、私たちはフレー
総行数57,000の巨大CSS群をLessに書き換えた軌跡 - mixi engineer blog
こんにちは！フロントエンド闇祓いの Kuniwak です。 この投稿はmixiグループ Advent Calendar 2015の20日目の記事です。 今年の9月に、スマートフォン Web ブラウザ版 mixi「mixi Touch」の巨大 CSS を Less （CSS プリプロセッサー）でビルドする環境へと移行しました。 書き換えた CSS の行数は、なんと 56,725行 です。😵 ということで、今回は弊社の大規模 CSS → Less 移行事例についてお話しします。 背景 スマートフォン版 mixi は、2010年5月に始まりました。 この頃のスマートフォンは、iPhone 端末であれば iPhone 3GS、Android 端末であれば Nexus One という時期です。 また、スマートフォンの世界では、Webkit ベースのブラウザーが席巻していた時代ということになります。
XHTML+CSSでキャメルケースを使うべきではない7つの理由 | tshinobu.com
XHTML+CSSのid/class名でキャメルケースを使うべきではない7つの理由を、CSS WIZARDRYの「CSS: CamelCase Seriously Sucks!」から覚え書きします。 CSS: CamelCase Seriously Sucks! 下記はその意訳です（間違っていたらすみません）。 はじめに 今、この記事が何人かの人をいらだたせることは分かっているし、私はふつうコードの書き方は教えません。私はシングルラインCSSがキライです。ただ、明瞭で、道理にかなった、理解しやすく、首尾一貫したコードであるならば、そんなに文句を言うことはありません。私の目から見て最も重要なのは一貫性です。しかしながら、キャメルケースは、本質的に矛盾していることが明らかなのです。 1. CSSはハイフンで区切られた構文 CSSはハイフンで区切られた構文です。どういうことかというと、font-
position:absolute;やposition:fixed;で要素をきれいに中央配置する方法 | TechMemo
ある要素をposition:absolute;やposition:fixed;で配置する場合、topやleftで要素の位置を調整しますが、要素の左上が指定された位置に配置されます。なので、以下のようにtopとleftを50%にしてもきれいに中央に配置することはできません。 <div id="neko"> <img src="neko.jpg" /> </div> #neko img{ position:fixed; top:50%; left:50%; } このようにCSSで指定した場合、画像の左上が中央になるため、画像自体は中央からずれてしまいます。 今回は、このような場合に画像などの要素をきれいに中央配置する方法を紹介します。positionプロパティの詳細については、要素を柔軟に配置するプロパティ「position」をご参照ください。 position:absolute;やposit
CSS3で追加されたセレクタ「:not()」について考えてみました
CSS3セレクタで追加された「:not()」。今まで使ったことがないので、深く考えたこともなかったですが、曖昧なままじゃダメだと思い勉強してみました。 CSSセレクタって何だという方はこれらの記事が役に立つと思います。 意外と知らない!?CSSセレクタ20個のおさらい｜Webpark 保存版！CSS3セレクタの説明書｜Webpark では、「:not()」について考えてみます。これから紹介する簡単なサンプルたちはWindows7のChromeで動作確認しています。他のブラウザの場合うまく対応していない場合も考えられますのでご注意ください。 「:not()」の基本 Selectors Level 3では、「E:not(s)」という風に説明されています。日本語で説明すると、「sでないセレクタを持つE要素」という感じになります。 また、「Negation pseudo-class」というグループ
[CSS]pointer-eventsでタグのリンクを無効化する方法 | WEBデザインのTIPSまとめサイト「ウェブネタチョ」
CSSやHTML、javascriptやjQuery、WordPressやプラグインなど、WEBデザインにちょっと便利なTIPSまとめブログ。サイト制作時に見つけた小ネタなどをまとめて紹介します。
![[CSS]pointer-eventsでタグのリンクを無効化する方法 | WEBデザインのTIPSまとめサイト「ウェブネタチョ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/2bea45c8a97ea8721797d13ae5439e396d33599d/height=288;version=1;width=512/https%3A%2F%2Fwebantena.net%2Fwp-content%2Fuploads%2F2012%2F12%2F3170991.png)
position: absoluteな要素をcenter寄せにする - console.lealog();
よく使う割にイマイチ思い出せないのがコレ。 `position: absolute`じゃないなら、`margin: 0 auto`とかで良いんですけどねー。 それっぽい帯のデザインを作るときとかでbefore/after擬似要素を使う時はたいてい`position: absolute`なので、うまいこと真ん中に寄ってくれないんですよね・・。 でも、よくよく考えたらそれも大したことはなくて。 縦にも横にもcenterしたい場合のやつ。 サンプル Html <div class="wrapper"> <div class="first">div</div> <div class="second">div</div> </div> Css .wrapper { background-color: #fff; padding:50px; margin: 0; text-align: center;
CSSで作ったドロップダウンメニューのドロップの動きいろいろ
CSSだけで作ったドロップダウンメニューのドロップの動きをいろいろと考えてみました。ちょっとしたことですが、目を引く動きはサイトの印象をよくするかもしれないです。 では解説していきます。まずはHTMLからです。 <ul id="normal" class="dropmenu"> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> </ul> </li> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu
汚いcssを整形するWebアプリ「css2scss」でリファクタリングした際、「ヤバい」と感じた３つの機能と３つの点 - Qiita
あらまし 別の業者が構築したという客先のホームページのcssが非常に読みづらく、 誰も手が付けられてない状態でヤバい（compactの状態で約350行）。 そこでリファクタリングをしようと思った際に、考えた。 「どうせならsass/scss対応にした方が可読性も可用性も上がる！ヤバい！」 sass/scss → css は当たり前として、 css → sass/scss って出来るのかよ、と思い調べてみると、数個発見した。 そのうちの１つ、今回ご紹介する「css2scss」が非常にエレガントだった。 実際に使用して感激して落胆したポイントを、それぞれ３つに絞ってご紹介。 css2scss sass/scssについては、まずはアレなcssを突っ込んでみて挙動を確認して頂ければ幸い。 また、下記のリファレンスが総括的で解りやすい。ご一読あれ。 Sass 3.2 オレオレリファレンス ヤバいを連
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3 : 要素が空の時のセレクタ「:empty」の使い方 | クロジカ
htmlのid属性とclass属性の命名はハイフンかcamelかsnakeか - Qiita
The Blog | Welcome to Adobe Blog
http://article.enja.io/articles/css-architecture.html
APCOM - Home
https://coliss.com/articles/build-websites/operation/css/css-vertical-align-anything-by-sebastian.html
cow2design.com
