タグ

web制作とcssに関するtoriirotのブックマーク (2)

  • 知っておきたいCSS設計法 | 第1回 OOCSSの基本

    知っておきたいCSS設計法 第1回 OOCSSの基 HTMLテンプレートを設計する上で、基礎と考えられる概念のひとつOOCSSを取り上げます。オプジェクト指向のCSSとは何か? 今回はその考え方の基をまずおさえましょう。 はじめに このシリーズでは、OOCSS(オーオーシーエスエス)、BEM(ベム)、SMACSS(スマックス)という3つのCSS設計概念の概要を解説します。HTMLCSSをどのように書いていけばよいかは、過去に「CSSの設計」シリーズにまとめました。今回のシリーズは、その2014年度版とでもいうような内容になっています。 というのも、CSSの設計を書いた頃と比較すると、さまざまな設計概念が広く知られるようになったものと思います。今回紹介するBEMやSMACSSが、その代表です。また、CSSのプリプロセッサSassのバージョンアップでは、BEMを意識したような機能なども追

    知っておきたいCSS設計法 | 第1回 OOCSSの基本
  • 【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー(…)にする方法いろいろ | Recruit Tech Blog

    ランディングページといったコンテンツもレイアウトも全て決め打ちで成立するようなものはさておき、多くの Web サイトおよびアプリケーションは、いかなる分量のコンテンツであろうと柔軟に受け入れて表示出来るように設計・デザインされなくてはなりません。 しかし、全ての文字列を表示するには長過ぎてレイアウトが崩れてしまうといった場合には、何らかの方法で文字列を省略する必要があります。一昔であれば RubyPHPJava などサーバーサイドで文字列を切り捨てるなどの加工をしてからフロントエンドに返すという方法が常套手段として用いられていました。しかし、これでは昨今のワンソースによるレスポンシブデザインといったスクリーンサイズに応じて動的に表示領域が変わるようなデザインに対応しきる事が出来ません。PCサイズの表示領域に適した文字数を返したとしてもモバイルサイズの表示領域がそれと同じとは限りませ

    【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー(…)にする方法いろいろ | Recruit Tech Blog
  • 1