BEMのいいところは、それが何者なのかが明白ということに尽きる。とある要素を見たときに、そのスタイルがどこに書かれているのか、何を表しているのかがクラス名を見ればわかる。手を入れる際も、どこに追記すればよいのか、どれくらいの影響を及ぼすのかの大部分が推測できる。 レスポンシブ・デザインと相性がいいとか、流行りのコンポーネント指向と相性がいいなど、BEMの良さは他にもいくつか挙げられるけど、決定的なのは明瞭さであると思う。 BEMを使いはじめてかれこれ３，４年くらい経った。その間に色々な命名規則や設計思想が登場してきたけれども、今のところは浮気する程の魅力を他に感じることもなくBEM一筋でやってきている。ただし実践するにつけて、より明瞭で破綻しづらい設計を実現するために、様々な制約やガイドを設けてやってきたので、「もともとのBEM」からは多少なり離れているかもしれない。 ただし、それはBEM
図のように、IE10 や IE11+ ではコンテンツ (HTML の要素) とスクロールバーが重なってしまう (= オーバーレイする) ことがあります。 設定によっては、スクロールバーは一定時間が経過した後に自動的に隠れますが、 スクロール中にテキストが読みにくくなったり、リンクやボタンがクリックしにくくなることは問題です。 ここでは、この問題について解決します。 原因はビューポートの設定 IE でスクロールバーが重なる原因は、(ほとんどの場合に)ビューポートの設定です。ビューポートとは、ページが描画される領域です。 ビューポートの設定を変更するときは、meta 要素を使って指定するか、CSS を使って指定します。 ビューポートの設定を変更することで、デバイスの解像度が変化したときに、ビューポートの大きさも変更することができるようになります。 言い換えれば、レスポンシブデザインにすることが
以前ここで「jQueryでCSSプロパティの値を取得する方法」と題して jQueryでCSSプロパティの値を取得する方法を紹介しましたが、 「parseInt()」を使って同様にCSSプロパティ値を取得する方法も 結構必要になったりすることがあるので、メモ書きとして紹介してみます。 前回のサンプルと同じ内容でのサンプルで動作させてみると。。。 ＜div id=”box”＞とID名が付けられたボックス要素に CSSで幅「width」と高さ「height」を指定。 変数「boxWidth」「boxHeight」にそれぞれ値を入れた後、 アラートで値を表示するサンプルの場合。 ◆HTML <div id="box"></div><!--/#box--> ◆CSS #box { width: 300px; height: 100px; } ◆SCRIPT <script type="text/ja
(Hey, we're having problems showing images in RSS right now, so if you want a better reading experience, consider viewing this article online [here](https://zellwk.com//blog/rem-vs-em. We hope to fix this soon!). One of the best practices to typography on the web is to use relative units like rem and em. The question is, which should you use? There's been a longstanding debate between rem supporte
CSS初心者向けチュートリアル初めてのウェブサイト: コンテンツのスタイル設定CSS スタイル設定の基本CSS とは何かCSS 入門課題: 経歴ページのスタイル設定基本的な CSS セレクター属性セレクター擬似クラスと擬似要素結合子ボックスモデル競合の処理CSS の値と単位CSS におけるアイテムのサイズ設定背景と境界線コンテンツのオーバーフロー画像、メディア、フォーム要素表のスタイル設定CSS のデバッグ課題: 基本的な CSS の理解課題: 美しいレターヘッド付きの便箋の作成課題: かっこいいボックスCSS テキストの装飾基本的なテキストとフォントのスタイル設定リストのスタイル設定リンクのスタイル設定ウェブフォント課題: コミュニティスクールのホームページの組版CSS レイアウトCSS レイアウト入門浮動ボックス位置指定フレックスボックスCSS グリッドレイアウトレスポンシブデザインメ
日本語組版において、縦書きと横書きの選択肢があるということは極めて自然なことですが、Webサイト制作の中で自由な組版を実装するための技術はこれまで標準化されておらず、縦書きの実装はJavaScript等による強引な手段でしか実現できないという問題を抱えていました。 私たち『縦書きWeb普及委員会』は、縦書きと横書きが混在する日本語組版の文化をWebに継承し、自由な組版を実装するための規格をWeb標準とすべく、Webに関連する各種技術の国際標準化団体であるW3Cと協議を重ねながら、CSSにおける新たな組版規格である〝Writing Modes〟の標準化に向け、様々な取り組みを行なっています。 『たてよこWebアワード2017』は、こうした取り組みのひとつとして、CSS Writing Modesを用いた縦書き実装の指標となるような優れたWebサイトを表彰することを目的としたアワードです。 縦
むかしむかし、あるIEでスターハックというものを使ってな... flexboxしかしらない若者たちへ贈る、オジサンたちが紡ぐCSSの昔話です。 ハック太郎 hasLayoutの恩返し margin倍加太郎 コメントアウトと要素フエーテル IEと魔法のexpression などなど。今の若者に伝えたい昔の話を書いていくカレンダーです。
I'm trying to use the calc() function in a Sass stylesheet, but I'm having some issues. Here's my code: $body_padding: 50px body padding-top: $body_padding height: calc(100% - $body_padding) If I use the literal 50px instead of my body_padding variable, I get exactly what I want. However, when I switch to the variable, this is the output: body { padding-top: 50px; height: calc(100% - $body_padding
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ June 27, 2025 フロントエンド・デザイナーやデベロッパーは、スタイリングや配置、またデザイン性の良いサイトを作成するために CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）を利用します。しばしばページに変化（英: Transition）やアニメーション（英: Animation）を加えるために CSS を利用しますが、まだまだ開発する余地がありそうです。 アニメーションは、訪問ユーザーにとってデザインをよリ理解しやすく、ためになる情報を伝える強力なツールとなるでしょう。ウェブサイト制作で活用でき、よりパワフルな使い方ができる基本原則を今回はご紹介します。 ディズニー社の現場で長年培われた、アニメーションの基本原則 12 個（英: 12 Principles
CSS3で追加されたbox-shadowを用いてボックスの1辺だけに影をつけたいと思います。 ※box-shadow対応ブラウザでご覧ください。 ぼかしの大きさが0の影の場合 単純に影を延ばす方向に影をずらすだけです。 box-shadow: 0 8px 0 #ccc; 右辺だけに影 ぼかしの大きさが0より大きい影の場合 上記と同じようにやると、ぼかした分影がボックスより大きくなっているため、他の辺からも影がはみ出てしまいます。 そこで、box-shadowに”影の広がり”の値を追加することによって影を小さくしてやります。この値は0の場合は省略してしまうのであまり見かけませんが、”ぼかしの大きさ”の後ろに指定します。 box-shadow: 0 9px 12px -9px #222; このように”影の広がり”に”影の大きさ”にネガティブ値を指定することによって、他の辺から影がはみ出なくなり
Appleの新ウェブサイト(2014年9月)では狭い画面の時にグローバル・ナビゲーションを出す二本線のアイコンが表示される。それをタッチするとナビゲーションが表示されると同時に回転しながらバツ印に変化する。同じようなアニメーションをCSSでやってみると意外に面倒くさかった。 Demo: Sandwich 二本線は以下のように擬似要素を2つ使って作った。コンテナーに対して幅を半分のサイズ、高さを6%とした。サイズと位置は全て%で統一したので、コンテナーの幅と高さを指定すれば以下のCSSは変えることなくスケールする。 .sandwich::before, .sandwich::after { box-sizing: border-box; display: block; position: absolute; left: 25%; width: 50%; height: 6%; content
Compress javascript or css code and reduce their size and improve page load times. Quick,easy and free!Best way to compress javascript and css Make your code faster for freeVersion 0.5.7
SVGアイコンを実用するために知っておきたい、リンク周りの記述方法以前書いた「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」という記事でSVGの基本や効率よく使用する方法を紹介しましたが、実際にWebサイト内で使うにはもう少し具体例が必要だなーと思ったのでリンク関連を中心に補足します。基本的な記述方法を覚えて実用化していきましょう！ アイコンフォントから SVG へ！より手軽にベクター画像を表示しよう SVG にリンクを貼るSVG にリンクを貼りたい場合、単純に a タグで svg を囲んでもうまくリンクを貼ることはできません。svg タグの中のオブジェクトを a タグで囲み、xlink:href 属性で URL を指定する必要があります。 <svg ... > <a xlink:href="http://google.com"> <path fill="#1E899D
Licon is Lightness and Useful icons with Pure CSS3.Licon is a simple, useful and lightness pack—icon that made with Pure CSS3 by Siamak Mokhtari at FictionTeam in Tehran, Iran. It has both SASS and LESS versions so it can easily be modified and merged into modern projects. It provides all the useful icons for good design without adding any images or fonts. Also you can add effects of Animate.css o
Vertical align anything with just 3 lines of CSSと横に水平線のあるテキストというCSSテクニックを扱った記事を最近読んだ。どちらも有益なテクニックだが、前者はCSS的で後者はウェブ標準的という印象を持った。 最初に軽く前者のテクニックについて書いておく。後者は日本語の記事なので読めばわかる。 .element { position: relative; top: 50%; transform: translateY(-50%); } Vertical align~はこのようにtransformプロパティーでtranslate()を利用して、縦方向のセンタリングを実現するテクニック。topプロパティーが親要素の高さが基準になるのに対して、transformプロパティーのtranslate()では要素の高さが基準になることを上手く利用している。
My name is Jason Beaird, nice to meet you! 👋 I’m a design leader, UX professional, front-end developer, user researcher, and general web nerd located in Orlando, Florida. I first encountered the Internet through a Lynx text browser in a dial-up bulletin board. I’ve been fascinated by it ever since. While I love great design and designing things myself, I’m also a tinkerer. I enjoy solving problem
Submissions are closed Thank you to everyone who took part in this year's CSSOff! Stay tuned as we work through all the grading.
JavaScript無し(*1)で、スタイルシートで実装するResponsiveデザイン対応のコンテンツスライダーを紹介します。 *1 スライダーの基本機能ではJavaScriptを使用していませんが、iOSに対応させるために使用。 Responsive CSS3 Slider Without Javascript [ad#ad-2] デモ 実装 デモ デモはCSS3に対応した下記のブラウザでご覧ください。 ベスト Firefox フルサポート Chrome, Firefox, Opera, Safari ※各ブラウザの最新版 一部非対応 IE9 ※スライダーの機能は対応しますが、アニメーションに未対応。 デモでは左右のアローと下のボタンで各パネルがアニメーションでスライドします。 ※ウインドウサイズを変更するのが面倒な人用に、上部にサイズ切り替えボタンがあります。 デモ：幅800pxで表
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
