日々思いついたことを気ままに書くブログです。

senseiを始めてみた8

こんにちは!じゅんこです!

今回もsenseiで絵の勉強をしていきます!

イラストの描き方を動画で学ぶ! - sensei by pixiv

sensei.pixiv.net

描いたものがこちらです!

f:id:rakujnk:20180723193255j:plain

手癖で描いた時よりも比率を意識した方が多少バランスがよくなっている気がしますね!

しかし比率はあくまで目安。

キャラの体形によりバランスが変わるので、とりあえず頭に入れておくという感じがよさそうですね!

ではまた次回!

 

senseiを始めてみた7

お久しぶりです!

今回もsenseiで絵の練習をしました!

イラストの描き方を動画で学ぶ! - sensei by pixiv

sensei.pixiv.net

描いたものがこちらです!

f:id:rakujnk:20180721013947j:plain

全身のバランスって難しいですね!

手癖で描くと6頭身になりがちなのでせめて7頭身くらいで描けるようにしていきたいです!

見た感じ下半身は貧弱な気がしますね…下半身難しい。

ではまた次回!

 

ProgateでHTMLを勉強する15

要素を透過させる

opacityプロパティ

0.0(透明)~1.0(不透明)の数値で指定する。

(例)

opacity: 0.7;

 

文字の間隔を指定する

letter-spacingプロパティ

(例)

letter-spacing: 10px;

 

displayプロパティ

要素の種類を変更できる

・block(ブロック要素)

・inline-block(インラインブロック要素)

・inline(インライン要素)

の3つを指定することができる。

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="保存">

 

このままではまだメールフォームとしては使用できないので、別途知識が必要。

簡単にメールフォームを使いたいならレンタルサービスで作成することもできる。

忍者ツールズfc2など)

ProgateでHTMLを勉強する12

margin

要素の外側に余白を作るプロパティ。

margin : 値(px);

で指定する。

書き方のルールはpaddingと同じ。

rakujnk.hateblo.jp

paddingとmarginの違い

paddingと用途は似ているが、paddingは要素の内側、marginは要素の外側に余白を作る。

(例)

f:id:rakujnk:20180606213205j:plain

paddingは指定したpx分加算して表示されるが、marginは相殺される。

(例)

f:id:rakujnk:20180606212642j:plain

 

ProgateでHTMLを勉強する11

文中の一部にCSSを適用させる

適用させたい部分を<span></span>で囲み、spanタグにCSSを指定する。

 

ブロック要素とインライン要素

ブロック要素→<div>,<h1>,<p>など

特徴

・親要素の幅一杯に広がる

・ブロック要素で囲まれた部分は自動的に改行される

 

インライン要素→<span>,<a>など

特徴

・改行されない

 

borderプロパティ

枠線をつけるプロパティ。

border: 太さ(px) 種類 色;

と記述する。

(例)

.moji{

 border: 5px solid red;

}

 

枠線の種類についてはこちらのサイトが参考になります。

beginners-hp.com

 

border-top

border-left

border-bottom

border-right

のように方向を指定すると指定した方向にのみ枠線がつく。