タグ

cssに関するk_7016のブックマーク (4)

  • これからのCSSはmargin禁止!?CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた!

    これからのCSSはmargin禁止!?CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた! 白石 俊平(HTML5 Experts.jp編集長) こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大!CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか? 矢倉: 昨年(2

    これからのCSSはmargin禁止!?CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた!
    k_7016
    k_7016 2017/10/27
  • よこ並びのCSS。

    スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。 よこ並び? そう、よこ並び。 例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏(ひとえ)に「よこ並び」と言えど、CSSにはそのやり方がたくさんあるんです:o。 導入 この記事で紹介するよこ並びの方法は以下の通り。 CSS歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float(フロート) 要素を左右へ寄せるためのプロパティ。 後続する文章(テキスト)などのインラ

    よこ並びのCSS。
    k_7016
    k_7016 2017/02/16
  • レスポンシブデザインのために resize イベントを使うのはやめて matchMedia メソッドを使おう - ひだまりソケットは壊れない

    レスポンシブデザインのために CSS メディアクエリを使うことが多いと思います。 CSS 側だけで完結したらいいのですが、JavaScript 側でも画面サイズの変更を検知したかったり、画面サイズ以外のメディアクエリ相当のことをしたくなったりすることはありますよね。 画面サイズの変更自体は window に発生する resize イベント (window.onresize イベントハンドラ) で検知できますが、CSS メディアクエリとこれを組み合わせてレスポンシブ対応しようとすると以下の問題がでてきます。 ウィンドウサイズ変更時に resize イベントが高頻度で発生するので、resize イベントのリスナでコストのかかる処理を行うのはよくないとされる。 (Throttling することが推奨される。) 参考 : resize | MDN CSS メディアクエリと完全に対応するものではない

    レスポンシブデザインのために resize イベントを使うのはやめて matchMedia メソッドを使おう - ひだまりソケットは壊れない
  • Inline Layout

    キンドリルはAWS 環境におけるビジネスアジリティ加速、セキュリティ統制を実現する開発者向けの新たなソリューション " Kyndryl Developer Services " の提供を開始しました。 このサービスはAWSクラウド環境の設計、構築、運用を包括的に支援するプラットフォームソリューションであり、AWS環境の自動構築を可能とする設計済のテンプレートを提供します。 金融リファレンスアーキテクチャを軸に、様々な業種で活用いただけるテンプレートを順次拡大し、開発者向けポータルを通してインフラ構築の負荷を軽減します。 サービスは特に、開発現場で以下のようなお悩みをもたれているお客様におすすめです。 セキュリティ:クラウド環境特有のセキュリティやコンプライアンス維持を考慮した設定またアップデートへの対応 最新情報への対応:新サービスのリリース、セキュリティ対策や法規制の変更など、日々更新

    Inline Layout
    k_7016
    k_7016 2015/02/21
  • 1