Ellinikonblue.net Devlosxom

ここはまだ壮大な夢の途中…

Posted on Apr 29, 2013 at 23:21

(S)CSS も公開しました

 GitHub の方Ellinikonblue.com Weblog / Ellinikonblue.net Devlosxom で 使用しているフレーバー向けの SCSS ファイルを公開しました。

 これでプラグインは除いて、 フレーバーと CSS で現時点のこのサイトくらいの見栄えは再現できます。
 blosxom を使っているだけで 絶滅危惧種に属するのに、うちのサイトを参考にする人などいるかという話はおいといて、 ほとんど自学自習の成果に対する自己満足です (_ _;>

 よし!行くぞ!! HTML5 化だ!!!

Posted on Sep 04, 2012 at 21:43

Twitter Bootstrap という HTML/CSS フレームワークがあるそうな

IDEA*IDEA 「 Twitter Bootstrap の 2.1 が正式に登場」

 Twitter Bootstrap ってなに? …すみません。。。ここからスタートです (_ _;>

 世の中にはそれを使えば(ある程度)簡単に段組などが実現できる CSS/HTML フレームワークというのがあって、 有名どころとしては以下のようなものがあるんだそうです。  Twitter Bootstrap は、 Twitter 社が社内利用していたものを オープンソースでリリースしたもの(らしい)です。

 sass を使用して CSS を書くようになって、 自分なりにライブラリ的なものを作り始めてはいたのですが、 この Twitter Bootstrap のような CSS/HTML フレームワークを試してから考えた方が、 お得意の「車輪の再発明」をしなくてよいかなと言う気がします。

 ということで、今度は blosxom の HTML5 フレーバーの研究とあわせて、 ちょっとこの Twitter Bootstrap を 試してみようと思っています。

アシアルブログ 「超便利! Twitter Bootstrap でさくさく Web 開発」

「 米 Twitter 、同社発の CSS/HTML フレームワーク『 Bootstrap 2.0 』を公開」SourceForge.JP Magazine より)
Posted on Aug 25, 2012 at 20:02

blosxom で Google Font API を使う

 今回、 Photolog のフレーバーを 改装した 際、 Google Font API を 使用してみました。

 利用方法は Google Font API にもありますが、 いたって簡単で、blosxom の場合、 head フレーバーで各種スタイルシートを読み込む最後に以下の記載を追加します。
# フォントは Tangerine を使用。
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
 次にこのフォントを使用する要素に対してスタイルシートでフォントを指定します。
 今回は h1 要素に対して使用しましたのでスタイルシートで以下のように指定しました。
h1 {
  font-family: Tangerine, "Times New Roman", serif;
}
 Times New Roman と serif の指定は Tangerine を使用できない、 もしくは読み込めなかったときのためのものです。

 Great VibesAlex Brush のようなフォントを 読み込む場合や、複数のフォントを読み込む場合などは以下のようにすればよいようです。
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Great+Vibes">
「よいようです」というのは Google Font API のドキュメントに書いてあっただけなので、 今度、自分でも試してみることにします。
Posted on Feb 17, 2012 at 22:05

そういえば LESS ってなに?

「 CSS の記述が 3 倍速くなる『 LESS 』の使い方」ASCII.jp より)

 最近知った sass (SCSS) で CSS を書くことにはある程度慣れて、自分なりのライブラリを作るとさらに便利になるのでは… と言う妄想と、今、生産物の知識ベースを GitHub 上に持ってこようと、 今必死で時間を作ろうともがいている(のでできてない orz )最中ですが、 その sass でがちゃがちゃやり始めたときに、 よく LESS と言う言葉を耳にはしたがよく調べもせず、 sass に染まってしまいました。

 sassLESS 、 何が違うのかは以下の記事がわかりやすそう。

(DxD)∞ 「 CSS 拡張メタ言語『 SCSS(Sass) 』と『 LESS 』の比較」

 JavaScript を仕込めば使えるというのは、 Ruby が必要な sass よりは いけてそうだが、最近はその他にも JavaScript を多用することが多い (特に JavaScript なしではできないことも多い)ので 安易に負荷をクライアント側に振るのはどうかと思う。

 理想を言えばテスト中は JavaScript で、 Fix した時点でコンパイルして使えるのが理想と言えば理想なんですが…

 あと、そういえば Compass ってなに? f^^; howtohp 「 CSS 書くなら Compass 使った方がいいよ。 SASS 使ってる人なら特に。」
Posted on Apr 28, 2011 at 18:13

Sassy CSS 環境設定できた!

オープンソースソフトウェアとかウェブ技術とか 「 Ubuntu 10.10 で Sass/Compass を使う(環境設定編)」

 Sassy CSS(SCSS) を使ってみたく ruby も知らない haml も知らない輩が、 先般、チャレンジした わけですが 見事に玉砕。
 何が悪いんだろうと、sass の チュートリアル(むろん 日本語訳 )を 熟読してみると SCSS のサポートは Sass 3.0 から サポートされた機能だと言うことに気がつきました。
sass -v
などしてみると表示されているのは 2.x 。
これか!と一瞬、どや顔になってアップデートを試みるも、 何度アップデートかけても最新版がインストールされているような表示がされます。
 で、しつこく調べた結果、当たったのが 上記の ドキュメント
 OS (Ubuntu) のせい やったんかい! orz

 Ubuntu 10.04LTS で rubyhaml を ( apt-get で) インストールしたどこかの時点で /usr/bin 以下に haml/sass のバイナリがあり、 gem でインストールされる haml /sass は /var/lib/gems/1.8/bin 以下にあったというオチ orz
 実際、最新 sass で てきとーにつくった SCSS ファイルをコンパイルしてみると…できるじゃな~い (^^)b

 ということで、ちょうど最近、Ellinikonblue.com 側の トップページを書き直そうとしていて、 その CSS を SCSS から書いているのですが、これがすごい。
 何がすごいって見渡せば、すぐに何が書いてあるかわかる。 伝わらないかも知れないですが、個人的には文明開化級のインパクトです… が、その話は成果諸共また後日。今回はトラブル解決まで。
Posted on Mar 21, 2011 at 23:19

Sassy CSS(SCSS)

hail2u.net 「 Sass、そしてSassy CSS (SCSS) 」

 最近時間ができても、何か生産するという意欲が湧いてこず不抜けているので、 忘れないうちにメモっておく。

 CSS(Cascading Style Sheet) の文法を拡張するメタ言語 Sass … 砕いて言うと Sass で書いてコンパイルすると CSS になってくれるのだが、これの何が凄いというと、 CSS は単にスタイル定義の箇条書きにしかならないところが、 Sass で記述すると、 プログラム言語チックな意味をもたせた記述ができると言うこと。

 ちょっと個人的には文明開化級の代物に出会った気でいるのだが、 Linux で Ruby をインストールして haml gem をインストールしても動かねぇやん orz

 Ruby は全然知らねぇので、 あとでじっくり再チャレンジする。
Posted on Aug 01, 2010 at 18:12

Styleneat で美しい CSS を書く

百式 「 スタイルシートをすっきりと見やすくしてくれる『 styleneat 』」

 なかなかすっきり美しく書けない CSS 。
 そんな CSS をきれいに書き換えてくれるのが この Styleneat
 ちょっと前に 百式 さんちで知りまして、 Faves に埋もれてました orz

 フレーバー いじりをしていたときに思い出して探し回った次第 (_ _;>  今度は忘れずにメモっておく。。。
Posted on Aug 10, 2008 at 23:40

フレーバ改装工事日報 #2: li 要素の再定義

 すでにこれだけ日が開くと、日報もないような気もしますが…

 YUI Reset CSS を使用したのち、各要素を再定義していく中で、 手こずったのは li 要素の再定義で、
li { list-style: inherit; }
ul { list-style: disc none outside; }
ol { list-style: decimal none outside; }
とすると、少なくとも Firefox では ul, ol ブロックで指示した文字・記号が行頭にでるようになりますが、 Internet Explorer では うまく行きません。
 IE では、
li { list-style: inherit; }
ul li { list-style: disc none outside; }
ol li { list-style: decimal none outside; }
と明示的に ul, ol ブロック中の li 要素に対して 明示的に再定義する必要があります。 しかし、逆にこのようにだけ指定すると、 今度は Firefox で うまくいかなくなります。

 さらにもう一つ問題があって、 ul ブロック中の中の ol ブロック、またその逆、 加えて ul, ol ブロック中の二階層目の ul, ol ブロック中での li 要素の行頭文字を一階層目と違うものにしたい場合の 定義も別途必要になります。

 と言うことで、真の正解はこれ。
li { list-style: inherit; }
ul, ul li { list-style: disc none outside; }
ol, ol li { list-style: decimal none outside; }
ul ul, ul ul li { list-style: circle none outside; }
ol ol, ol ol li { list-style: lower-alpha none outside; }
ul ol, ul ol li { list-style: decimal none outside; }
ol ul, ol ul li { list-style: disc none outside; }
 三階層目はやめましょう (^^;>

 自分でもあまり美しい方法ではないように思うんですが、 これ以外の解を見つけられませんでした。
 より美しい解をご存じの方、是非教えてください m(_ _)m
Posted on Jul 15, 2008 at 00:22

フレーバ改装工事日報 #1: YUI Reset CSS 適用後のスタイル再設定

 先般から始めております フレーバー の全面改装工事ですが、表向きには何とか改装前と変わらないレベルにはなりました。
 ここまでで、エラスティックレイアウトの採用、 The Yahoo! User Interface Library (以下、 YUI )から Reset CSS/Font CSS の導入までは終わっています。

 エラスティックレイアウトとは、ちょっと調べてもらったらわかりますが、 Yahoo! JAPAN のトップページでも採用される ユーザがブラウザで文字の大きさを変更しても崩れない 「伸び縮みするレイアウト」のことです。
 実際このページの文字サイズを大きくしてもらうとわかりますが、 どんなに大きくしても基本的なレイアウトは崩れません(のはずです f^^; )。
 昨今、ブラウザ側に画像を含めてまるごと拡大縮小する機能が実装されるに至って、 今後どれほど意味があるかはわかりませんが、 興味を持ったので取り入れてみました。
 原理は簡単です。基本、幅などの指定を em 単位で行っただけのことです(今のところは…)。 今後グラフィカルな要素を入れ込むとまた一思案しなければならなくなりますが、 それはまたいずれ…と言うことで。

 次に YUI Reset CSS/Font CSS ですが、 一時、話題になったのでご存じの方は多いと思います。 様々なブラウザがデフォルトで持っている設定を、最小の手数でリセットする (要はどんなタグを指定しても装飾されず、またどのブラウザでも同じに見える状態にする) CSS です。
 しかし、知っているのと使ってみるのとでは大違い。
 初期設定を無効にすると言うことは、すべて自分で定義し直すと言うことです。 これが言うが易く行うは難し。
 Google さんに聞いてみても、 「こんな CSS があるよ」はそれこそ星の数ほど引っかかるのですが、 ではこの CSS を使って再定義はこうすると言う情報はほとんど皆無 (私の能力では探しきれなかった可能性も大 orz )。

 まずやっかいだったのは li 要素のスタイル再定義。
 YUI Reset CSS をかますと、 行頭文字が何も表示されなくなるので、これを再定義しなければなりません。 ということで、単純に
li { list-style: disc none outside; }
とかしてしまうと、ul ブロックであろうが ol ブロックであろうが、 disc になってしまい、かといって
ul { list-style: disc none outside; }
とかしてもそもそも Reset CSS で li 要素で none と指定されているので、 効力を発揮しません。
 正解はこれ…
li { list-style: inherit; }
ul { list-style: disc none outside; }
ol { list-style: decimal none outside; }
だと思うでしょう? f^O^;

 確かに Firefox であれば これで(万事ではないんですが)おっけーなんですが、 IE では これではだめなんです。
 真の正解は…(つづく m(_ _)m )