.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まで表示可能です。
今はjavascriptでやるのが主流？
とりあえず今回はCSSで対応しました。
div {
min-height: 100px;
height:auto !important;
height: 100px;
}
ブログに貼り付けたソースを見やすくしたいため色々調べてみると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>
ニワデザイン
※Word Pressなどで使う場合はjavascript部分はfooter.phpに書いときましょう。
CSSにて背景画像（画像置換）をしてリンクを付けている場合、Firefoxで閲覧するとはみ出てアウトラインが表示されてしまいます。
そこでこのアウトラインを表示させない方法のご紹介。
Photoshopを使っていて日本後入力ができなくなる事がたまにあります。
そこでショートカットをよく忘れるので覚え書き。
alt＋半角キー
今回はじめてRuby on Railsを使った案件を行いました。
そこで最低限覚えておく3つのヘルパーを紹介します。
※RailsではERbが使われているので、<% %>がコードとして解釈されます。
※Railsのヘルパーについては後ほど。
1.リンクのつけ方
2.画像の貼り方
3.画像にリンクを貼る方法
<%= link_to "表示させる文字", :controller => "リンク先のフォルダ名", :action => "ファイル名" %> ↓こんな感じ。 <%= link_to "お問い合わせ", :controller => "contact", :action => "index" %>
<%= image_tag ("ファイル名", :alt => "alt文字") %> ↓こんな感じ <%= image_tag ("/images/title.gif", :alt => "お問い合わせ") %>
<%= link_to(image_tag("画像ファイル名", :alt =>"alt文字"), { :controller => "リンク先のフォルダ名", :action => "リンク先にファイル名" }) %> ↓こんな感じ <%= link_to(image_tag("/images/btn_contact", :alt =>"お問い合わせ"), { :controller => "contact", :action => "index" }) %>
最低限この３つは覚えましょう。
