mkasumi.com


1月のa-blog cms DAYでも言っていたのですが、ユニットグループがレスポンシブしない時代からレスポンシブ対応するために変わったように、レスポンシブ対応により適するためにも、もう少し変わった方が使いやすくなるんじゃないかなと個人的に感じています。

そこで、社内勉強会の当番が回ってきて社内の人の意見を聞けるいい機会だったので、現状の問題をまとめて、解決策になりそうなCSSの実装方法を調べてみました。

まずは現状の問題を整理する

機能の問題

左カラムよりも右カラムの方がコンテンツ量が少ない時に要素が回り込んでしまいます。


左カラムよりも右カラムの方がコンテンツ量が少ない時に問題


上記の問題に対して、対策としてユニットの配置を「全体」を指定して、3カラムの間にhrを挿入してフロート解除していたのですが、この場合に文章量によってはPCでは3カラム、タブレットでは2カラム、スマートフォンでは1カラムが難しくなります。


PCで3カラムをタブレットで2カラムにしようとするとレイアウトが崩れる


人の使い方の問題

そもそもこの「全体」の機能は直感的に使えるものではないんじゃないかとも思いはじめてきました。


正直ユニットグループを普段から使ってないと忘れがちな機能


ユニットグループ、このままでいいの?という考えがすこしよぎってしまったので、新しいCSSのプロパティも含めて、対応策を検討してみました。

「a-blog cmsのユニットグループに5種類のグリッドシステム方法を検討する」のつづきを読む


Tag:a-blogcms CSS CMS 

Posted by 森田かすみ at 17:11  Permalink

OOCSS、BEM、SMACCSなどのclassの命名規則があるのですが、先日AMCSSという命名規則について書いているブログを拝見しました。ちょうど良いタイミングに私が主催している名古屋マークアップ勉強会を開催する予定だったので、実用的なのかを調べてみました。

「AMCSSという命名規則について」のつづきを読む


Tag:CSS HTML 

Posted by 森田かすみ at 09:20  Permalink

現在、たくさんのCSSフレームワークで以下のようなCSSのbox-sizing: border-box;プロパティを使う方法が利用されています。

.acms-col-6 {
  float: left;
  width: 50%;
  padding: 0 10px;
  box-sizing: border-box;
}

簡単に手法を説明しますと、box-sizing: border-box;プロパティでpadding: 0 10px;で指定している左右10px分をデフォルトではwidthの外として計算しているところをwidthの中として計算し、結果として左右に10px分の空白をあけたままレスポンシブできるようになります。

この手法の欠点としては、背景画像・背景色を指定するとはみ出してしまうことにあります。


元画像

赤いエリアがはみ出ている部分

2つめの画像は1つめの画像と同じソースコードの表示です。2つめの画像の赤いエリアでは揃っていない部分を表しています。

画像を見ると、padding: 0 10px;で左右に隙間を10pxあけている部分にも背景色があたってしまっています。

解決方法

この背景色をあたらないようにするには、divを入れ子にする方法でも良いと思うのですが、CSSで解決するにはpaddingの代わりにborderを使います。

「グリッドシステムを使ったとき、背景色・背景画像をはみ出ないようにする」のつづきを読む


Tag:CSS 

Posted by 森田かすみ at 10:55  Permalink

HTML5NAGOYA#14で今回はテーマが「フロントエンド入門」ということで、SVGについて発表しました。

スライドはこちらです。

「HTML5NAGOYAで「使う前に知っておきたいSVGのこと」を発表しました」のつづきを読む


Tag:SVG CSS HTML セミナー 

Posted by 森田かすみ at 21:26  Permalink

CSSのアニメーションやSVGを勉強している間に、SVGもアニメーションできることを知ったので触ってみました。

SVGでアニメーションさせるには3つの方法があります。

  • SMILアニメーション
  • Javascript
  • CSSアニメーション

どんなことができる?

hoverしたときの動きとか、SVGのパスで特殊な表現ができるようになる。

普段使っているCSSでもアニメーション事態は可能なので学習のハードルが低い。

「SVGのアニメーション」のつづきを読む


Tag:SVG CSS 

Posted by 森田かすみ at 13:28  Permalink

プロフィール

森田かすみ

名古屋のWeb制作会社でマークアップエンジニアとして働いています。マークアップ勉強会名古屋という勉強会の主催もやっています。

  • はてなブックマーク

カテゴリー