カテゴリー: 未分類

背景画像と conteiner の設定

#09 背景を設定しよう
http://dotinstall.com/lessons/website_html/9009
を参考に
背景画像と conteiner を設定していく

まず背景画像の設定について

これは

html{
background-image: url(‘画像ファイル名’);
}

とすることで
画像ファイルを表示できる

ただしわかりにくいため
#container のところへ

background-color:#fff;

として背景色を白にして

box-shadow: 0 0 3px rgba(0,0,0,0.5);

で影をつける
横、縦、ぼかし具合、色
の順番の引数となっている

これだけだと
footer あたりでとまっているので
もうすこし見栄えをよくする

これは
html{
}
の中に

height :100%;

#container の中へ

min-height:100%;
height:100%;

を追記

さらに、CSSファイルへ

body{
height:100%;
}

body > #container {
height:auto;
}

を追記する

これで、画面いっぱいまで
#container の領域が増えているのが確認できる

ここまでできたら
menu
contens
などが左によりすぎなのでpadding で余白をつける

この設定は
#container で行う

padding: 0 10px;

として
縦ではなく横に１０px設定する

そして body に対してフォントを指定しておく

font-family: Verdana,Arial;

2カラムレイアウトの作成

#08 2カラムレイアウトを作ろう
http://dotinstall.com/lessons/website_html/9008
を参考に
CSSでレイアウトの設定をして2カラムにする

このため、mycss.css を作成し編集

まず、
#container のところで横幅を指定

width:600px;
で固定
さらに、中央寄せにしたいので
margin: 0 auto;
としておく

#header
で margin-bottom:15px;
として余白設定

#menu
で margin-botton:15px;
でこちらも余白設定

#contents は
float:left;
で左よせにして記事を書く
width:400px;
と固定にしておく

#sidebar は
float:right で右によせてサイドバーにする
width:180px;
とこちらも固定

footer 部分の割り込み防止のため
#mainで
overflow:hidden;
そして、余白をいれたいので
margin-bottom:15px;
としておく

HTML文書構造作成

#07 文書の構造を作っていこう
http://dotinstall.com/lessons/website_html/9007
を参考に
文書構造を作成していく

この文書構造の作成とカラム作成を合わせて
テンプレなどが作成できる

今回、作成するのは２カラムのサイトになる

まず、HTML部分を作成する

作成するのは body 部分への追加

<div id="container">

<div id="header">header</header>

<div id="menu">menu</div>

<div id="main">

<div id="contents">
contents
</div><!-- contents -->

<div id="sidebar">
sidebar
</div><!-- sidebar -->

</div><!-- main -->

<div id="footer">footer</div>

</div><!-- #container -->

とする

<div id="contents">contents</div>

は左側部分

<div id="sidebar">sidebar</div>

でサイドバーで右側部分にする

固定幅での３カラムレイアウト

#06 3カラムのレイアウト (固定幅)
http://dotinstall.com/lessons/website_html/9006
を参考に
固定幅での3カラムレイアウトを作成

CSSファイルを編集して配置を設定

初期状態のCSSが
ソースになかったので
メモ
とりあえず、これを base.css
としておいて、今後の練習に使うことに

/* mycss.css */

#container {
    width: 500px;
    margin: 0 auto;
}

#header {
    background-color: red;
}
#main {
    background-color: blue;
}
#footer {
    background-color: green;
}

#left {
    background-color: pink;
}
#center {
    background-color: orange;
}
#right {
    background-color: purple;
}

まずは、レイアウトを変えるため

#left{
background-color:pink;
float:left;
width:100px;
}

#center{
background-color:orange;
float:left;
width:300px;
}

#right{
background-color:purple;
float:left;
width:100px;
}

というようにする

width は

幅の指定

float は回りこみの指定

また、footer 部分が割り込んでこないように
overflow:hidden;
を
#main のところに追加しておく

このレイアウトを変更せずに
#center 部分に余白を１０px入れるなら

margin-left:10px;
margin-right:10px;
width:280px;

というように、幅を全体の３００から引いて合わせる

また、上下に余白設定も可能だけど
注意点あり

もし、 #header と #main の間に余白をいれたいなら
#header のほうへ
margin-bottom:20px;
というように指定する

これを #main のほうでも
margin-top:50px;
で指定してしまうと
マージンの相殺が発生する

これはお互いに打ち消しあって
大きいほうの設定だけが有効になる
つまり
margin-top:50px だけ有効になる

3カラムレイアウトの作成

#05 3カラムのレイアウト (可変幅)
http://dotinstall.com/lessons/website_html/9005
を参考に
可変の3カラムレイアウトを作成

最初にHTMLを編集しておく

<div id="main"> 

の中で

<div id="center">center</div>

を追記

CSSのファイルは
最初の画面にでているような状態にするなら

#container{
width:70%;
margin:0 auto;
}

#header{
background-color:red;
}

#main{
background-color:blue;
overflow:hidden;
}

#footer{
background-color:green;
}

#left{
background-color:pink;
}

#center{
background-color:orange;
}

#right{
background-color:purple;
}

となる

これをカスタマイズしていく

ここから、まず left を編集
#left{
background-color:pink;
float:left;
width:30%;
}

とすることで
float:left;
で左に回りこみ
width:30% で大きさを４０％に設定

#center{
background-color:orange;
float:left;
width:40%;
}
これで
float:left;
で左に回りこみ
width:40% で大きさを４０％に設定

#right{
background-color:purple;
float:left;
width:30%;
}

ここでの注意点は
footer がまわりこまないように
#container
で
overflow: hidden;
を設定しておくこと

とりあえず、これで3カラムができる

この使い道は、CSSの設定とHTMLで
テンプレが作成できるということ

これは wordpress テンプレとかでも
MT4 とかでも同じ

現状は可変だけど、固定幅にすることも可能
例えば
left を固定で100px
right も固定で１００px
そして、center は left ぶんだけ開けるとするなら

#left と #right では
width=100px
として

#center では
margin-left:100px;
とする

こうすれば、left のぶんだけあけることが可能

ちなみに、HTMLで
left
right
center
の順番だとOKだけど

left
center
right
だとレイアウトが崩れるので注意

DisplayMetricsクラスの代表的フィールド
float density
画面の論理的密度
　
int densityDpi
インチおたりのドット数で表した画面密度
int heightPixels
ピクセル値で表した画面の絶対的高さ
int widthPixels
ピクセル値で表した画面の絶対的幅
float xdpi
x軸の1インチあたりの物理的なピクセル数
float ydpi
y軸の1インチあたりの物理的なピクセル数
—
から送られてきた高速メモ帳

DisplayMetricsクラスの代表的フィールド
float density
画面の論理的密度
　
int densityDpi
インチおたりのドット数で表した画面密度
int heightPixels
ピクセル値で表した画面の絶対的高さ
int widthPixels
ピクセル値で表した画面の絶対的幅
float xdpi
x軸の1インチあたりの物理的なピクセル数
float ydpi
y軸の1インチあたりの物理的なピクセル数

画面情報の取得
onScroll()の強距離の単位がピクセルであるように
ScaleGestureDetectorで取得する2点間の距離もピクセルで返ってくる
これをミリメートルへ変換するには
ピクセル / 解像度 * 25.4
の計算式を使う
解像度は、インチあたりのピクセル数
これに25.4をかけることで
ミリメートル換算できる
解像度は、Android端末ごとに異なるため
画面の大きさ
解像度
を知るには
DisplayMetricsクラスを使う

onFling() onScroll()の引数
まず、onFling()
構文は
boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)
引数の解説
e1
ダウン時のタッチイベント
e2
フリック時のタッチイベント
velocityX
x軸の速度
単位は、ピクセル/秒
velocityY
y軸の速度
単位は、ピクセル/秒
次に、onScroll()
構文は
boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY)
引数の解説
e1
ダウン時のタッチイベント
e2
スクロール時のタッチイベント
distanceX
x軸のスクロール時の距離
単位はピクセル
distanceY
y軸のスクロール時の距離
単位はピクセル

フリックやスクロールの検知
ボタンのタップやダウン、アップなどのタッチ操作は
onClickイベントや
onTouchイベントで処理できるけど
複雑な操作になるジェスチャーは
GestureDetectorクラスや
ScaleGestureDetectorクラスを使い検出する
ScaleGestureDetectorクラスは
ピンチイン
ピンチアウト
を取得できる
GestureDetectorクラスはかなり多くの
ジェスチャーを検出できる
先に、ピンチアウトとピンチインについて解説
スマホのタッチパネルは、複数の指で
画面にタッチするマルチタッチをサポートしている
2本指でタッチして
つまむように間隔を狭めることを
ピンチイン
逆に2本の指を開いて
間隔を広げる動作をピンチアウトという
そして、以下がGestureDetectorで検知できるイベント
ダウンは、onDown()
押したとき
インターフェースは,
OnGestureListener
プレスは、onShowPress()
おしたとき、ただし、すぐに動かすと検知されない
インターフェースは、
OnGestureListener
長押しは、onLongPress()
これは、長押ししたとき
インターフェースは、
OnGestureListener
フリックは、onFling()
スワイプ、つまり指を触れたまま
任意方向へすべらした状態から
指を弾いて離す
インターフェースは、
OnGestureListener
スクロールは、onScroll()
画面にタッチしたままスライド
インターフェースは、
OnGestureListener
アップは、onSingleTapUp()
画面タッチからアップ操作を短く
インターフェースは、
OnGestureListener
シングルタップは、onSingleTapConfirmed()
ダブルタップ時には呼び出されない
インターフェースは、
OnDoubleTapListener
ダブルタップは、onDoubleTap()
これは、二回押す
インターフェースは、
OnDoubleTapListener
ダブルタップ時のイベントは、
onDoubleTapEvent()
ダブルタップ中にイベントダウン、移動、アップが起こると通知される
インターフェースは、
OnDoubleTapListener