diadia

趣味のプログラムを書く 

ボックスのスタイル

ベース記事

css使い方

内容

  1. ブロックタイプレベルとインラインレベル
  2. widthとheightの使い方
  3. 外側の余白を調整する
  4. 内側の余白を調整する
  5. 境界線をつける
  6. インラインタイプをブロックタイプに変換する方法
  7. ボックスの角を丸くする

1.ブロックタイプレベルとインラインレベル

htmlのタグにはブロックタイプレベルとインラインレベルがある。これは何か?それはタグの領域がどこまであるのかである。ブロックタイプにはh1やpタグがある。インラインタイプにはaタグがある。ブロックタイプはウィンドウの横幅いっぱいに広がるもの。ボックスがウィンドウ横幅いっぱいまで広がるから別のタグを直下に置くと改行されたように見える。

ボックスが持つ領域は4つある。コンテンツ領域、パディング領域、ボーダー領域、マージン領域である。ボーダー領域はパディング領域とマージン領域の堺を示す。

2.widthとheightの使い方

横幅と縦幅を設定するには以下のプロパティを用いる。

プロパティ 役割
width 横幅の指定 px, %, auto
height 縦幅の指定 px, %, auto

heightの値としてはautoにしとくと良い。

3.外側の余白を調整する





プロパティ 役割 使い方
margin 外側余白を作る margin : 上 右 下 左 ;
使用例 -- -- margin : 12px 20 px 30 px 0 ;
使用例 -- -- margin : 20px ;
使用例 margin-top 上部の余白のみ margin-top : 20px ;
上、下、右、左だけ余白を外側に追加したい場合は、それぞれmargin-top,margin-bottom,margin-right,margin-leftを使う。

marginが上下で設置された場合は重複分は相殺される。

4.内側の余白を調整する

コンテンツ領域内に余白部分を設けるプロパティはpaddingである。paddingを設定した場合、背景色が継続して適用される。使い方はmarginと同じ。

(参考)背景色を白にしたいときは
background-color : #fff ;を用いる

5.境界線をつける

paddingとmarginの境界を作成するプロパティはborderを使う。

プロパティ 使い方 使用例
border border : 線のサイズ 線の種類 色 border : 10px solid red
border-bottom border-bottom : 線のサイズ 線の種類 色 border-bottom : 10px solid red
border-top, border-right, border-bottom, border-leftがある。

説明
noneボーダーなし、初期値
solid一本線
dashed破線
dotted点線
double二本線
groove立体的に窪んだ線
ridge立体的に隆起した線
inset全体が立体的に窪んだ線
outset全体が立体的に隆起した線


6.インラインタイプをブロックタイプに変換する方法

aタグのようなインライン要素をh1,pのようなブロック要素に変換するにはdisplayのプロパティを用いる。これは通常aタグに対してmarginは使えないのでmarginが使えるブロックタイプに変換するためにある。
displayの値は以下のものである。

説明
blockブロックレベル要素に変更(横幅100%になる)
inline-blockインライン&ブロックレベル要素に変更(横幅は文章までのブロック)
inlineインライン要素に変更


a{ display : inline-block } これを使ってmarginとpadingで調整する手続きで取る。

7.ボックスの角を丸くする

border-radiusを用いて角を丸くする。

border : 左上 右上 右下 左下;と使う

ex border-radius : 10px 5px 5px 10px ;

すべて10pxの場合は
border-radius : 10 px ; と書くことができる。

テキストスタイル

親記事

css使い方

内容

  1. フォントの種類を変える
  2. フォントのサイズを変える
  3. 文字の太さを変える
  4. 下線や打ち消し線を加える
  5. 文章の行間を設定する
  6. フォントの設定を一括で行う場合

フォントの種類を変える

プロパティはfont-familyを用いる。ユーザの環境によってはフォントがインストールされていない場合がある。その際はそのフォント種類で表示されない。こういう場合に備えて値を連続で書くこともできる。

font-familyの値リスト:http://www.htmq.com/style/font-family.shtml
また値は’’で括る具体的なフォントと’’を必要としないフォントがある点に注意。

値としてgoogle web fontsを用いることもできる。
Google Fonts
Google Fonts + Japanese • Google Fonts + 日本語

フォントのサイズを変える

プロパティはfont-sizeを用いる。値は多くの種類がある。値を2つの種類に分けることができる。絶対単位(mm,cm,in,pt,pc)と相対単位(em,ex,px,%)。

webページのスタイリングにおいて大きさの指定は相対のが望ましいとされる。

em:親要素の高さに対する倍率で長さ、高さを指定
ex:親要素の高さに対する倍率で長さ、高さを指定
px:画面を構成する点に対する倍率で長さ、高さを指定
%:親要素を基準にしてサイズを指定

文字の太さを変える

プロパティはfont-weightを使う。値には数値とキーワードの2種類がある。数値は100から900まで。キーワードはbolder,bold,normal,lighter等の種類がある。

下線や打ち消し線を加える

プロパティはtext-decorationを用いる。

効果
none ハイパーリンクの下線部を消すのに使ったりする。
underline テキストの下に線を引く。
overline テキストの上に線をつける。
line-through 打ち消し線を引く。


文章の行間を設定する

プロパティはline-heightを用いる。値の種類は以下の通りである。

normal(デフォルト), 100px, 1.5(フォントサイズの1.5倍の大きさが行間になる), 200%(フォントサイズの200%文が行間となる。)

フォントの設定を一括で行う場合

fontというプロパティを用いる。値の順番は 太さ、大きさ/行間、font-familyである。

header h2 {
      font : bolder 80px/80px serif 
                 }

cssコメントアウトの書き方

ベース記事

css使い方

コメントアウトの書き方

pythonの場合はコメント文頭で#もしくは'''でコメントを括るとコメントアウトできる。javascriptでは//を使う。cssの場合はスラッシュとアスタリスクを組み合わせる。

/*  コメントを書く */

makemigrationsでNo changes detectedが返される場合

参考URL
https://www.monotalk.xyz/blog/django-model-%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E3%81%8Cmakemigrations-%E3%81%A7-no-changes-detected-%E3%81%AB%E3%81%AA%E3%82%8B/

あと
App 'products' could not be found. Is it in INSTALLED_APPS?
このようにターミナルで返されることがあったら、それはsettings.pyでモジュール(app名)をINSTALLED_APPSに記入してないので追記すること。

ModelFormなるもの

ベース記事

formの扱い方 まとめ

ModelForm

ModelFormの有用性

今までフォームに関するものは、htmlで記載する方法と、forms.Formの継承として記述する方法があった。これに加えてforms.ModelFormなるものがあることが分かった。これはforms.Formでフォームの定義をしていたが、models.pyのモデルに基づいたformを自動で作ってくれる。これは少ない記述量で完成することができて便利である。

参考url
https://docs.djangoproject.com/ja/2.1/topics/forms/modelforms/#module-django.forms.models

Django ModelFormをカスタマイズする | ぷろぐら×でざいん
https://torina.top/detail/277/

セレクタの書き方

関連記事

css使い方


セレクタの書き方

セレクタはhtmlタグを単純に書くだけではない。

例えばheaderのh2属性のみにcssを適用したい場合には以下のように書く。

header h2{
          color : black ;
           }

リンクが青色で下線部が引かれている状態を直す場合

css

header nav ul li a{
             font-size : 20px;
             color : black;
             text-decoration : none;
                 }

idを用いたセレクタの書き方

セレクタはhtmlのタグだけでなく、タグ内の属性をセレクタとして利用できる。

その差異にはid名の直前に#を記述すること。

html

<h2>
    <input id="fullname" type="text">
</h2>

であるならば

    h2#fullname{
        font-size : 30px;
                }

classを用いたセレクタの書き方

idをセレクタとするときは#を使うのに対し、classを使う場合は.(ピリオド)を使う。

<h2 class="text_center">CSS使い方</h2>
<p>............................................................................................</p>
<h2 class="text_center">使用上の注意点</h2>
<p>................................................................</p>
<h3 class="text_center">例外</h3>

であるならば、

.text_center{
           text-align : center ;
                }

こう書くことでタグh2,h2,h3のテキストが中央寄せになる。