[B! CSS] yayocanのブックマーク

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

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

yayocan 2019/12/06

CSS

リンク

CSSセレクタのチートシート｜37パターンを一覧で解説

CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。

yayocan 2019/02/08

リンク

レスポンシブイメージ | Web Design Leaves

以下の情報の方が新しいものになりますので、よろしかったらご覧ください。「レスポンシブ Web デザイン/レスポンシブイメージ」スクリーンサイズに適した画像を読み込む方法のメモ。１つの大きな画像をフルードイメージ（下記）で表示する場合、スマートフォンでもデスクトップ用の大きな画像を読み込むことになり表示が遅くなる。フルードイメージによる画像の調整フルードイメージ（Fluid Image）ブラウザのウィンドウ幅に合わせて画像のサイズをフィットさせる方法。ウィンドウサイズより大きい画像でも、ウィンドウサイズ（または親要素の幅）に応じて、縦横比を保持したまま自動的に画像が拡大・縮小するようにする手法具体的には、img 要素に対して以下のスタイルを適用する。

yayocan 2017/01/13

画像の下の隙間をなくす

CSS

リンク

背景画像を使ったフルードグリッド - WEBサイト制作の勉強

画像を可変（フルード）にするには、２種類のやり方があります。 imgタグで表示している画像にはフルードイメージの設定 img { max-width: 100%; } background-imageの場合、少し注意が必要です。imgの場合、img自身が幅や高さを持っているので、敢えて幅・高さを確保する必要はありませんが、背景画像の場合は背景画像を表示させる領域を確保する必要があります。固定値であれば、PXで指定するだけですが、フルードにしたい場合は値を%にしないといけません。幅に関しては%指定で問題ないですが、高さを%にすると色々と問題が出て来てしまいます。そこで、高さに関しては%指定せずに代わりにpadding で画像の表示領域を確保する方法をとります。 paddingはtopだろうがleftだろうがbottomだろうが、その要素の幅を基準とするので、その要素の横幅に対して画像の高さ

yayocan 2017/01/11

フルードイメージ

CSS

リンク

phiary

今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも一応残ってるので, がっつり使わせて頂いてる次第です.

yayocan 2017/01/10

CSS

リンク

CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld

実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ

yayocan 2016/08/18

アニメーション

CSS
css3

リンク

CSS の :after でアイコン追加と上下中央配置

スマホのリンク付きのリスト一覧などでよく見る右側のとかのアイコンが付いたリスト。アイコンが丁度各リストの中央に来るようにする方法です。擬似要素 :after を利用IE6 を対応させるなどの条件のために、これまでは直接 img 要素で入れたり background-image として入れることが多かったアイコンですが、スマホ対応だったりモダンブラウザのみの対応の場合は、擬似要素の :after が活用できるようになりました。 CSS2 で導入された時点ではコロンは１つでしたが、CSS3 ではコロンが2つの ::after も利用できるようになっています。擬似クラスが増えた際に擬似要素と擬似クラスを明確に分けるために、 after や before などの擬似要素はコロン２つとなりました。現状では :after も ::after もどちらも利用できる状況のため、どちらを使っても大丈