0618 autoという便利な指定方法があるらしい
Illustrator
楕円の上半分を消す
ダイレクト選択ツールで楕円の上部のアンカーをクリックしてBackSpace
円を二つに分割する
円を描きそれを二分する直線/曲線を一本引く(円から両端をはみ出すように描く)
→円と線を選択する→[ウィンドウ]→[パスファインダー]→左下の分割ボタンを押す
→空白を一度クリックしてからダイレクト選択ツールで図形を選ぶと分割されている
Photoshop
画像の一部を別画像に貼り付ける
切り取る部分を選択(Shiftで範囲選択、Altでその選択を解除)
→切り取る画像のレイヤーを選択→レイヤー下のマスクを追加を押す
画像の合成(グラデーション)
レイヤーにマスクを追加→グラデーションツール→ドラッグでグラデーションの具合を調整
CSS
最初の一文字をインデント処理
{ text-indent: 1em; }
line-heightについて
px指定やem指定をするとレイアウト上の不具合が出るので、line-heightには単位指定をしない
{ line-height: 1.5; } などなど
borderの指定
{ border: px値 borderの形状 #色指定 ; }
文字を置く位置
{ text-aline: ****; }
****:center / right / left
要素間の隙間の間隔
例えばh3とp(複数行)が並ぶとき、h3とpの要素間の間隔よりも、p要素同士の行間指定の幅の方が大きいとレイアウトとしてアウト。人間は隙間の感覚の差で要素がどこでひとまとまりか、どこで分かれるのかを判断する。そのため、h3とpとの間隔はより広く、pとpの行間はより狭くし、本来の要素毎のかたまりを意識してレイアウトせねばならない。
サイトの縁を作る
bodyに有色を指定し、ページレイアウトをdivでまとめて白色に指定する事でサイトの文字部分と背景を別の色で表示できる。
div:ページ全体を囲んでおく
body{
background-color: divのbackground-color以外の色を指定 ;
}
div{
background-color: #****** ;
width: ***px ;
margin: 0 auto ;
padding: ***px ;
}
widthを指定しておくのは、サイトを見る環境によって横幅が変化するがそれをこちら側で固定し、marginの横幅をautoに設定する事で、どの環境でもdivが中央に表示されるようにするため。大体800~900pxくらい?
今日の路線図
山手線ほぼ完成。いえす!お隣さんに日に日にスピード上がってるねーと褒められました。明日は中央線いこうかな。放課後の楽しみ。