1月2012
リキッドレイアウトなどで、ウィンドウの横幅が変わる場合で、見出しの幅をその親要素の幅いっぱいに流動的に長さを変えたいときがあります。
見出しの背景画像は、予想される最大の長さで作成しておきます。今回、高さ57px、幅1510pxの背景画像を作りました。
(X)HTML
<div id="wrapper">
<h1 class="header1"><span>のびーる見出し</span></h1>
</div>
CSS
* {
padding:0;
margin:0;
}
#wrapper {
width:85%;
margin:auto;
}
h1.header1 {
background:url(img/h1bgimg01.jpg) top right no-repeat;/*背景画像を右端から置く*/
height:57px;/*背景画像の高さを指定*/
line-height:57px/*背景画像の高さを指定*/;
width:100%;
font-size:20px;
max-width:1510px;/*作成した背景画像の横幅*/
}
h1.header1 span{
display:block;/*ブロック化*/
font-size:40px;
color:#000;
font-weight:600;
letter-spacing:5px;
margin-right:15px;/*親要素h1の背景の右端を見せるため*/
padding-left:15px;/*右端の隙間とあわせるため*/
text-align:center;
background:url(img/h1bgimg01.jpg) top left no-repeat;/*背景画像を左端から置く*/
height:57px;/*背景画像の高さを指定*/
line-height:57px;/*背景画像の高さを指定*/
max-width:1510px;/*作成した背景画像の横幅*/
}
▼サンプルはこちら
まとめていうと、内側のスパンで、見出しの内容の幅に応じて、背景画像が左端から始まります。見出しの内容が終わった場所で、ぶつっと背景画像がきれてしまうので、右端の角丸が表現できてません。
親要素のh1で右端から始まる画像が置いてあるので、その部分を見せるために、スパンにmargin-rightを指定しています。この幅は、角丸が表現できる以上のスペースをとります。
すると、この分だけ、見出しの右端にスペースができてしまうので、その同じ分だけ、スパンにpadding-leftを指定して、スペースをあけて、バランスをとります。
h1の背景画像は、左端はぶつっといきなり終わっているはずですが、内側のスパンの背景画像があるので、その場所は隠れています。
ということで、伸び縮みする背景画像ができましたが、予想以上に横幅を伸ばされてしまう可能性があります。とーっても大きいモニタを持っている人がいたりすると…。そんなとき、背景画像が継ぎ足しに表示されないよう、「これ以上幅を長くしないでね」という指定をします。これがmax-widthです。ここで準備した背景画像の横幅を指定しておきます。
なんとか、できて、ほぅっ、とした見習です。
2012年1月25日1:36 AM|
カテゴリー：
HTMLとCSSのコード,見習い奮闘記|
コメント
(0)
WebデザイナーのためのjQuery入門でお勉強中です。
アコーディオンタイプのぱたぱたメニューをJQueryでやってみました。ちょっと心もとないけど･･･。どきどき。
あくまで勉強途中の見習のビボー録です。あしあと、あしあと･･･。ということで、許してください。
XHTML
<dl class="patapata">
<dt>ぱたぱた1番</dt><dd>1番きゃ、見えちゃった。ずろーん。ずろーん。びろーん。びろーん。でろーん。でろーん。</dd>
<dt>ぱたぱた2番</dt><dd>2番きゃ、見えちゃった。ずろーん。ずろーん。びろーん。びろーん。でろーん。でろーん。</dd>
<dt>ぱたぱた3番</dt><dd>3番きゃ、見えちゃった。ずろーん。ずろーん。びろーん。びろーん。でろーん。でろーん。</dd>
<dt>ぱたぱた4番</dt><dd>4番きゃ、見えちゃった。ずろーん。ずろーん。びろーん。びろーん。でろーん。でろーん。</dd>
<dt>ぱたぱた5番</dt><dd>5番きゃ、見えちゃった。ずろーん。ずろーん。びろーん。びろーん。でろーん。でろーん。</dd>
</dl>
<dl class="patapata" id="imgs">
<dt>今日の見習1号</dt><dd><img src="imgs/fwpath00.gif" width="260" height="195" alt="" /></dd>
<dt>今日の見習2号</dt><dd><img src="imgs/fwpath00.gif" width="260" height="195" alt="" /></dd>
<dt>今日の見習3号</dt><dd><img src="imgs/fwpath00.gif" width="260" height="195" alt="" /></dd>
<dt>今日の見習4号</dt><dd><img src="imgs/fwpath00.gif" width="260" height="195" alt="" /></dd>
<dt>今日の見習5号</dt><dd><img src="imgs/fwpath00.gif" width="260" height="195" alt="" /></dd>
</dl>
CSS
*{
margin:0;
padding:0;
font-size:15px;
}
dl{
width:200px;
position:relative;
}
dd{
border:1px #999 solid;
background-color:#FFCCCC;
padding:10px;
line-height:1.1em;
border-top:none;
}
dt{
border:1px #999 solid;
background-color:#FF66CC;
padding:10px;
}
#imgs dd{
padding:0;
line-height:1;
border:none;
background-color:transparent;
}
dl#imgs {
width:260px;
}
#imgs dt{
background-color:#00CCFF;
width:240px;
}
Java Script (JQuery)
// JavaScript Document
$(function(){
$('.patapata').each(function(){
var dl=$(this);
var allDt=dl.find('dt');
var allDd=dl.find('dd');
allDd.hide();//すべてのddを非表示
allDt.css('cursor','pointer');//カーソル変化
allDd.css('cursor','pointer');//カーソル変化
allDt.mouseenter(function(){
var dt=$(this);
var dd=dt.next();
allDd.hide();//すべてのddを非表示
dd.show();//カーソルが乗った次のddのみ表示
dt.css('opacity',0.5);//カーソルが乗ったdtの色を薄くする
});
allDt.mouseleave(function(){
var dt=$(this);
dt.css('opacity',1);//マウスがdtから離れると色が戻る
});
allDd.mouseenter(function(){
var dd=$(this);
var dt=dd.prev();
dt.css('opacity',0.5);//ddにマウスが乗ると直前のdtの色が薄くなる
});
allDd.mouseleave(function(){
var dd=$(this);
var dt=dd.prev();
dt.css('opacity',1);//ddからマウスが離れると直前のdtの色が戻る
});
dl.mouseleave(function(){
allDd.hide();//dlからマウスが離れると、その中のddはすべて非表示
});
});//each終わり
})//function終わり
サンプルはこちら
2012年1月24日12:46 AM|
カテゴリー：
Java ScriptとJ Query,見習い奮闘記|
コメント
(0)
ザザシティ浜松にある西部パレットで、平成23年度の西部地域障害者パソコンボランティア特別研修の2日目です。
理想のパソコンボランティアになりたいけど･･･
今日は、午前中はIPadの活用法、午後は、パソコンボランティアの実際についてのお話を聞いたり、障害者の方、受講生全員で、「理想のパソコンボランティアとは」というテーマで、話し合いをしました。
障害者にとってのIPad【タブレット端末】利用
実は、見習、IPadの使い方を実習する[障害者にとってのIPad【タブレット端末】利用〕のコマ、受講前からとっても、関心ありでした。
というのは、最近使い始めたスマホで、見習、イタいミスを連発中。真夜中にネットを見ようとブラウザをタップしたつもりが、電話のところにあたったらしく、電話発信･･･。とにかく平べったい画面をタップしたりするのって、となりを触っちゃったり、「だいたい、この辺？」っていうあいまいな感じがぬぐえないです。障害者の方が使う機器は、ONとOFFがはっきりしていたり、キーボードも、FとJとかにしっかり出っ張りがついてたり、とにかく、はっきりでこぼこがついてたりして、触ればどんなものか分かる、立体的な仕様のものじゃないと、使いにくいんじゃ･･･って思い込んでました。
だから、IPadみたいなタブレットは問題外、と思ってました。
福祉関係のアプリが入っているIPad
でも、びっくり、IPadはWindowsのコンピューターの簡単操作以上に、そのままで福祉用具化できる機能が備わってました。
たとえば今日実習で使ったIPad2だと、アクセシビリティの設定でViceOverという画面を音声で読み上げてくれる機能、画面を拡大できるズーム機能、黒い背景に白い字で表示する「黒字に白」とか、フォントサイズを大きくする「テキストを大きな文字で表示」、タッチ機能が登録できるAssisitive Touch（アシスティブタッチ）とか、あります。こういう機能を組み合わせると、たとえば視覚障害の方でも、テキストを自動で読み上げて、該当する場所をタップする（これがけっこうアバウトな場所でも、きっちり認識してくれる）とかで、けっこう使えるそうです。
それに、有料・無料のアプリを追加すれば、筆談だとか、高性能の読み上げアプリとか、点字翻訳とか、もう、めちゃくちゃ福祉機器になります。こういう機能のついた専用福祉機器は前からあるようですが、「でも、お高いんです、とっても｣ということで（たとえば、はい、30万円ですぅ。とか）大変ですし、特殊な専用機だと、いつ、製造中止になるか分からないという問題もあります。でも、これらのアプリはだいたい5000円とか、そういう感じ。安くはないけど、そういうお値段に比べると、ほんと、桁違いです。それに、だれでも使いたいIPadだから、簡単に製造中止にはなりそうにないし･･･。
見習、反省です。思い込みで、IPadは障害者の方に使いにくいって決め付けてました。もっと視点がぐりぐりと動くようにならなきゃです。
その後の講座の内容でも、思ったのですが、「自分なら、どう感じるか」と、自分の感覚から、障害者の方の感じ方を想像するのでは不十分だなということです。上から目線、とか、下から目線、とかじゃなく、上下左右以外にも、3Dな目線で見れるようにならなきゃなと感じました。
ということで、内容がとっても濃く、雪崩のような経験に、ちょっとドキドキな見習です。
2012年1月23日1:00 AM|
カテゴリー：
勉強会,見習い奮闘記|
コメント
(0)
« 古い記事
新しい記事 »
森歩き日記
自称パソプロ化計画
