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

メニューをスキップして本文へ

旧ブログナビ (open/close)

タグ : css

入れ子OLリストにCSSのカウンタで番号を振る方法

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

CSSのみでレスポンシブなテーブルデザインを。

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

[本]できるポケット HTML5&CSS3/2.1全事典

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

Sassの勉強 #10 関数一覧(Ver.3.4) と自作関数

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

Sassの勉強 #09 @at-root (Ver.3.3以降)

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

このページの一番上へ