Posts Tagged ‘html’

images

WindowsでもCompass使えて、なおかつライブプレビューをしたいなーと思っていたところ、Preprosがいいという情報を見つけました。

つまり、HTMLやCSSを変更すると、即座にブラウザ上の編集しているページに変更が同期されるわけですね。
より直感的なコーディングが可能になります。

それで早速インストールして、使ってみたらこれがなかなか快適。
しかし、HTMLを変更してもそれはライブプレビューに反映されません。
これはProの機能だという事でProを購入しました。日本円で2500円くらいでした。

これでCSSフレームワークを使ってかっこいいサイトを作るぞ!と意気込み、フレームワークはGumbyが熱いという事で、これを使う事に。

しかし使い始めてしばらくして、トップのナビの色を変更したいなと思って該当のファイルをいじってみたところ(_setting.scss)、それ以降gumby.scssのコンパイルが通らなくなってしまいました。

ネットの情報を見てみたところ、こういう人は結構多いようで?
config.rbの中のコメントを外したりつけたりしたりだとか
参考:CSSフレームワーク「Gumby」について質問です。

などの情報がありまして、試してみたのですが解決しません。。。

custom Rubyにチェックを入れないといけないよ。
[SOLVED] Can’t compile gumby.scss that was generated by Claymate

という情報を見つけたので、これはPreprosについてくるCompassを使うのではなくて、マシンにインストールしたRubyを使うのだなと理解した私は、こっちにかけて見ることに。

とりあえず、rubyをWindows7のマシンにインストールするために、ソースコードからビルドとかちょっと不安だったのでインストーラーを使う事に
このページでx64のインストーラーをダウンロードして実行しました。
http://rubyinstaller.org/downloads/
インストールする時にPathを通すのもお忘れなく~。

それから
gem installコマンドを使って sass と compass をそれぞれインストール。
ついでにgumbyが使っている数式ライブラリである、modular-scalesassy-mathもインストールしておきました。

意気揚々とPreprosのオプション→Advanced Optionsから
Use Custom Rubyにチェックをいれ、For Sassにもチェックを入れ、いざコンパイル!
としてみたところ、やはり動かず。

config.rbをいじって該当箇所のコメントをつけたり外したりしてみたけどダメぽ。
PermissionDeniedとか出てきてWindowsでPermissionってどうするの?状態。

途方にくれていると、こちらの情報を見つけました。
なるほど、バージョンに依存するバグなのか?
参考:compassで自動コンパイルを設定した!

参考にさせていただいたサイト様の情報によると、以下の通り

1.コマンドプロンプト「gem uninstall sass gem uninstall compass」でsass/compassのアンインストールをする
2.コマンドプロンプト「gem install sass –-version “3.2.10″」でsassをインストールする
3.コマンドプロンプト「gem install compass –-version “0.12.2″」でcompassをインストールする

とあり、このバージョンを使えばうまく行くのかなあと、実際に試してみました。

上記は原文ママの引用ですが、私の使っているgemのバージョンではバージョンを指定するオプションは––versionでした。
つまり、gem install sass ––version “3.2.10″
とする事でコマンドを通す事が出来ました。

それでコンパイルをしてみましたが、やっぱりダメでした。
ダメ元でconfig.rbの構成を

# If you followed directions and ran 'gem install modular-scale' comment the next two lines out:
extensions_dir = "sass/extensions"

Compass::Frameworks.register('modular-scale', :path => File.expand_path("#{extensions_dir}/modular-scale"))

# Uncomment these to use regular Ruby gems.
# require 'modular-scale'
# require 'sassy-math'

と、マシンにインストールしたcustom rubyを使っているにもかかわらず、modular-scaleなどのライブラリはgumby付属のものを使うという設定にしてみたところ、
動いた━(゚∀゚)━!

という事で紆余曲折ありつつ、なんとかGumby.scssに触れる権利を手に入れました。
いやー、ハマったハマった。

Internet nerdery means that I can never just look at numbers like this without associating it with the HTTP status code

web上でサイトを見まわっていると時に「404 Not Found」などのエラーが出る事があります。
これはHTMLの規格上設定されたエラー番号(正確にはステータス・コードと言います)なのですが、それぞれ番号によって意味が違ってきます。

■ HTMLにおけるエラーの種類

・403
アクセス権限のないフォルダへのアクセスの際に表示

・404
ページ自体が存在しない場合に表示

・500
CGI等のプログラムのエラー等が起こった際に表示

・503
サーバーアクセス過多状態の際に表示

などなど、他にもステータス・コードは沢山存在しますが、普段目に付くのはだいたい上記のものあたりでしょう。

さて、おしゃれなサイトなんかは「404 Not Found」さえもおしゃれなページが表示されたりする事があります。
これは、「エラー404を踏んだユーザーを指定したページに飛ばす」という処理がなされているからなんですね。

この処理を可能にしているのは「.htaccess」というファイルに書かれているコードです。

■ .htaccessとは

.htaccessとはウェブサーバーがディレクトリごとの動作を制御する為のファイルです。
制御情報は.htaccessの存在するディレクトリと、サブディレクトリ全てに適用されます。
制御の具体的な例としては、IPやドメインによるアクセス制御や、CGIの設定等です。

本筋に戻ります。404エラーを踏んだユーザーを指定のページに飛ばすという事は以下のコードを書いた.htaccessファイルを設置すれば実現できます。

ErrorDocument 404 http://www.example.com/

404の数字を他のステータス・コードに変更すればそれぞれのステータス・コードごとに表示するページを変更する事ができます。
例では存在しないページを訪れた時、ユーザーはhttp://www.example.com/に接続する事になりますね。

ちなみに、.htaccessファイルはWindows上では作る事ができないと思います。先頭に”.”(ピリオド)の付く名前のファイルを作ろうとすると「名前を入力してください」とシステムから警告が出されます。
この先頭に”.”を付けるという形式はもともとUnix系のシステムで隠しファイルにする為の文化なのです。

なので、Windows上ではまず適当な名前を付けて、FTPソフトでアップロードした後に改めて”.htaccess”と名付けてやるのがいいと思います。
基本的に、”.htaccess”はウェブサーバーのウェブ公開ディレクトリのルートにおいてやれば動いてくれます。

photo by: itselea
Html

ちょっと前に題名の事を実現する方法を考えてみたんだけど、一発で実現する方法はないように思う。(あれば教えて欲しい)
つまり、下記画像の様な配置だ。

floatプロパティを用いた場合、片方の要素を真ん中に固定という事が出来ないのだ。
また、テーブルタグを用いた場合においてもfloatプロパティに同じく、微調整の計算が必要になってくる。

と言う事で、あまり簡潔な解決方法ではないのだが、以下のコードによって実現できたのでメモ。

#footer .copyright{
	margin:0 auto 0 auto;
	text-align:center;
	display:box;
}
#footer a{
	margin-top:-35px;
	margin-right:40px;
	text-align:left;
	float:right;
}
		<div id="footer">
			<div class=".copyright"><h5>copyright(c) WisdomTrees.net <?php echo date(Y) ?> All Rights Reserved.</h5></div>
			<a href="#">TOPページに戻る</a>
		</div><!-- end footer -->

図にするとこんな感じ。

display:blockプロパティによって.copyrightクラスはブロック要素になる。
するとaタグは改行されるので次行に配置される。これをfloat:rightによって右側に寄せたものを
margin-top:-35px;を指定する事によって35px分上に持ち上げて配置している。

これ以上に簡潔な方法があれば、コメント欄にお寄せいただきたい。