20190506のCSSに関する記事は5件です。

投稿日：2019-05-06T23:10:10+09:00

tailwindcssを使ってみた　#GWアドベントカレンダー

#GWアドベントカレンダー「使いたかったもの使ってみたカレンダー（1人アドベントカレンダー）」の9日目、5/5記事です。

tailwindcss使ってみた

tailwindcssとは、bootstrapみたいなcssフレームワークの１つです。
bootstrapとの違いは、あくまでcssのみの話にとどまっていて、UI(HTML)には触れてないというところのようです。

style="xxx" と直接書く代わりに class="xxx"とかく、程度のものです。

良さそうなところ/面白かったところ

UIに絡まないので、CSSの知識がそのまま使えてわかりやすい

複数のcss属性を組み合わせたコンポーネントを定義できて、それが使いやすい

コンポーネントをみんなでシェアするエコシステムがある

レスポンシブが簡単にできる

あんまりイケてないところ

css知識が無いと厳しい

総合評価

cssがわかっている人が、cssファイル作るのめんどくさいときに使うと良いなというものでした。
css初心者にはbootstrapをオススメしますが、bootstrapっぽさを出したくないサイトの場合は良いかなと思います。

　 Tweet
Qiitaで続きを読む

投稿日：2019-05-06T17:01:31+09:00

調べものする前に…

明日からまた仕事です．
休み明けで色々と忘れていそうですが，検索するのが面倒なのでリンクをまとめました．

HTML+CSS+JS

MDN Web Docs
ブラウザFirefoxを開発するMozillaによる，Web標準ドキュメント．
以下が主要なページである．

HTMLリファレンス｜MDN

CSSリファレンス｜MDN

JavaScriptリファレンス｜MDN

CSS

webliker
CSSで忘れやすいことが分かりやすくまとめられている．

CSSのセレクタ40個を総まとめ

paddingとmarginの違い

ショートハンド

JavaScript

JavaScriptの入門書 #jsprimer
ECMAScript 2015をベースにJSを学べる，GitBookを用いた電子書籍形式のWebサイト.

jQuery

jQuery API Documentation

Bootstrap

Bootstrap 4.3 公式Doc

SQL

SQLデータベース｜TECHSCORE

Excel/VBA

Office TANAKA

Slack

リマインダ―の設定

　 Tweet
Qiitaで続きを読む

投稿日：2019-05-06T16:20:24+09:00

CSS、各ウインドウサイズ別で指定できるpadding

uikitの書き方でのpadding指定のscssコードです。

child指定もできます。

_padding.scss

$direction: "", -left, -right, -top, -bottom;
$element_size: (
        '':30px,
        -small:15px,
        -large:30px);
$element_window_bigger_size: (
        '':40px,
        -small:15px,
        -large:70px);

$childs: (
        '':'',
        -child:' > *'
);

$element_1200_size: (
        '':40px,
        -large:70px);

$window_size: (
        "":'',
        \@s: 640px,
        \@m: 960px,
        \@l: 1200px,
        \@xl: 1600px,
);
@mixin padding($ele,$w_s:'',$remove_flag:true) {
   @each $d in $direction {
      @if ($remove_flag) {
         .uk-padding-remove#{$d}#{$w_s} {
            padding#{$d}: 0 !important;
         }
      }
      @each $child, $c_ele in $childs {
         @each $e_s, $e_px in $ele {
            .uk-padding#{$child}#{$e_s}#{$d}#{$w_s}#{$c_ele} {
               padding#{$d}: $e_px;
            }
         }
      }

   }
}

@each $w_s, $w_px in $window_size {
   @if ($w_s=='') {
      @include padding($element_size, $w_s);
   } @else {
      @if ($w_px<1200) {
         //biggar_px
         @media (min-width: 1200px) {
            @include padding($element_1200_size, $w_s, false);
         }
      }
      @media (min-width: $w_px) {
         @if ($w_px<1200) {
            @include padding($element_size, $w_s);
         } @else {
            @include padding($element_window_bigger_size, $w_s);
         }
      }
   }
}

一応cssもおいておきます。

padding.css

.uk-padding-remove {
  padding: 0 !important; }

.uk-padding {
  padding: 30px; }

.uk-padding-small {
  padding: 15px; }

.uk-padding-large {
  padding: 30px; }

.uk-padding-child > * {
  padding: 30px; }

.uk-padding-child-small > * {
  padding: 15px; }

.uk-padding-child-large > * {
  padding: 30px; }

.uk-padding-remove-left {
  padding-left: 0 !important; }

.uk-padding-left {
  padding-left: 30px; }

.uk-padding-small-left {
  padding-left: 15px; }

.uk-padding-large-left {
  padding-left: 30px; }

.uk-padding-child-left > * {
  padding-left: 30px; }

.uk-padding-child-small-left > * {
  padding-left: 15px; }

.uk-padding-child-large-left > * {
  padding-left: 30px; }

.uk-padding-remove-right {
  padding-right: 0 !important; }

.uk-padding-right {
  padding-right: 30px; }

.uk-padding-small-right {
  padding-right: 15px; }

.uk-padding-large-right {
  padding-right: 30px; }

.uk-padding-child-right > * {
  padding-right: 30px; }

.uk-padding-child-small-right > * {
  padding-right: 15px; }

.uk-padding-child-large-right > * {
  padding-right: 30px; }

.uk-padding-remove-top {
  padding-top: 0 !important; }

.uk-padding-top {
  padding-top: 30px; }

.uk-padding-small-top {
  padding-top: 15px; }

.uk-padding-large-top {
  padding-top: 30px; }

.uk-padding-child-top > * {
  padding-top: 30px; }

.uk-padding-child-small-top > * {
  padding-top: 15px; }

.uk-padding-child-large-top > * {
  padding-top: 30px; }

.uk-padding-remove-bottom {
  padding-bottom: 0 !important; }

.uk-padding-bottom {
  padding-bottom: 30px; }

.uk-padding-small-bottom {
  padding-bottom: 15px; }

.uk-padding-large-bottom {
  padding-bottom: 30px; }

.uk-padding-child-bottom > * {
  padding-bottom: 30px; }

.uk-padding-child-small-bottom > * {
  padding-bottom: 15px; }

.uk-padding-child-large-bottom > * {
  padding-bottom: 30px; }

@media (min-width: 1200px) {
  .uk-padding\@s {
    padding: 40px; }

  .uk-padding-large\@s {
    padding: 70px; }

  .uk-padding-child\@s > * {
    padding: 40px; }

  .uk-padding-child-large\@s > * {
    padding: 70px; }

  .uk-padding-left\@s {
    padding-left: 40px; }

  .uk-padding-large-left\@s {
    padding-left: 70px; }

  .uk-padding-child-left\@s > * {
    padding-left: 40px; }

  .uk-padding-child-large-left\@s > * {
    padding-left: 70px; }

  .uk-padding-right\@s {
    padding-right: 40px; }

  .uk-padding-large-right\@s {
    padding-right: 70px; }

  .uk-padding-child-right\@s > * {
    padding-right: 40px; }

  .uk-padding-child-large-right\@s > * {
    padding-right: 70px; }

  .uk-padding-top\@s {
    padding-top: 40px; }

  .uk-padding-large-top\@s {
    padding-top: 70px; }

  .uk-padding-child-top\@s > * {
    padding-top: 40px; }

  .uk-padding-child-large-top\@s > * {
    padding-top: 70px; }

  .uk-padding-bottom\@s {
    padding-bottom: 40px; }

  .uk-padding-large-bottom\@s {
    padding-bottom: 70px; }

  .uk-padding-child-bottom\@s > * {
    padding-bottom: 40px; }

  .uk-padding-child-large-bottom\@s > * {
    padding-bottom: 70px; } }
@media (min-width: 640px) {
  .uk-padding-remove\@s {
    padding: 0 !important; }

  .uk-padding\@s {
    padding: 30px; }

  .uk-padding-small\@s {
    padding: 15px; }

  .uk-padding-large\@s {
    padding: 30px; }

  .uk-padding-child\@s > * {
    padding: 30px; }

  .uk-padding-child-small\@s > * {
    padding: 15px; }

  .uk-padding-child-large\@s > * {
    padding: 30px; }

  .uk-padding-remove-left\@s {
    padding-left: 0 !important; }

  .uk-padding-left\@s {
    padding-left: 30px; }

  .uk-padding-small-left\@s {
    padding-left: 15px; }

  .uk-padding-large-left\@s {
    padding-left: 30px; }

  .uk-padding-child-left\@s > * {
    padding-left: 30px; }

  .uk-padding-child-small-left\@s > * {
    padding-left: 15px; }

  .uk-padding-child-large-left\@s > * {
    padding-left: 30px; }

  .uk-padding-remove-right\@s {
    padding-right: 0 !important; }

  .uk-padding-right\@s {
    padding-right: 30px; }

  .uk-padding-small-right\@s {
    padding-right: 15px; }

  .uk-padding-large-right\@s {
    padding-right: 30px; }

  .uk-padding-child-right\@s > * {
    padding-right: 30px; }

  .uk-padding-child-small-right\@s > * {
    padding-right: 15px; }

  .uk-padding-child-large-right\@s > * {
    padding-right: 30px; }

  .uk-padding-remove-top\@s {
    padding-top: 0 !important; }

  .uk-padding-top\@s {
    padding-top: 30px; }

  .uk-padding-small-top\@s {
    padding-top: 15px; }

  .uk-padding-large-top\@s {
    padding-top: 30px; }

  .uk-padding-child-top\@s > * {
    padding-top: 30px; }

  .uk-padding-child-small-top\@s > * {
    padding-top: 15px; }

  .uk-padding-child-large-top\@s > * {
    padding-top: 30px; }

  .uk-padding-remove-bottom\@s {
    padding-bottom: 0 !important; }

  .uk-padding-bottom\@s {
    padding-bottom: 30px; }

  .uk-padding-small-bottom\@s {
    padding-bottom: 15px; }

  .uk-padding-large-bottom\@s {
    padding-bottom: 30px; }

  .uk-padding-child-bottom\@s > * {
    padding-bottom: 30px; }

  .uk-padding-child-small-bottom\@s > * {
    padding-bottom: 15px; }

  .uk-padding-child-large-bottom\@s > * {
    padding-bottom: 30px; } }
@media (min-width: 1200px) {
  .uk-padding\@m {
    padding: 40px; }

  .uk-padding-large\@m {
    padding: 70px; }

  .uk-padding-child\@m > * {
    padding: 40px; }

  .uk-padding-child-large\@m > * {
    padding: 70px; }

  .uk-padding-left\@m {
    padding-left: 40px; }

  .uk-padding-large-left\@m {
    padding-left: 70px; }

  .uk-padding-child-left\@m > * {
    padding-left: 40px; }

  .uk-padding-child-large-left\@m > * {
    padding-left: 70px; }

  .uk-padding-right\@m {
    padding-right: 40px; }

  .uk-padding-large-right\@m {
    padding-right: 70px; }

  .uk-padding-child-right\@m > * {
    padding-right: 40px; }

  .uk-padding-child-large-right\@m > * {
    padding-right: 70px; }

  .uk-padding-top\@m {
    padding-top: 40px; }

  .uk-padding-large-top\@m {
    padding-top: 70px; }

  .uk-padding-child-top\@m > * {
    padding-top: 40px; }

  .uk-padding-child-large-top\@m > * {
    padding-top: 70px; }

  .uk-padding-bottom\@m {
    padding-bottom: 40px; }

  .uk-padding-large-bottom\@m {
    padding-bottom: 70px; }

  .uk-padding-child-bottom\@m > * {
    padding-bottom: 40px; }

  .uk-padding-child-large-bottom\@m > * {
    padding-bottom: 70px; } }
@media (min-width: 960px) {
  .uk-padding-remove\@m {
    padding: 0 !important; }

  .uk-padding\@m {
    padding: 30px; }

  .uk-padding-small\@m {
    padding: 15px; }

  .uk-padding-large\@m {
    padding: 30px; }

  .uk-padding-child\@m > * {
    padding: 30px; }

  .uk-padding-child-small\@m > * {
    padding: 15px; }

  .uk-padding-child-large\@m > * {
    padding: 30px; }

  .uk-padding-remove-left\@m {
    padding-left: 0 !important; }

  .uk-padding-left\@m {
    padding-left: 30px; }

  .uk-padding-small-left\@m {
    padding-left: 15px; }

  .uk-padding-large-left\@m {
    padding-left: 30px; }

  .uk-padding-child-left\@m > * {
    padding-left: 30px; }

  .uk-padding-child-small-left\@m > * {
    padding-left: 15px; }

  .uk-padding-child-large-left\@m > * {
    padding-left: 30px; }

  .uk-padding-remove-right\@m {
    padding-right: 0 !important; }

  .uk-padding-right\@m {
    padding-right: 30px; }

  .uk-padding-small-right\@m {
    padding-right: 15px; }

  .uk-padding-large-right\@m {
    padding-right: 30px; }

  .uk-padding-child-right\@m > * {
    padding-right: 30px; }

  .uk-padding-child-small-right\@m > * {
    padding-right: 15px; }

  .uk-padding-child-large-right\@m > * {
    padding-right: 30px; }

  .uk-padding-remove-top\@m {
    padding-top: 0 !important; }

  .uk-padding-top\@m {
    padding-top: 30px; }

  .uk-padding-small-top\@m {
    padding-top: 15px; }

  .uk-padding-large-top\@m {
    padding-top: 30px; }

  .uk-padding-child-top\@m > * {
    padding-top: 30px; }

  .uk-padding-child-small-top\@m > * {
    padding-top: 15px; }

  .uk-padding-child-large-top\@m > * {
    padding-top: 30px; }

  .uk-padding-remove-bottom\@m {
    padding-bottom: 0 !important; }

  .uk-padding-bottom\@m {
    padding-bottom: 30px; }

  .uk-padding-small-bottom\@m {
    padding-bottom: 15px; }

  .uk-padding-large-bottom\@m {
    padding-bottom: 30px; }

  .uk-padding-child-bottom\@m > * {
    padding-bottom: 30px; }

  .uk-padding-child-small-bottom\@m > * {
    padding-bottom: 15px; }

  .uk-padding-child-large-bottom\@m > * {
    padding-bottom: 30px; } }
@media (min-width: 1200px) {
  .uk-padding-remove\@l {
    padding: 0 !important; }

  .uk-padding\@l {
    padding: 40px; }

  .uk-padding-small\@l {
    padding: 15px; }

  .uk-padding-large\@l {
    padding: 70px; }

  .uk-padding-child\@l > * {
    padding: 40px; }

  .uk-padding-child-small\@l > * {
    padding: 15px; }

  .uk-padding-child-large\@l > * {
    padding: 70px; }

  .uk-padding-remove-left\@l {
    padding-left: 0 !important; }

  .uk-padding-left\@l {
    padding-left: 40px; }

  .uk-padding-small-left\@l {
    padding-left: 15px; }

  .uk-padding-large-left\@l {
    padding-left: 70px; }

  .uk-padding-child-left\@l > * {
    padding-left: 40px; }

  .uk-padding-child-small-left\@l > * {
    padding-left: 15px; }

  .uk-padding-child-large-left\@l > * {
    padding-left: 70px; }

  .uk-padding-remove-right\@l {
    padding-right: 0 !important; }

  .uk-padding-right\@l {
    padding-right: 40px; }

  .uk-padding-small-right\@l {
    padding-right: 15px; }

  .uk-padding-large-right\@l {
    padding-right: 70px; }

  .uk-padding-child-right\@l > * {
    padding-right: 40px; }

  .uk-padding-child-small-right\@l > * {
    padding-right: 15px; }

  .uk-padding-child-large-right\@l > * {
    padding-right: 70px; }

  .uk-padding-remove-top\@l {
    padding-top: 0 !important; }

  .uk-padding-top\@l {
    padding-top: 40px; }

  .uk-padding-small-top\@l {
    padding-top: 15px; }

  .uk-padding-large-top\@l {
    padding-top: 70px; }

  .uk-padding-child-top\@l > * {
    padding-top: 40px; }

  .uk-padding-child-small-top\@l > * {
    padding-top: 15px; }

  .uk-padding-child-large-top\@l > * {
    padding-top: 70px; }

  .uk-padding-remove-bottom\@l {
    padding-bottom: 0 !important; }

  .uk-padding-bottom\@l {
    padding-bottom: 40px; }

  .uk-padding-small-bottom\@l {
    padding-bottom: 15px; }

  .uk-padding-large-bottom\@l {
    padding-bottom: 70px; }

  .uk-padding-child-bottom\@l > * {
    padding-bottom: 40px; }

  .uk-padding-child-small-bottom\@l > * {
    padding-bottom: 15px; }

  .uk-padding-child-large-bottom\@l > * {
    padding-bottom: 70px; } }
@media (min-width: 1600px) {
  .uk-padding-remove\@xl {
    padding: 0 !important; }

  .uk-padding\@xl {
    padding: 40px; }

  .uk-padding-small\@xl {
    padding: 15px; }

  .uk-padding-large\@xl {
    padding: 70px; }

  .uk-padding-child\@xl > * {
    padding: 40px; }

  .uk-padding-child-small\@xl > * {
    padding: 15px; }

  .uk-padding-child-large\@xl > * {
    padding: 70px; }

  .uk-padding-remove-left\@xl {
    padding-left: 0 !important; }

  .uk-padding-left\@xl {
    padding-left: 40px; }

  .uk-padding-small-left\@xl {
    padding-left: 15px; }

  .uk-padding-large-left\@xl {
    padding-left: 70px; }

  .uk-padding-child-left\@xl > * {
    padding-left: 40px; }

  .uk-padding-child-small-left\@xl > * {
    padding-left: 15px; }

  .uk-padding-child-large-left\@xl > * {
    padding-left: 70px; }

  .uk-padding-remove-right\@xl {
    padding-right: 0 !important; }

  .uk-padding-right\@xl {
    padding-right: 40px; }

  .uk-padding-small-right\@xl {
    padding-right: 15px; }

  .uk-padding-large-right\@xl {
    padding-right: 70px; }

  .uk-padding-child-right\@xl > * {
    padding-right: 40px; }

  .uk-padding-child-small-right\@xl > * {
    padding-right: 15px; }

  .uk-padding-child-large-right\@xl > * {
    padding-right: 70px; }

  .uk-padding-remove-top\@xl {
    padding-top: 0 !important; }

  .uk-padding-top\@xl {
    padding-top: 40px; }

  .uk-padding-small-top\@xl {
    padding-top: 15px; }

  .uk-padding-large-top\@xl {
    padding-top: 70px; }

  .uk-padding-child-top\@xl > * {
    padding-top: 40px; }

  .uk-padding-child-small-top\@xl > * {
    padding-top: 15px; }

  .uk-padding-child-large-top\@xl > * {
    padding-top: 70px; }

  .uk-padding-remove-bottom\@xl {
    padding-bottom: 0 !important; }

  .uk-padding-bottom\@xl {
    padding-bottom: 40px; }

  .uk-padding-small-bottom\@xl {
    padding-bottom: 15px; }

  .uk-padding-large-bottom\@xl {
    padding-bottom: 70px; }

  .uk-padding-child-bottom\@xl > * {
    padding-bottom: 40px; }

  .uk-padding-child-small-bottom\@xl > * {
    padding-bottom: 15px; }

  .uk-padding-child-large-bottom\@xl > * {
    padding-bottom: 70px; } }

　 Tweet
Qiitaで続きを読む

投稿日：2019-05-06T16:20:24+09:00

各ウインドウサイズ別で指定できるpaddingとmarginのscss

uikitの書き方でのpaddingとmarginが指定できるscssコードです。

child指定もできます。

_padding_margin.scss

$direction: "", -left, -right, -top, -bottom;
$padding_margin: padding, margin;
$margin_size: (
        '':20px,
        -small:10px,
        -medium:40px,
        -large:40px,
        -xlarge:70px,
        -auto:auto,
);
$margin_big_size: (
        -large:70px,
        -xlarge:140px
);
$padding_size: (
        '':30px,
        -small:15px,
        -large:30px);
$padding_big_size: (
        '':40px,
        -large:70px);

$childs: (
        '':'',
        -child:' > *'
);

$window_size: (
        "":0,
        \@s: 640px,
        \@m: 960px,
        \@l: 1200px,
        \@xl: 1600px,
);

@mixin padding_or_margin($mode,$ele,$w_s:'',$remove_flag:true) {
   $important: '';
   @if $w_s=='' and $mode==margin {
      $important: !important;
   }
   @each $d in $direction {
      @if ($remove_flag) {
         .uk-#{$mode}-remove#{$d}#{$w_s} {
            #{$mode}#{$d}: 0 !important;
         }
      }
      @each $child, $c_ele in $childs {
         @each $e_s, $e_px in $ele {
            .uk#{$child}-#{$mode}#{$e_s}#{$d}#{$w_s}#{$c_ele} {
               #{$mode}#{$d}: $e_px #{$important};
            }
         }
      }

   }
}

@each $p_m in $padding_margin {
   $target: $margin_size;
   $target_big: $margin_big_size;
   @if ($p_m == padding) {
      $target: $padding_size;
      $target_big: $padding_big_size;
   }
   @each $w_s, $w_px in $window_size {
      @if $w_s=='' {
         /**nomal#{$w_s}#{$p_m}}**/
         @include padding_or_margin($p_m, $target, $w_s);
         @if ($w_px<1200) {
            @media (min-width: 1200px) {
               @include padding_or_margin($p_m, $target_big, $w_s, false);
            }
         }
      } @else if ($w_s!='') {
         @media (min-width: $w_px) {
            @if ($w_px<1200) {
               @include padding_or_margin($p_m, $target, $w_s);
               @media (min-width: 1200px) {
                  @include padding_or_margin($p_m, $target_big, $w_s, false);
               }
            } @else {
               @include padding_or_margin($p_m, $target_big, $w_s);
            }
         }
      }

   }
}

　 Tweet
Qiitaで続きを読む

投稿日：2019-05-06T16:13:01+09:00

カッコいいフォントを読み込もうとした話

カッコいいフォントを読み込もうとした話

わし
「GW10連休とか、暇すぎて脳みそ溶けちゃうから、勉強も兼ねて Node.js でWebアプリケーション作ろっと・・・。」
(・・・せっかく作るなら、カッコいいフォント使いたいなあ）

フォントの設定方法

フォントは、デフォルトでブラウザが対応しているものもあれば、そうでないものも存在する。
大概、~~(ちょっと意味の分からない形をした)~~カッチョええデザインのフォントは対応していなかったりするので、サイトから拾って来ます。

無料サイトからフォントファイルを拾って来る

以下にサイトを載せておきますが、当然のことながら各ファイルが 商用利用可能かどうかはご自身でキチンと確認してくださいね？

参考にしたサイト

2019年用、日本語のフリーフォント377種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記

ダウンロードすると、こんな感じの拡張子のファイルが手に入るはずです。

hogehoge.ttf

hugahuga.otf

...etc

フォントファイルの読み込みをCSSで設定する

拾ってきたフォントファイルを以下の感じでCSSに設定します。
@font-face{
    // font-familyで呼び出す際に使用するフォント名を指定
    font-family: 'hugahuga';
    // 呼び出し時にデフォルトでfont-styleを指定可能
    font-style:normal;
    // 同上、font-weightも指定可能
    font-weight: unset;
    // 読み込むフォントファイルを指定
    src:url('/hugahuga.ttf');
}
結果！！

わし
（あれ・・・？なんか文字が思ったのと違うけど・・・？どういうことやねん(；・∀・)
開発者支援ツールで確認してみるかあ。。。ポチっ[F12]

わし
「ファイルが重すぎて読み込めてない・・・だと？？」

総括

特にローカルで見ている分には問題ないですが、独自フォントの読み込みは通信容量を馬鹿みたいに食ってしまいそうですね。
デザインのために速度や容量を食いすぎるのは問題があると言わざるを得ない・・・。

やっぱり、安心・安定の"游ゴシック"先生か"メイリオ"先輩にしておくのが無難だね！！

ちなみに、アルファベットだけなら高速です！ ※(26 ✕ 2 + 記号)だから、日本語より圧倒的に数が少ない
日本語ファイルが重い原因ですので、使用する文字を限定して読み込むなどの工夫をすれば、もっと早くできます

使用する文字を限定する記事

https://www.evoworx.co.jp/blog/pagespeed/

　 Tweet
Qiitaで続きを読む

20190506のCSSに関する記事は5件です。

tailwindcssを使ってみた　#GWアドベントカレンダー

tailwindcss使ってみた

良さそうなところ/面白かったところ

あんまりイケてないところ

総合評価

調べものする前に…

HTML+CSS+JS

CSS

JavaScript

jQuery

Bootstrap

SQL

Excel/VBA

Slack

CSS、各ウインドウサイズ別で指定できるpadding

各ウインドウサイズ別で指定できるpaddingとmarginのscss

カッコいいフォントを読み込もうとした話

カッコいいフォントを読み込もうとした話

フォントの設定方法

無料サイトからフォントファイルを拾って来る

フォントファイルの読み込みをCSSで設定する

結果！！

総括

日付別

タグ一覧

20190506のCSSに関する記事は5件です。

tailwindcssを使ってみた #GWアドベントカレンダー

tailwindcss使ってみた

良さそうなところ/面白かったところ

あんまりイケてないところ

総合評価

調べものする前に…

HTML+CSS+JS

CSS

JavaScript

jQuery

Bootstrap

SQL

Excel/VBA

Slack

CSS、各ウインドウサイズ別で指定できるpadding

各ウインドウサイズ別で指定できるpaddingとmarginのscss

カッコいいフォントを読み込もうとした話

カッコいいフォントを読み込もうとした話

フォントの設定方法

無料サイトからフォントファイルを拾って来る

フォントファイルの読み込みをCSSで設定する

結果！！

総括

日付別

タグ一覧

tailwindcssを使ってみた　#GWアドベントカレンダー