この記事は下記URLにお引越ししました！ http://diet-dev.com/2017/05/28/box-sizing/

疑似要素ってありますよね。僕は技術書で初めて見ました。最初見た時、「え、なんだ、これ？」って思いませんでしたか？ですが覚えると、とっても便利なのでさっそく使いこなしましょう！ 擬似要素とは MDNのガイドラインには、下記のように書いてあります。…

セレクタの中でも使い勝手がいい擬似クラス nth-child と nth-of-type とは？ 使い勝手がいいことを言う前に、まず、わりとどうでもいい疑問かもしれませんが、「nth」の言葉の意味を紹介します。n はnumberという意味で、 th は、4th, 5th, 6th...で使われ…

CSSは、簡単に書けるメリットがある一方、非常に破綻しやすいデメリットもあります。 保守性が高まる、CSS設計の代表例をメモします。 HTMLの要素名にスタイルを指定しない リリース後や改修後も、後から部分的な変更や、ブラウザやサイトの仕様変更によって…

今後、フロントエンド寄りの業務が多くなるので、改めて知らなかったことをまとめておこうともいます。 （知識の定着も兼ねて）Javascriptも合わせて、HTML5,CSS3を改めて勉強してみようと思います。まず、ちょっと前にこの本「スラスラわかるHTML&CSSのきほ…

CSSでサイト制作をする際、避けては通れない要素を簡単に書いておきます。 知っておけば、不用意な見た目の崩れを防げます。 擬似要素（Pseudo-elements） 要素内の特定の文字や行に対してスタイルを指定したり、文字や画像を追加することができます。 w3g.j…

属性セレクタ class属性やid属性も含め、特定の条件を満たす属性（href,targetとか）で指定できるので、 動的に吐き出される要素と相性が良いので重宝します。 擬似要素・擬似クラス CSS3セレクタで追加された「:not()」 W3Cでは「E:not(s)」という風に説明…

よりよい設計のゴールとして、GoogleのエンジニアであるPhilip WaltonさんのBlogを引用すると。 予測しやすい事（Predictable） 再利用しやすい事（Reusable） 保守しやすい事（Maintainable） 拡張しやすい事（Scalable） 予測しやすい事 これは、思った通…

リンクは、他のページのURLを指定するだけでなく、特定の場所まで移動させることもできます。 リンク先の指定には、タグについているCSSのid属性を使用します。 <a href="saki.html#aaa">aaaの位置へ遷移</a> リンク元のページのこのaタグをクリックすると、 下記のページだけでなく、こ…