旧ブログナビ (open/close)
今更感溢れる内容ですが、CSSカウンタを使って入れ子になってるOLリスト部分に連番を付けたい時のやり方です。 １階層のOLリストならデフォで連番がつくのですが、OLリストが入れ子なった際に１階層目は「1.なんたら」、２階層目は「1-1.なんたら」、３階層目は「1-1-1.なんたら」のように入れ子になってる親からの番号を継承して番号を振りたい、みたいな。あー言葉で説明するん難しいです。前回、本の紹介記事を書いた時に目次リスト作ろうと思って一瞬つまづいたので復習を兼ねて…(；´∀｀) まずは見た目。こんなんです。 実物はこの記事の下の方にあるのでそちらを見てもらえれば良いかと思うのですが、とりあえ >>続きを読む
レスポンシブなデザインを作る際に、単に幅の調整だけではテーブル(table要素)が見難いだけになったりしてどうしようかなーと色々悩んだりしてました。 そこだけメディアによってソースを変えて見やすくするとか、td要素に display:block; を当てて下段に落とすかとか、overflow 使うか、とか…なんか色々と。 CODEPENでそんな時に良さげなサンプルを見つけたので備忘録的な勉強記録。 サンプルページ まずはサンプルから。 内容としてはCSSだけでモバイル環境の場合にテーブルのデザインを変えるというもの。 >>REDLINE MAGAZINE | レスポンシブ対応テーブ >>続きを読む
もう1月も半ばですが、明けましておめでとうございます。本年もよろしくお願い致します。 ・・・で何事もなかったかのように更新する。 CSSを徹底解析できるwebサービス「CSS Stats」を使ってみた 「CSS Stats」は簡単にCSSを徹底的に解析できるwebサイト。まずはサイトへアクセス。 >> CSS Stats 自分で調べたいサイトのURLかCSSのソースを貼り付けして「GO」ボタンをクリック。 解析が終わるとそのサイトで使われているCSSの内容詳細が表示される。下記はTwitterの解析ページの一部。 解析される内容は以下の通り。 Total Declarations >>続きを読む
CSSで使用できる単位の種類はたくさんあるのですが、ブラウザの対応状況から考えて一部の限られたものしか使用していなかったです。pxかemか%か…なんて論議も懐かしく思う今日この頃なのですが、今はそれ以外の選択肢も増えてきました。そろそろ今まで使用していなかった単位のおさらいもしておこうかな、と思います。 単位といっても型が色々あるので、今回はよく使う「length型」って呼ばれてるやつのまとめです。サイズ指定等によく使うやつですね。 相対単位 相対単位一覧。内容は仕様書より抜粋。(最下部にリンクおいてます) 単位 相対基準 em 要素のフォントサイズ ex 要素のフォントの x-height >>続きを読む
せっかくの勉強記録ブログなので、普段使わないものも色々試していこうかな、と。今回は「15 CSS blend modes that will supercharge your images | Webdesigner Depot」こちらのページに触発されて、CSS3のbackground-blend-modeを試してみます。 background-blend-modeプロパティ background-blend-modeについて(仕様書) Compositing and Blending Level 1 ブレンドというと、グラフィック系ソフトを使っている方には馴染みのある機能だと思いますが、C >>続きを読む