Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

CSSとかのコツ

CSSって、ちゃんと勉強してないので、いまいち理解できてない。他の人が作ったhtmlファイルとか、cssファイルは読解が難しい気がする。

  • CSSの場合、classが重要なので、classをまず確認する。
  • そのclassが、どういう仕様になっているのか、コードの記載があるcssファイル(main.css)とかで確認する。
  • djangoに限って言えば、以下のようにstyleで囲んで新しいcss classを作成する。そのclassを追記すれば無理やり上書きできる。
<style>
{% block style %}
.btn-large {
    background-color: #00aeda;
}

.btn-blue {
    color: white;
    background-color:#00aeda;
}

.appIconBig{
 display: block;
 margin-left: auto;
 margin-right: auto;
 height: 75px;
 width: 75px;
}

.appIconS{
 padding: 0px;
 margin: 0px;
 height: 30px;
 width: 30px;
 vertical-align: middle;
}

.navbar-brand-small{
    padding:0px;
    margin:0px;
    vertical-align: middle;
}

@import 'https://fonts.googleapis.com/css?family=Dosis|PT+Sans';
.backimage-text{
    font-family:'PT Sans','Dosis', Avenir, "Open Sans", "游ゴシック", "Yu Gothic", Helvetica, sans-serif;
    /*font-weight: bolder;*/
}
{% endblock %}
</style>
  • cssを上書きするときに、ハイフォンでつないで、別のclassを追加するのはわかりやすいかもしれない。navbar-brandの場合は、navbar-brand-small とかいうふうに。

  • padding とmarginは大事。

  • padding 5 5 とかで、縦、横の設定が一気にできるので、楽。

  • padding-top, padding-bottom, padding-left, padding-right とかでも設定できる。