Qiita記事を見ていると「なんとなくで書かないで！HTML5を書く時に気にしてみたいタグごとのお約束 - Qiita」で、HTMLを書くときの注意点などが紹介されていました。 ただ「aタグの中にaタグ」の箇所で、JSを使う方法が紹介されていました。 これはJSは使わなくてもできます。 気になったので書いてみました。 まず、aタグの中にaタグはどういう状況か？ 例えば、カード全体がクリッカブルエリアになっており、子の要素にもリンクが必要な時です。 HTMLで表現するなら、下記の状態。 しかしHTMLの仕様上、aタグの中にaタグは含められません。 仕様を無視していれても、動作しません。 <a href="" class="card"> <div class="card-inner"> <h1 class="card-title">Title Text</h1> <ul class="card

Web制作を長くやっている人なら、IE6の「要素拡張問題 (Expanding Box Problem)」を知っているのではないでしょうか？ この「要素拡張問題」は、要素に指定した横幅を無視して、要素の内容が要素の幅を押し広げてしまうというものです。 CSS Grid Layoutのカラム (列) でも、同様の問題が起こったため、その解決方法をご紹介します。 カラムの幅が拡張される問題が起こるケース次のようなコードで問題は発生します。 … <style> ._grid { display: -ms-grid; display: grid; -ms-grid-columns: auto 50%; grid-template-columns: auto 50%; -ms-grid-rows: auto; grid-template-rows: auto; } ._cell-1 { -ms-gr

JSを使わずにCSSだけで、 「要素の個数に応じてスタイルを出し分ける」やり方の紹介です。 前にどこかのサイトで紹介されてたのですがブックマークなかったのでメモです。 Demo "個数に応じたスタイルの出し分け" http://codepen.io/skwbr/pen/JKbNMP 説明 個数に応じてスタイルを変える場合、下記を組み合わせて使います。 :nth-last-child 擬似クラス … 最後から数えて何番目か 間接セレクタ ~ … それ以降の後続する弟要素(同階層) <ul> <li class="item"></li> <li class="item"></li> <li class="item"></li> : </ul>

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! What is “Float”? Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called “text wrap”. Here is an example of

CSS Flexboxも、margin: auto;も、よく使用していると思います。 しかしよく使用し、なんとなく知っているけれど、本当は理解できていないことがあるかもしれません。 CSS Flexboxとmargin: auto;の自動マージンがどのように相互作用するかを紹介します。ヘッダやナビゲーションなど、微調整が必要なレイアウトに役立つテクニックです。 The peculiar magic of flexbox and auto margins 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 しっかりと理解しておく CSS Flexboxとmargin: auto; しっかりと理解しておく フロントエンドの制作をしていると、知らないことが何なのかを分かっていることがあります。必要とするCSSは十分知っているので、それをど

サイトが大きくなればなるほど未使用セレクタとか増えちゃってCSSで余計な容量食っちゃうらしい。 そんな時に、ページごとに使っていないセレクタを見つけて削除したい。 あとはページをリニューアルするときにフルスタックではなく、徐々に綺麗にするときに使えそう。 Chromeの仕様が変わり、開発者ツールの「Audits」項目から調べられなくなったので、 ２点の方法を紹介。 開発者ツールの「Coverage」機能 Unused CSS 開発者ツールの「Coverage」機能 Macの場合は、ショートカットが「Command + Option + I」 windowsの場合は「Ctrl + Shift + I」　で開く デベロッパーツール上の開発者ツール右上に表示されている「・・・」が縦に並んだ設定ボタンをクリックし 「More tools」から「Coverage」を選択 click the reco