CSSで印刷レイアウトをコントロール
Webサイトを制作する上で印刷された時の見栄えを考慮しなければならないことがたまにあります。 考慮しないでコーディングをしてしまうと印刷時にコンテンツが複数ページにわたってしまい変なところで別ページに分割されることがあります。 それをこんな感じに綺麗に改ページを行うためのHTMLの構成とCSSの組み方を考えてみます。 ※Chromeを使って確認したコードなのでChromeで確認して下さい。 HTML構成 まず、HTMLの構成から考えてみます。 １つのページは<section>タグを使用します。 そして、複数のページを<article>タグでまとめます。 つまりHTMLとしては下記のような構成になります。 <article> <section> <h1>１ページ目</h1> </section> <section> <h1>２ページ目</h1> </section> <section> <h
How to select an element which parent is not specified class?
I want to hide an element if its parent does not have a certain class: HTML <li class="current_page_parent"> <a href="parent.html">Parent</a> <ul class="children"> <li>foo</li> <li>bar</li> </ul> </li> jQuery jQuery("ul.children").hide(); Currently always hides <ul class="children"> regardless of class. I would like to close it only if parent is :not an <li class="current_page_parent">. I've tried
破綻しにくいCSS設計の法則 15 - Qiita
ブラウザスタイルは平坦化しておく リセットCSSはオプトアウト可能にしておく 登場頻度の高い組合せはplaceholderとして登録してから利用する 可能な限り画像はスプライト生成してから利用する それ以上分解不可能なコンポーネントは要素のように扱う コンポーネントは自己完結型のものを使う BEMはDRYになるよう粒度を下げる 可能な限り@extendは利用しない レスポンシブでない場所では、Utilitiesクラスを活用する shame.cssはいつも綺麗にしておく 詳細度または特異性の高いものほど後方に記述する 可能な限り!importantしない 可能な限りハックしない 変数をデザインガイドとして活用する CSSファイルを分割するメリットはほとんどないので一つにまとめる 1. ブラウザスタイルは平坦化しておく 例えば、こういうScrap & Buildは単に通信量のムダ。 * { f
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
