Stylesheet(CSS)」タグアーカイブ

CSSフレームワークメモ

何かWEBサービスを作るのに当たって0ベースでデザインを考えるのが、たまにめんどくさい。
勉強がてらの突発的なサービス開発なんてなると、熱が最後まで持たないのだ。
ならば、既存のを利用すればいいのです!

という訳で、下記を条件としたものを探そうと思う。

  1. OSS
  2. 軽量コンパクト
  3. 使いやすい

続きを読む

タイムラインコンテンツを作る

仕事履歴だとスキルシートだのコンペ歴だの資格一覧だの諸々、タイムライン作った方が情報を伝えやすいものがある。
せっかくなので見栄えがよろしいタイムラインコンテンツを作ろうと思うところなので、組み込んでみた感じを見てほしい。
全てレスポンシブ対応!

組み込むのって、既存のCSSの影響受けるから、結構時間かかるんデスヨ。
class名既存とよく被るに外側をdiv#XXXで囲って区別してるわけではないしね。

だが、『全部一緒のページに表示させられるかな?」という冒険心がここにある。
続きを読む

seesaaブログのヘッダーバナー

いつの間にか追加されていたseesaaブログの上部のバナー。
あいつのせいで勝手に広い幅を固定されて今まで使えてたデザインが何だかうまいこと行かなくなっていたり、ちょっと面白くない。

自分のデザインに少し合わせてもらおうという魂胆。
合わせるのに使った内容を記載しておく。
続きを読む

IE6でSyntaxHighlighter Evolvedでハイライトされない

SyntaxHighlighter Evolvedをハイライト表示しようとすると、
IE6でハイライトされないかと思います。

CSSの表記ミスです。
残念ながら記載する順番を間違えてる。
(※IE6を考えなければ問題ない)

そのための対応としては、
表示CSSを
たとえば、ここだと『shThemeDefault.css』を修正する。

.syntaxhighlighter .line.alt2を指定したあとで、

/* Highlighed line number */
* html .syntaxhighlighter .line.highlighted .number
{
	『.syntaxhighlighter .line.highlighted .numberで指定した内容』
}
/* Highlighed line */
* html .syntaxhighlighter .highlighted
{
	『syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 で指定した内容』
}

因みに念のため、CSSハックを使っているので、嫌いな人は別の対処法を考えてください。

※対象:バージョン2.3.1以上