preタグで囲ったテキストは自動改行されないため、文章量が多いとコンテンツ領域を越えてしまったり、越えないように overflow: auto などを指定するのですが、利用規約などをpreでマークアップしたときにはちょっと見難いものになってしまいます(縦横のスクロールバーでます!)。 そんなときに使えるのがpreタグで囲ったテキストも自動改行させるスタイルシートです。記述はとても簡単で以下のコードをpreタグに対して指定してあげるだけです。
モーダルを表示させたとき、何も考えずにコーディングするとモーダルをスクロールしたいのに背景までスクロールされちゃう、 なんてことに陥りがち。 (モーダルの上端・下端を超えるスクロールをしたときや、モーダル外にカーソルを置いてスクロールしたとき等) これを防ぐには、モーダルが表示されているときは背景要素をfixedにするのが良さげ。 <div id="wrapper"> <p class="open"> <button>open modal</button> </p> </div> <section id="modal"> <!--modal content --> </section> // include jQuery var current_scrollY; // OPEN MODAL $( '.open button' ).on( 'click', function(){ curre
リスト要素で実装したアイテム間の区切り線の最後だけ取り除く簡単なコード、リストの各アイテムをカンマ区切りで配置させるコード、テキスト表示をすべてのデバイスで最適化するコードなど、サイトやブログに役立つ便利なCSSのテクニックを紹介します。 CSS Protips -GitHub 当記事は、2015/11/4に公開した記事に追加分を加えたものです。 更新: 2016/3/7 13, 14, 15を追加。 更新: 2016/4/13 16, 17を追加。 CSS ProtipsのライセンスはCC0 1.0で、個人でも商用でも無料で利用できます。 スタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。 1. リスト要素の最後だけ区切り線を削除 2. body要素に「line-height」を加える 3. 天地の中央に配置 4. リストをカンマ区
領域をはみ出したときに三点リーダー(…)で省略するtext-overflow: ellipsis;は、スマホサイトでは普通に使っていたけど、PCでは数年前に使おうとしてなんかのブラウザでダメだった記憶があって、使えないものとばかり思い込んでいた。 でも、ふとCan I use CSS3 Text-overflowをみたら、めっちゃ対応してた!IEなんて6から対応してるし、Firefoxも7から使えるようになってた。 実際に書いてみたら、いつものこんな感じのコードで普通に使えました。 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 昔、JSでなんとかそれっぽくできないかみたいに、誰かががんばっていたのはなんだったのか。 わたしみたいに使えないと思い込んでて、意外としらない人いるかもしれないので、ブログに書いてみま
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く