CSS Alignment CheatsheetCSS Alignment Cheatsheet Go read the full article on alignment Content Distribution Control the alignment of a box’s content within itself. Flexbox
Bootstrap と BEM を組み合わせた CSS 設計パターンについて考える | Recruit Tech Blog
前置き - CSS 設計が難しい件について 誤解を恐れずに言うならば、CSS は変数も関数も条件分岐もない、ある種ゆるふわな言語（仕様）といえます。そのためプログラミング言語のように記述ミス一つで全ての挙動が止まるなんてことはありませんし、いくら冗長に記述しようがブラウザ上での挙動に差異が生まれることも殆どありません。ちょっと嗜めばそれっぽいものが作れてしまうので、マークアップエンジニアのいない小規模体制の組織であれば、サーバーサイドエンジニアやデザイナーが片手間で習得して実装してしまうというのも珍しいことではないでしょう。それでも良かったのかもしれません。これまでは…。 片手間で学習した知識というのはなかなか体系化されないものです。CSS も御多分に漏れずプログラミングのテクノロジーは日進月歩なため、その時は最新だった技術が僅か一年も経たないうちに廃れてしまい、バッドノウハウ化してしまう
BEM を使うべき5つの理由（なぜ BEM が G.R.E.A.T といえるのか） - Frasco
CSS は、比較的簡単に使いこなすことができます。しかし、それを使い続け綺麗な状態を長期的に保つこととは全く別の話です。知らず知らずのうちに乱雑になっていきます。ありがちですよね？そんな時、命名規則の出番です。様々な選択肢がある中で私が選んだのが BEM なのです。 BEM とは何か BEM とは、命名規則の一種で、モジュラーでメンテナンス可能なスタイルを書くことができます。 BEM は、Block-Element-Modifier の略語で、クラス名は3つ[^1]のパートから成ります。実際の表記は block__element--modifier となり、Block から始まり、次に Element（アンダースコアが2つ）、そして最後に Modifier が続きます（ダッシュが2つ）。 画像1：BEM で命名されたコンポーネントの例 Block（ブロック） Block は、独立しており再
破綻しにくい CSS 設計手法と命名規則 | murashun.jp
［ ＋ expand ］CSS が破綻する理由セレクタに詳細度がある問題スタイルが子要素に継承される問題同じセレクタを多重定義できる問題スタイルが複合的に適用される問題破綻しにくい CSS 設計とはOOCSS構造と見た目の分離BEMSMACSSベースルールレイアウトルールモジュールルールステートルールテーマルールFLOCSSFoundation レイヤーLayout レイヤーObject レイヤーComponent レイヤーProject レイヤーUtility レイヤー禁止・非推奨・許容・推奨まとめ関連記事CSS が破綻する理由 CSS は以下のようなシンプルなフォーマットで構成されます。 selector{ property: value; } HTML 側の内容とセレクタがマッチすればスタイルが適用されます。このように CSS はとても単純な仕組みですが、その単純さゆえに大規模な実装
あなたの知らない CSS ベストプラクティス - Frasco
React 、Angular 、Vue.js などの一般的なフレームワークを使用してアプリケーションを構築している人にも、スタイルの追加は必要です。使用するテクノロジーによっては、スタイルを特定の記述方法で書くことが求められるからです。たとえば React なら、コンポーネントの性質上、CSS Modules を使ってスタイルを記述する方が良いでしょう。新しい CSS の機能を使いたいのであれば、 CSSNext をおすすめします。Sass や LESS のような、古き良き CSS プリプロセッサのことも忘れてはいけません。あなたは、こう思っているかもしれませんね。ツールの数だけ記述方法が存在するに違いない・・・。そうですね、その通りです。でも、基本は同じなんですよ。 この記事では、CSS Modules や Sass / LESS を使用するかどうかにかかわらず、堅牢かつメンテナンス可能
細かすぎるけど伝わってほしい私的BEMプラクティス30（ぐらい）
BEMのいいところは、それが何者なのかが明白ということに尽きる。とある要素を見たときに、そのスタイルがどこに書かれているのか、何を表しているのかがクラス名を見ればわかる。手を入れる際も、どこに追記すればよいのか、どれくらいの影響を及ぼすのかの大部分が推測できる。 レスポンシブ・デザインと相性がいいとか、流行りのコンポーネント指向と相性がいいなど、BEMの良さは他にもいくつか挙げられるけど、決定的なのは明瞭さであると思う。 BEMを使いはじめてかれこれ３，４年くらい経った。その間に色々な命名規則や設計思想が登場してきたけれども、今のところは浮気する程の魅力を他に感じることもなくBEM一筋でやってきている。ただし実践するにつけて、より明瞭で破綻しづらい設計を実現するために、様々な制約やガイドを設けてやってきたので、「もともとのBEM」からは多少なり離れているかもしれない。 ただし、それはBEM
stylelintを使い始めたので設定例など (2016年9月更新) - yuw27b’s blog
※2016年9月13日更新：stylelintのアップデートに伴い、ルールの記述方法が古くなっていたものがありましたので、訂正しました。 stylelintって？ 名前のとおりCSSのlintツールです。 設定したルールから外れた書き方をすると警告してくれます。 CSSを書くにあたって、インデントにタブを使うのかスペースを使うのか、スペースなら何文字分にするのか、「{」の前にスペースを空けるかどうか、といった「書き方」を統一する目的で使います。バリデーション（CSSの標準仕様に準拠しているかどうかの判定）は行いません。 公式サイト：http://stylelint.io/ 日本語情報だとこちらが分かりやすかったです：CSSのLintをstylelintにする - Qiita stylelintの特徴 ルールのカスタマイズができる ルールセットの使い分けも簡単 CSSのlintツール自体は他
10 Pure CSS Call-To-Action Button Collections - 1stWebDesigner
Every website and landing page should have a clear call-to-action button. This encourages the user to click and perform an action, whether to make a purchase, start a trial, or sign up for an account. There is no single best way to design a CTA and you can use many different styles, from large gradients to ghost buttons, and everything in between. But other factors like color, size, and position a
CSSでのラジオボタン・チェックボックスのカスタマイズを詳しく説明してみた | ホームページ制作 SEO対策【広島 岡山 山口 福岡】エム・フィールド広島オフィス
こんにちは、エムフィールド広島オフィスのフロントエンドエンジニアのかみーゆです。 ラジオボタンやチェックボックスってブラウザー依存のデフォルトデザインだと少し味気ないですよね？ 今回は、CSSでラジオボタンやチェックボックスをオリジナルデザインでカスタマイズする方法について根掘り葉掘り説明します。 ズバリ、labelタグを使う ラジオボタン や チェックボックス などに使用するinputタグはcssで装飾できないという難点があります。 そこでラジオボタンやチェックボックスを装飾するのに役立つのが「 label 」タグです。 「 label 」とは、 チェックボックス 、 ラジオボタン などの 構成部品とその項目名を関連付けるためのタグ です。 関連付けを行えば、ブラウザでlabelタグをクリックしただけでも、その構成部品をクリックしたものと同じ動きをしてくれます。 指定方法その1・
flexbox[CSS3]で実践的なレイアウトを。実際の現場で使うflexboxの4パターン
Bruno Profile Work 制作の方針について Brunoが生み出すWebサイトは、文章や写真を活かすためのデザインをご提供します。訪問者へアピールするためのコンテンツがメイン。この意識のもと、適切な見せ方を追求しながら制作しております。 制作料金 基本WordPressサイトの制作となりますが、ご希望に合わせてHTMLの静的サイトの制作ももちろんお請けさせていただきます。また、デザインだけやコーディングだけといった制作工程単位でのご依頼も対応しております。 よくある質問 BrunoのWebサイト制作では、できるだけクライアント様にご不安を与えることなく、お問い合わせ時から制作完了時、その後の運用までサポートさせていただいておりますが、その際によく頂くご質問についてご紹介致します。
![flexbox[CSS3]で実践的なレイアウトを。実際の現場で使うflexboxの4パターン](https://cdn-ak-scissors.b.st-hatena.com/image/square/87142ee80d21ebc47963365cae3a8fa5e9cd9820/height=288;version=1;width=512/https%3A%2F%2Fweb-bruno.com%2Fwp-content%2Fuploads%2F2016%2F10%2Fflexbox.png)
コピペで実装OK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ
ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる HTML/CSS スニペットをまとめてご紹介します。ただいま流行中のWebトレンドの実装を可能にする最新レイアウトから、どんなプロジェクトにも活用したくなるエフェクトやテクニックなどを中心にまとめています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 コピペでOK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ 01. Fixed Images That Fades as You Scroll 画面を２分割し、スク
BEMに基づいたCSS命名規則について考えてみた - nomal note
皆さんこんにちはnomalです。 最近ブログをはじめたから余計にMacBook Airほしいなーなんて考えてます。MacBook Proを購入して五年目だけど、あと三年くらいは頑張ってくれそう。Mac貯金はじめようかな。 さて、今日はサイトをコーディングするにあたって必要なマークアップについてです。 マークアップエンジニアという役職があるくらい、マークアップって重要！と一本新規で１ページコーディングを経験した私は、心の底から作ってる最中に感じました。マークアップ構成をグダるとCSSがどんどん長くなってしまって、一ヶ月後に修正が入った時に「あれ？ここなんでこんなプロパティ入ってるんだっけ？」とか「そもそもどこを修正したら良いのか分からない！」なんて事態に作った本人が陥りがちです。 故に、他の人が代理修正するときに激しく時間をロスする可能性だってあるわけです。 自分だけじゃなく、他人の時間を奪
Magnific Popup を使ってみる | Web Design Leaves
Magnific Popup を使ってみる CATEGORY: jQuery | TAG: Googlemap, Lightbox, Youtube, プラグイン, レスポンシブ 2014年2月7日 Youtube の動画を Lightbox のようなモーダルウィンドウで表示できるプラグインを探していたところ見つけた「Magnific Popup」。レスポンシブ・デザインに対応している上に機能も豊富で Goole map なども表示可能。使い方などに関するメモ。 目次 Magnific Popup のダウンロードと読み込み Magnific Popup を「配布ページ」からダウンロード（ページ右側の「Download ZIP」から） ダウンロードすると「dist」というフォルダがあるのでその中の「jquery.magnific-popup.min.js」と「magnific-popup.c
CSSフレームワーク30選！デザイン含めて一括総まとめ
CSSフレームワークを使うのは、すでに一般的になっている。 CSSはよくできたWebページデザインシステムだが、大規模なアプリケーションに弱い、車輪の再開発のような部分も多いという弱点がある。 そんな弱点を補ってくれるのがCSSフレームワークだ。フレームワークを使うことで作業時間は大幅に減り、品質も上がる。 しかし、一方で同じCSSフレームワークを使うと、同じようなデザインになりがちという欠点もある。 そこでこのページではCSSのフレームワークを30種類ご紹介する。人気のものからマイナーなものまで幅広く揃えてみた。 CSSフレームワークを選ぶときに参考にしてほしい。 CSSフレームワーク大体の使い方 CSSフレームワークの使い方は大体どれも同じだ。 ステップ１ CSSを読み込む サイトに行って、CSSとあればJavaScriptをダウンロードする。link rel でサイトに組み込んで準備
2015年7月時点。レスポンシブCSSフレームワークを一覧で紹介 - webhack / ウェブ技術が好き
2015-07-10 2015年7月時点。レスポンシブCSSフレームワークを一覧で紹介 CSS ウェブデザイン レスポンシブデザイン レスポンシブデザインを実装するのに利用するCSSフレームワークが重量級から軽量なもの、全てコミコミのものから必要最小限のものまで多数登場しています。数が多くなって分かりづらくなってきたのと、更新されなくなって放置気味のCSSフレームワークもでてきました。ここではCSSフレームワークをリンク集の形式でまとめます。 はじめに、用途別おすすめレスポンシブCSSフレームワーク（2015/7月時点） 失敗しない選択肢 = Bootstrap Bootstrapが重たすぎて好きじゃない = Pure シンプルなBootstrapがほしい = Semantic UI レイアウトだけレスポンシブにしたい = skeleton 1.メジャーなCSSフレームワーク Bo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://geechs-magazine.com/tag/lifehack/20160513
Web制作者がチェックしておきたい、軽量で読み込みが速いCSSのフレームワークのまとめ
CSSで背景画像を右から（下から）指定する方法 | キタックCGソリューションセンター｜Webマーケティング
現場で使えるレスポンシブ対応モーダル・ポップアップjQueryプラグイン「Magnific Popup」
http://www.hp-stylelink.com/news/2013/09/20130912.php
