REDLINE MAGAZINE | web制作・デザインに関するさまざまな情報掲載サイト

今更感溢れる内容ですが、CSSカウンタを使って入れ子になってるOLリスト部分に連番を付けたい時のやり方です。 １階層のOLリストならデフォで連番がつくのですが、OLリストが入れ子なった際に１階層目は「1.なんたら」、２階層目は「1-1.なんたら」、３階層目は「1-1-1.なんたら」のように入れ子になってる親からの番号を継承して番号を振りたい、みたいな。あー言葉で説明するん難しいです。前回、本の紹介記事を書いた時に目次リスト作ろうと思って一瞬つまづいたので復習を兼ねて…(；´∀｀) まずは見た目。こんなんです。 実物はこの記事の下の方にあるのでそちらを見てもらえれば良いかと思うのですが、とりあえ >>続きを読む

レスポンシブなデザインを作る際に、単に幅の調整だけではテーブル(table要素)が見難いだけになったりしてどうしようかなーと色々悩んだりしてました。 そこだけメディアによってソースを変えて見やすくするとか、td要素に display:block; を当てて下段に落とすかとか、overflow 使うか、とか…なんか色々と。 CODEPENでそんな時に良さげなサンプルを見つけたので備忘録的な勉強記録。 サンプルページ まずはサンプルから。 内容としてはCSSだけでモバイル環境の場合にテーブルのデザインを変えるというもの。 >>REDLINE MAGAZINE | レスポンシブ対応テーブ >>続きを読む

10年ぶりにHTML・CSSのリファレンス本を買ってみた。 今まで所謂タグ辞典なるものは「詳解 HTML & XHTML & CSS 辞典」を本棚に並べていたのですが（しかも2005年発行の第1版改訂版という古さ…）内容が古すぎるのが何年も前から気になっていて、どこかのタイミングで最新のものが１冊ほしいなーと思ってました。 ということで、この本を買いました。 >>できるポケット HTML5&CSS3/2.1全事典 新しい情報、内容は本でなくても、ネットでその都度検索してそれで事足りるのですが、ネットだと全体を掴みにくかったり、まぁなんていうか、寝る前にゴ >>続きを読む

Sassには様々な便利な関数が揃っています。とりあえずまずは一通りネイティブ関数を確認して、その後、自作関数についても触れたいと思います。最後に「@debug」と「@warn」についても書きます。 Sassに用意されている関数一覧 Sassのネイティブ関数一覧は下記リファレンスで確認できます。 >> Module: Sass::Script::Functions — Sass Documentation 色関連の関数 RGB関連の関数 rgb($red, $green, $blue)赤、緑、青の値から色を作成する。 rgba($red, $green, $blue, $alpha) >>続きを読む

「@at-root」はSassのバージョン3.3で追加された機能で、記述した場所より上のセレクタのネストを解除するというもの。何に便利なのかイマイチ掴めていないのだけれども、勉強します。 @at-root とりあえず「@at-root」の使い方書きます。 こんな感じでルールセットの中に「@at-root」をつっこめる。 上のサンプルは何の役にも立たないけれども、記述した場所より上のセレクタのネストを解除する、ということで、.parentのネストを解除して階層が1つ上がってるのが確認できる。上の例ではネストは2階層だけれども、３階層でも４階層でも「@at-root」が使われている箇所はネストが解 >>続きを読む