【Labs】親要素の横幅より長くなるテキストを省略する方法
こんにちは（・∀・） テキストが親要素の横幅よりも大きくなる場合に改行なしで省略表示し、更にマウスオーバーで内容を全て表示させる方法をご紹介します。 今回のサンプルもCSSだけで実現できます。 sample それではサンプルをご覧ください。 demo 使用するCSSです。 text-overflow:ellipsisで表示を省略します。 CSS h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 省略した内容をマウスオーバーで表示させるには、その親要素にtitle属性を使って内容を記述します。 HTML <table> <tr> <td title="https://www.webdlab.com/html/">https://www.webdlab.com/html/</td> </tr> </ta
【2019年度決定版】レスポンシブデザインのブレークポイントはこれで決まり！
こんにちは（・∀・） 昨年【2018年度決定版】レスポンシブデザインのブレークポイントはこれで決まり！という内容の記事を投稿しました。 基本的な考えは変わってません。細かな指定で表示したい場合は前回ご紹介した通りの設定が良いと思っています。 しかし、管理することを考えると前回ご紹介したブレークポイントの数では手間が掛かってしまうのも事実。 なので今回、ちょっと多かったブレークポイントを少し減らしてみることにしました。 前回投稿した記事では作ったブレークポイントの数は10個。 10個と言っても考え方としてはメジャーブレークポイントはモバイルとPCの境目の835pxの1つです。 しかし、10個あるのに変わりはなく、また管理の手間を考えるとやはりブレークポイントは少ない方が良い。 ということで今回、ブレークポイントは415pxと960pxに決定しました。 0px 〜 414px @media (
【CSS3リファレンス】CSS3セレクタ
See the Pen XdNGPO_css3-selector_demo8 by Webデザインラボ (@webdlab) on CodePen. 1番目4番目を黄色、2番目5番目をピンク、3番目6番目を青に指定しました。 3-3. 要素:nth-last-child() ul li:nth-last-child(2n) { } 同じ親要素の中にある子要素の終わりから数えてn番目の要素に適用します。書式は:nth-child()と同じで、odd、evenといったキーワードを使用して奇数と偶数で指定したり、何番目だけ指定するという様な事ができます。 サンプル See the Pen BKQExOcss3-selector_demo9 by Webデザインラボ (@webdlab) on CodePen. この疑似クラスは後から数えるだけで:nth-child()と書式は同じです。 3-4.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
