CSSで要素を揃えることは楽しみであると同時に、挫折を経験することがあるかもしれません。CSSはすぐに進化し、新しい仕様はブラウザにどんどん実装されています。 最近主流になっているCSSの整列テクニックは、これまでのものとはまったく異なります。CSS Grid, Flexboxなど、CSSレイアウトを考慮したよりモダンな方法を紹介します。 CSS Alignment Cheatsheet 記事: Demystifying CSS alignment 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 基礎知識: インラインとブロック 要素が含まれるコンテナに指定して揃える コンテナ内の要素に指定して揃える 揃える方法の紹介の前に、まずは基礎知識から。 基礎知識: インラインとブロック 最初に重要なのは、揃えるのがインラインなのか、ブ

A neat collection of various CSS arrows using different styles. See the Pen CSS Arrow by andgatjens (@andgatjens) on CodePen. Animated – ‘Back To Top’ Arrows Two ‘Back To Top’ CSS arrows that look great animated. See the Pen Animated – ‘Back To Top’ Arrows by EricPorter (@EricPorter) on CodePen. Animated CSS Arrows An animated hard left arrow done with only CSS animations. See the Pen Animated CSS

複数のデザイナーで Sketch ファイルを 共同編集・バージョン管理するための 「Abstract.app」ワイワイやっていき#Sketch#CVS#Abstract Abstract というツールを使うと同じ Sketch ファイルを同時刻に別の人が作業・編集→後ほど合体といったワークフローで、共同デザイン作業が行えます。 ブランチやマージといった概念で、「Git」のような作業が Sketch ファイルで行うことができます。複数人デザイナーがいるチームにはとてもオススメのツールになります。差分確認・レビューも行えるので、まさにデザイン版 GitHub ですね。 お一人様利用で導入してもログが残るので良いかも。(でもそれは使える環境であれば TimeMachine で十分な気がする。) Push / Fetch / Status / ラベリング の作業が自動で行われているのもポイントで、

By Naema Baskanderi Last night my small team and I headed out to do a little networking and learn about Design Systems. Being that is was the buzzword of 2017, we were eager to learn how we could create our own. We had heard all the wonderful benefits of creating a design system: saving time, reducing debates, collaboration, adoption, and more. I was excited! All the talks spoke about how to creat

CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。 さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。 そこで、これらの問題を解決するために考えられたのが「CSS設計」です。 今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。 CSS設計とは CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。 最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。 「良いCSS」とは 「良いCSS」の定義として、おそら

前提 リッチなWebサイトが流行る昨今において、CSSやjavascriptなどのコードが複雑化してきました。それにより、長期的に管理していくためにもより構造的なCSS設計をすることが必要です。そのうえで、最低限しておくべき、CSS設計の基礎をまとめてみました。 破綻しやすいCSSの特徴 以下がよくある破綻しやすいCSSの設計です。長期的に管理していくサイトにおいて、以下の要素が少しでも見受けられる場合修正するべきでしょう。 HTML側のコードと同じ構造で作られている場合

CSSの設計は人によって様々で、これが正解というものは無いのですが、何も考えずに作っていくと命名の重複で悩んだり、定義したクラスの使い回しがしづらかったりといった悩みが多くなってきます。これらを防ぐためには、CSSの設計を考えながらコーディングすることが大切です。 目次 CSSで大切なこと ドキュメントの作成 CSS構成について 様々な設計手段 SASS、SCSS コードリファクタリング 最後に CSSで大切なこと CSSで大切なことは CSS Architecture でPhilip Walton氏が述べているように 予測しやすいこと 再利用しやすいこと 保守しやすいこと 拡張しやすいこと で、これらはページが多くなれば多くなるほど重要度が高くなります。 予測しやすいということは、命名規則のルールにより、どのクラスがどういった挙動するかが掴みやすく、修正作業が必要な時にソースコードを追う

CSSはスタイルシート言語です。 プログラミング言語のように記述的(imperative)ではなく、宣言的(declarativ）な言語です。 では良いCSSとはどのようなものでしょうか
？ それはプログラミング言語で良いコード、クリーンコードと言われるものと同じではないかと思います。 クリーンコードは、単純で直接的です。 クリーンコードは、うまく書かれた散文のようにも読めます。 -グラディ・ブーチ CSSはセレクタの命名とその記述方法によってのみ制御されるものです。 その制御はクリーンコードのように「うまく書かれた散文」を目指すべきです。 CSSの原則と設計 CSSはHTMLの見た目を制御する宣言が書かれた文書です。 そしてその設計にはHTMLも含まれるべきです。 CSSの仕組みは単純です。 要素を選択し、定義されたスタイル宣言を適応して見た目を変える。 原則も１つしかありません。CSS