ウェブデザイナーのためのRuby on Rails(ERbの使い方)これだけは覚えよう!

今回はじめてRuby on Railsを使った案件を行いました。
そこで最低限覚えておく3つのヘルパーを紹介します。

※RailsではERbが使われているので、<% %>がコードとして解釈されます。
※Railsのヘルパーについては後ほど。

1.リンクのつけ方
2.画像の貼り方
3.画像にリンクを貼る方法

1.リンクのつけ方

<%= link_to "表示させる文字", :controller => "リンク先のフォルダ名", :action => "ファイル名"  %>

↓こんな感じ。

<%= link_to "お問い合わせ", :controller => "contact", :action => "index"  %>

2.画像の貼り方

<%= image_tag ("ファイル名", :alt => "alt文字") %>

↓こんな感じ

<%= image_tag ("/images/title.gif", :alt => "お問い合わせ") %>

3.画像にリンクを貼る方法

<%= link_to(image_tag("画像ファイル名", :alt =>"alt文字"),
            { :controller => "リンク先のフォルダ名",
              :action => "リンク先にファイル名" }) %>

↓こんな感じ

<%= link_to(image_tag("/images/btn_contact", :alt =>"お問い合わせ"),
            { :controller => "contact",
              :action => "index" }) %>

最低限この3つは覚えましょう。

CSS 横並びグローバルメニュー02

CSS 横並びグローバルメニュー02

久しぶりのグローバルナビです。今回も前回同様のテクニックですが、グローバルメニュー下部にボーダーを追加してみました。今回も画像は使っておりません。

サンプルはこちら

CSS シンプルなボーダーを使った見出し(タイトル) その6

CSS シンプルなボーダーを使った見出し(タイトル) その6

シンプル見出しシリーズ第6弾。今回もボーダーを使ってのデザインです。

サンプルはこちら

CSS シンプルなボーダーを使った見出し(タイトル) その5

CSS シンプルなボーダーを使った見出し(タイトル) その5

シンプル見出しシリーズ第5弾。今回もボーダーを使ってのデザインです。

サンプルはこちら

CSS シンプルなボーダーを使った見出し(タイトル) その4

CSS シンプルなボーダーを使った見出し(タイトル) その4

今回はhタグとstrongタグを使った併せ技!

サンプルはこちら

CSS 背景画像を使った見出し(タイトル)Mozilla Japan風

CSS 背景画像を使った見出し(タイトル)Mozilla Japan風

背景画像を使った見出し(タイトル)です。左上にグラデーションのかかった画像を配置することによって、万が一タイトルが2行のなってしまっても見た目の違和感をなくすことができます。

サンプルはこちら

CSS シンプルなボーダーを使った見出し(タイトル) その3

CSS シンプルなボーダーを使った見出し(タイトル) その3

シンプル見出しシリーズ第3弾。今回もボーダーを使ってのデザインです。よく見かけるあれです。

サンプルはこちら

CSS リスト(li)に画像を配置するスタイル

CSS リスト(li)に画像を配置するスタイル

サイドメニューのリスト部分やヘッダーメニューのリスト部分に使えるスタイル。

サンプルはこちら

CSS シンプルなテーブルデザイン その2

CSS シンプルなテーブルデザイン その2

ちょっと立体的なテーブルデザインを作ってみました。
僕はあまりこのタイプのテーブルはあまり使わないけど、まぁありかもね。

サンプルはこちら

CSS PDFなどのアイコンを自動で表示する裏技

CSS PDFなどのアイコンを自動で表示する裏技

pdfやdocなどの決まった拡張子にCSSを使って自動でアイコンを表示させる方法がphpspot開発日誌に紹介されていました。
とっても便利なのでゼヒ使ってみましょう。
※IE6では表示されないのでjavascriptと組み合わせる必要があります。

サンプルはこちら