前回のウェブデザイナーのためのRuby on Railsが好評だったため更に追加！
submitボタンを画像にする方法です。
<%= image_submit_tag("/images/login.gif")%>
Monthly Archives: 4月 2008
ウェブデザイナーのためのRuby on Rails(ERbの使い方) submitにイメージ画像を使う
Posted by takehito on 2008/4/21 月曜日
None comments
CSS 角丸グラデーションボックス
Posted by takehito on 2008/4/17 木曜日
None comments
html
<div class="box_01"> <div class="box_02"> <ul> <li><a href="#">あいうえお</a></li> <li><a href="#">あいうえお</a></li> <li><a href="#">あいうえお</a></li> <li><a href="#">あいうえお</a></li> <li><a href="#">あいうえお</a></li> </ul> </div> </div>
css
.box_01 {
background: url(images/box_01.gif) no-repeat top;
width: 261px;
padding: 5px 0 0 0;
}
.box_02 {
background: url(images/box_02.gif) no-repeat bottom;
padding: 10px;
}
角丸グラデーションを使ったボックスの作り方。
２枚の画像を使って作ります。
divを入子にしてbox_01に角丸上部分の画像を指定。box_02に背景部分から下の角丸部分の画像を指定します。
注意：box_02に指定している背景画像の高さ以上に中身がある場合は途中で画像が切れてしまいます。
当サインプルは高さを2000pxまで表示可能です。
CSS javascriptを使わずmin-heightをIEで使えるようにするCSS
Posted by takehito on 2008/4/16 水曜日
None comments
今はjavascriptでやるのが主流？
とりあえず今回はCSSで対応しました。
div {
min-height: 100px;
height:auto !important;
height: 100px;
}
ソースコード表示に便利なsyntaxhighlighter
Posted by takehito on 2008/4/15 火曜日
None comments
ブログに貼り付けたソースを見やすくしたいため色々調べてみるとsyntaxhighlighterがいろんなサイトで使われていたのでご紹介。
DL：http://code.google.com/p/syntaxhighlighter/
対応言語
C,C++,C#
CSS
Delphi
Java
JavaScript
PHP
Python
Ruby
SQL
VB
XML/HTM
使い方はとっても簡単。
<pre></pre>の間に表示したいコードを書きます。
<pre>のclassにhtmlやcssを書くだけ。
<pre name=“code” class=“html”>
ここにコードを書く。
</pre>
<link type=“text/css” rel=“stylesheet” href=“Styles/SyntaxHighlighter.css”></link>
<script language=“javascript” src=“Scripts/shCore.js”></script>
<script language=“javascript” src=“Scripts/shBrushXml.js”></script>
<script language=“javascript” src=“Scripts/shBrushCss.js”></script>
<script language=“javascript”>
dp.SyntaxHighlighter.ClipboardSwf = ‘Scripts/clipboard.swf’;
dp.SyntaxHighlighter.HighlightAll(‘code’);
</script>
サンプル
<a href="http://www.niwadesign.jp/">ニワデザイン</a>
※Word Pressなどで使う場合はjavascript部分はfooter.phpに書いときましょう。
CSS Firefoxのリンクの線を消す方法
Posted by takehito on 2008/4/14 月曜日
None comments
CSSにて背景画像（画像置換）をしてリンクを付けている場合、Firefoxで閲覧するとはみ出てアウトラインが表示されてしまいます。
そこでこのアウトラインを表示させない方法のご紹介。
a {
outline: none;
}
outline: none;
}
CSS 背景画像（画像置換）を使わないロールオーバー
Posted by takehito on 2008/4/11 金曜日
None comments
[覚書]Photoshopで日本語入力が利かなくなった時の対処法
Posted by takehito on 2008/4/10 木曜日
None comments
Photoshopを使っていて日本後入力ができなくなる事がたまにあります。
そこでショートカットをよく忘れるので覚え書き。
alt＋半角キー
ウェブデザイナーのためのRuby on Rails(ERbの使い方)これだけは覚えよう！
Posted by takehito on 2008/4/8 火曜日
None comments
今回はじめて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" }) %>
最低限この３つは覚えましょう。