senseiを始めてみた8
こんにちは!じゅんこです!
今回もsenseiで絵の勉強をしていきます!
イラストの描き方を動画で学ぶ! - sensei by pixiv
描いたものがこちらです!
手癖で描いた時よりも比率を意識した方が多少バランスがよくなっている気がしますね!
しかし比率はあくまで目安。
キャラの体形によりバランスが変わるので、とりあえず頭に入れておくという感じがよさそうですね!
ではまた次回!
senseiを始めてみた7
お久しぶりです!
今回もsenseiで絵の練習をしました!
イラストの描き方を動画で学ぶ! - sensei by pixiv
描いたものがこちらです!
全身のバランスって難しいですね!
手癖で描くと6頭身になりがちなのでせめて7頭身くらいで描けるようにしていきたいです!
見た感じ下半身は貧弱な気がしますね…下半身難しい。
ではまた次回!
ProgateでHTMLを勉強する14
複数のセレクタに同じCSSを適用する
→セレクタをコンマ(,)で区切ると複数のセレクタを指定できる。
(例)
h1,p{
color: #fff;
}
<header>と<footer>
ヘッダーとフッターを作る場合、<div>タグで作ることもできるがヘッダーとフッター用のタグがあるので、一般的にはこちらを使うことが多い。
背景に画像を指定する
background-imageプロパティ
(例)
background-image: url(画像のURL);
背景画像の大きさを指定する
background-sizeプロパティ
【値の種類】
・auto
初期値
・cover
表示範囲を埋め尽くすように背景を拡大・縮小する
(切り取ることもある)
・contain
表示範囲に収まるサイズになるように背景を拡大・縮小する
(切り取らない)
要素を中央に配置する
margin: 0 auto;
必ずwidthを一緒に指定する。
上下のmarginにはautoは指定できない。
ProgateでHTMLを勉強する13
メールフォームを作る
<input>
一行テキスト欄(終了タグは不要)
<textarea></textarea>
複数行入力欄
<form></form>
フォームを作るタグ
このタグの中に<input>,<textarea>を記入する。
<form>タグの基本形はこの形になる。
<form action="#" method="post">
</form>
action属性→フォームで処理したデータを処理するプログラムを指定する。データを受け渡しするプログラムが決まっていない場合は、値に#を書いておく。
method属性→フォームで入力したデータの送信方法を記述する。値はgetとpostがあるが、基本はpostを指定する。
<input type="submit">
<imput>にtype属性をつけて、値にsubmitを指定することで、送信ボタンになる。
このままだと、ボタンに表示される文字は"送信"のみになるので、value属性で文字を指定する事で任意のボタンテキストにできる。
(例)
<input type="submit" value="保存">
このままではまだメールフォームとしては使用できないので、別途知識が必要。
簡単にメールフォームを使いたいならレンタルサービスで作成することもできる。
ProgateでHTMLを勉強する12
margin
要素の外側に余白を作るプロパティ。
margin : 値(px);
で指定する。
書き方のルールはpaddingと同じ。
paddingとmarginの違い
paddingと用途は似ているが、paddingは要素の内側、marginは要素の外側に余白を作る。
(例)
paddingは指定したpx分加算して表示されるが、marginは相殺される。
(例)
ProgateでHTMLを勉強する11
文中の一部にCSSを適用させる
適用させたい部分を<span></span>で囲み、spanタグにCSSを指定する。
ブロック要素とインライン要素
ブロック要素→<div>,<h1>,<p>など
特徴
・親要素の幅一杯に広がる
・ブロック要素で囲まれた部分は自動的に改行される
インライン要素→<span>,<a>など
特徴
・改行されない
borderプロパティ
枠線をつけるプロパティ。
border: 太さ(px) 種類 色;
と記述する。
(例)
.moji{
border: 5px solid red;
}
枠線の種類についてはこちらのサイトが参考になります。
border-top
border-left
border-bottom
border-right
のように方向を指定すると指定した方向にのみ枠線がつく。