みかづち工房

ドラクエ10(休止中)・ドラクエウォーク・星ドラ・ポケモンGOを楽しんでます。他にも興味のある事をジャンルを問わず気の向くままに書いています。

ウェブカツ

WEBサービス部Lesson7~8@ウェブカツ

投稿日:

こちらで掲載しているコードや画像は ウェブカツ の動画内で使われたものを引用しています。

スポンサーリンク

Lesson7「画面を作ろう!」

HTMLファイル内にはHTMLタグだけ、CSSファイル内にはCSSだけと住み分けすると後からも見やすく、修正しやすくなる

vertical-align: middle;はインライン要素、テーブルタグに対してだけ使え、親要素に対して上下中央に揃えることが出来るもの

floatを使ったら、親要素で必ずoverflow: hidden;を使って回り込みを解除する

CSS3から使えるようになったbox-sizing: border-box;を使うことでpaddingやborderの幅も指定したwidth内に自動で納めてくれる

widthに100%を指定すると「親要素のwidth幅いっぱい」という指定になる

Lesson8「画面をを作ろう!part2」

画像を縦に並べて表示するのに親要素を設けその親要素に対して余白を指定し、さらにそれぞれの画像に余白を設けるとき最後の画像に親要素分と子要素分の余白が付くので最後の子要素の余白を付けないようにするには:lastchildを子要素につけ余白をなくすことが出来る。

親要素の高さ(height)と行の高さ(line‐height)を同じにすると文字位置を中央揃えに出来る

スポンサーリンク







-ウェブカツ
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

本日の出来事@2018/10/10

スポンサーリンク ポケモンGO 今日は第4世代の実装が近い事とバランス調整が行われる事が発表されてTwitter、YouTubeが騒がしくなっておりました。 公式より発表された映像 …

続きを読む

PHP・MySQL部Lesson11~13@ウェブカツ

WordPress › エラー

このサイトで重大なエラーが発生しました。

WordPress でのデバッグをさらに詳しく見る。