HTMLを書くのは久しぶり

久しぶりにHTMLを書いています。昔、ASP.NET2が出た頃にCSSでボックスレイアウトなウェブサイトを作って以来です。あの頃から感じていたのですが、ウェブサイトの設計書を作成するツールってあんまりないですね。

以前ウェブサイトを作成したときに、自分が作ったものであるにもかかわらずしばらくしてからCSSで作成したレイアウトが??となってしまったということがありました。できれば簡単な設計書を作れるようなツールがあると素敵なのですが…。やはり紙で絵を描いて、モックを作っておくくらいしかないのでしょうかね。

とりあえず、ないものは仕方がないので紙でお絵かきをしました。この絵はEvernoteで管理してます。思い立ったときに追記したりしてバージョンを上げていくことになりそうです。

※今は家計簿作ってます。昔作った.NET版をRailsで作ってみるところから私のRailsでの開発は始まるのですw

Railsの場合、Views/layouts/application.html.erb ファイルがアプリケーションの共通テンプレートになっているのでこのファイルを修正することで基本的なレイアウトは調整できるようになります。このHTMLファイルが読み込むCSSファイルは、 public/stylesheets/ 配下に保存することで読み込まれます。

早速CSSファイルを作成して適用してみたのですが、初期状態の場合、ファイルの読み込み順がアルファベットになるようです。せっかく自分が作成したCSSファイルがscaffold.cssで上書きされてしまって適用されませんでした。

具体的には、application.cssというファイルを作成したのですが、scaffold.cssより前になっているので一部のタグに設定した内容が適用されていません。 (本来であればscaffold.cssを修正するなりすれば良いのですが、scaffold.cssは自動生成されてできるCSSファイルなのであまりいじらない方が良いかなと思っています。)

[sourcecode language="html"] <head> <title>Jagaimo</title> <link href="/stylesheets/application.css?1317881536" media="screen" rel="stylesheet" type="text/css" /> <link href="/stylesheets/scaffold.css?1316314740" media="screen" rel="stylesheet" type="text/css" /> <script src="/javascripts/prototype.js?1316305186" type="text/javascript"></script> <script src="/javascripts/effects.js?1316305186" type="text/javascript"></script> <script src="/javascripts/dragdrop.js?1316305186" type="text/javascript"></script> <script src="/javascripts/controls.js?1316305186" type="text/javascript"></script> <script src="/javascripts/rails.js?1316305186" type="text/javascript"></script> <script src="/javascripts/application.js?1316305186" type="text/javascript"></script> <meta name="csrf-param" content="authenticity_token"/> <meta name="csrf-token" content="HqG4wikDjffKpoYQZ4MBxfgomTdvClhLXWcjJ5RMzR0="/> </head> [/sourcecode]

※3行目と4行目が逆であってほしい…

とりあえず、application.html.rbではCSSが次の箇所で適用されています。

[sourcecode language="ruby"] <head> <title>Jagaimo</title> <%= stylesheet_link_tag :all %> <%= javascript_include_tag :defaults %> <%= csrf_meta_tag %> </head> [/sourcecode]

ここを次のように変更することで、適用したい順序でCSSを適用することができます。

[sourcecode language="ruby"] <head> <title>Jagaimo</title> <%= stylesheet_link_tag %w{scaffold.css application.css} %> <%= javascript_include_tag :defaults %> <%= csrf_meta_tag %> </head> [/sourcecode]

※3行目をCSSファイルの適用順にファイル名を指定したのです。

この結果、

[sourcecode language="html"] <head> <title>Jagaimo</title> <link href="/stylesheets/scaffold.css?1316314740" media="screen" rel="stylesheet" type="text/css" /> <link href="/stylesheets/application.css?1317881536" media="screen" rel="stylesheet" type="text/css" /> <script src="/javascripts/prototype.js?1316305186" type="text/javascript"></script> <script src="/javascripts/effects.js?1316305186" type="text/javascript"></script> <script src="/javascripts/dragdrop.js?1316305186" type="text/javascript"></script> <script src="/javascripts/controls.js?1316305186" type="text/javascript"></script> <script src="/javascripts/rails.js?1316305186" type="text/javascript"></script> <script src="/javascripts/application.js?1316305186" type="text/javascript"></script> <meta name="csrf-param" content="authenticity_token"/> <meta name="csrf-token" content="HqG4wikDjffKpoYQZ4MBxfgomTdvClhLXWcjJ5RMzR0="/> </head> [/sourcecode]

となり、自分の思い通りにCSSを適用できるようになりました。

参考にしたサイトは、本当にあったRailsのjavascript_include_tag :allの生成順序の怖い話です。とても助かりました。ありがとうございます。