投稿日：2020-01-12T23:46:52+09:00

gatsbyビルド時に起きるmaterial-uiのスタイル崩れを直す

gatsbyビルド時にmaterial-uiのスタイルが崩れてしまった

gatsbyで開発したspaをリリースしたらmaterial-uiで構成したコンポーネントのスタイルが崩れていました。どうやらプラグインを入れないとmaterial-uiのスタイルが崩れてしまうようです。
修正法がわかったので、共有しようと思います。

スタイル崩れの修正法

1、gatsby-plugin-material-uiをインストール

npm install gatsby-plugin-material-ui @material-ui/styles

もしくは

package.jsonに以下のようにgatsby-plugin-material-uiを加える
その後、npm installを実行

2、gatsby-config.jsにgatsby-plugin-material-uiプラグインの情報を入力する必要がある

gatsby-config.jsに以下のようにgatsby-plugin-material-uiを加える

これで、再ビルドするとmaterial-uiのcssなどのスタイルが整った。

gatsby developで立ち上がる開発環境でスタイルが崩れてない人もgatsby serveでビルド時の（本番）環境が立ち上がるのでリリース前には試しておいたほうがいいと思います。

参考にしたサイト

https://translate.googleusercontent.com/translate_c?depth=1&hl=ja&prev=search&rurl=translate.google.com&sl=en&sp=nmt4&u=https://github.com/mui-org/material-ui/issues/18197&xid=17259,15700022,15700186,15700191,15700256,15700259,15700262,15700265,15700271,15700283&usg=ALkJrhgdCMg8T0L8dnElpPSADj4XICpmHQ

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-12T23:25:36+09:00

MarkdownでのAA入力を対応してみた【ぼくのがんがえたさいきょうの掲示板】

個人で作っている掲示板サイトがある。最近日本語対応を実装しているが、途中であることに気づいてしまった。

「せっかく和訳したところでAA貼れないなら意味ない！」

AAは日本語の掲示板の不可欠な文化である。しかし現代のパソコンやスマホではAAが正しく表示されない場合が多い。これはどうにか解決したい。

やりたいこと

私の掲示板はMarkdown記法で書き込む形だ。AAをそのまま入力すると、太字として認識されたり自動的に改行が入ったりする。2chの専ブラみたいにいい感じにAAを表示したい。
<aa>(´・ω・｀)</aa>
自動的にAAを認識するのは大変そうなので、AAタグを用意する。AAタグの中身をAA用のフォントに変えて、Markdown記法の*bold*などを無視する。

無理矢理AAタグを対応する

利用しているMarkdownライブラリはrussross/blackfridayだ。諸々があって今だにv1を使ってる。
このライブラリはHTMLの入力を対応しているが、中身をMarkdown記法としてパースしてしまう。

まず、フォークしよう。そして、markdown.goにblockTagsというマップを見てみる。
markdown.go
// blockTags is a set of tags that are recognized as HTML block tags.
// Any of these can be included in markdown text without special escaping.
var blockTags = map[string]struct{}{
    "blockquote": {},
    "del":        {},
    "div":        {},
    // ...
    "aa":         {}, // ← 追加した
}
blockTagsに入っているタグはブロック（パラグラフ）になり、エスケープされないとコメントが丁寧に教えてくれた。よし、"aa": {},を追加する。これで<aa>の中身はMarkdownにならずそのまま出力される。

XSS対策としてmicrocosm-cc/bluemondayを使っている。blackfridayでMarkdownをHTMLに変換した後に、bluemondayでsanitizeをかける。bluemondayにAAタグを許可する必要がある。
var sanitizer *bluemonday.Policy

func init() {
    sanitizer = bluemonday.UGCPolicy() // よくある書式設定用のタグなどを許可
    sanitizer.AllowNoAttrs().OnElements("aa") // 属性なしの<aa>を許可
}
こうしないと<aa>が丸ごと消されてしまう。

しかし非公式のHTMLタグをそのまま出力するのは気持ち悪いので、<aa>を<p class="aa">に変えよう。PuerkitoBio/goqueryはHTMLをいじるのに便利だ。

上記の処理を組み合わせるとこうなる。
func renderMarkdown(content string) template.HTML {
    // Markdownをrender
    renderer := blackfriday.HtmlRendererWithParameters(commonHtmlFlags, "", "", blackfriday.HtmlRendererParameters{
        // ...
    })
    md := blackfriday.MarkdownOptions([]byte(content), renderer, blackfriday.Options{
        // ...
    })
    // XSS対策としてsanitize
    sanitized := sanitizer.SanitizeBytes(md)

    // goqueryを使ってHTMLをいじる
    doc, err := goquery.NewDocumentFromReader(bytes.NewReader(sanitized))
    if err != nil {
        panic(err)
    }
    // <aa>を<p class="aa">に変換
    doc.Find("aa").Each(func(_ int, sel *goquery.Selection) {
        sel.SetAttr("class", "aa")
        sel.Nodes[0].Data = "p"
    })

    // <html><body>が勝手に追加されるので省略
    html, err := doc.Find("body").Html()
    if err != nil {
        panic(err)
    }
    return template.HTML(html)
}
※ 本当はpanicせずにerrorを返すべき

たぶん、こういう処理はmarkdownのライブラリの中でやるべきだが、blackfridayのコードはヤバイのでこっちの方が楽である。実際のコードでは<aa>の対応だけじゃなくてYouTubeのembedなどは似た手段で対応している。

AAをいい感じに表示する

@scrpgilさんは素敵なAAフォントのまとめを提供してくれているので参考にした。めっちゃ助かる。ありがとうございます！

aahub_light¹というフォントは軽くて綺麗なので使うことにした。woffファイルをS3にアップてして、キャッシュするようにCache-Controlヘッダをpublic, max-age=31536000, immutableにした。AA用のCSSも作った。これも永遠にキャッシュかけたいのでメインのCSSと分けてCache-Controlを指定した。
aa.css
@font-face {
  font-family: "aahub_light";
  src: url("[CDNのURL]/aahub_light.woff") format("woff");
  font-display: swap;
}

p.aa {
  font-family: "aahub_light";
  white-space: pre;
  overflow: scroll;
  word-break: keep-all;
  overflow-wrap: normal;
  /*font-size: 16px;*/
  /*line-height: 18px;*/
}
スマホなどで大きいAAがoverflowしがちなのでoverflow: scrollにした。もっとも正しい表示の仕方はfont-sizeとline-heightを指定する必要があるがスマホだと大きすぎるのでとりあえず消した。それでもなんとなく大丈夫だった。

結果

スマホでもAAはいい感じに表示される。やったぜ！

「ぼくのかんがえたさいきょうの掲示板」をシリーズとしてまた記事を書きたいと思うので次もよろしくお願いします！

https://qiita.com/scrpgil/items/b8bde1257a135d173585 ↩

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-12T19:51:22+09:00

チームの時間管理できるWebチャートを作成したかった

初めに

前職にてヘルプデスクのリーダーを行っていた際、メンバーが今何のタスクを行っているか視覚的に把握できれば、もっとスムーズに休憩時間の調整や緊急度や重要度を意識したタスク管理ができそうだなと思っていました。
そこで時間管理チャートの作成に取り掛かったのですが、いろいろな理由で没になったため供養したいと思います。

元ネタ

コピペでWebに埋め込めるシンプルなガントチャート時間割作ってみた
理想にとても近いOSSが公開されていたので、改変して利用させていただくことにしました。

画面

機能

タスクをクリックして選択

タスクの新規作成・編集・削除

現在の時刻をラインで表示

30分単位で時間軸をスライド可能

画面サイズ自動変更

頑張りましたがデザインがダサいのはどうしようもなかったです。
（元ネタの否定ではありません）
(作成中)

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-12T18:22:48+09:00

cssでのブロックの配置方法

1. 目的

Webページを作成するときにブロックを配置する方法をcss/htmlでどのように記述するかを記録する。

2 内容

作成したWebページ

上記を実現するコード

sample.html

<div id="large_block">
      <div class="float150">
      </div>

      <div class="float300">
      </div>
</div>

<div id="large_block">
      <div class="float150">
      </div>

      <div class="float300">
      </div>
</div>

sample.css

#large_block {
    width: 1000px;
    height: 200px;
    padding: 0px;
    margin: 10px;
    float :left; /* 左側を起点にする */
    border: solid 0.5px; /* 領域のボーダーラインの設定 */
}   

.float150 {
    height: 150px;              /* 高さ指定 */
    width: 150px;               /* 幅指定 */
    background-color: #FFF;     /* 背景色指定 */
    margin:  23px;              /* 周りの余白指定 */
    float:  left;   /* 回り込み指定(左から順番に配置していくということ) */
    border: solid 2px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
    padding: 0px;
}

.float300 {
    height: 150px;              /* 高さ指定 */
    width: 300px;               /* 幅指定 */
    background-color: #FFF;     /* 背景色指定 */
    margin:  23px;              /* 周りの余白指定*/
    float:  left;   /* 回り込み指定(左から順番に配置していくということ) */
    border: solid 2px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
    padding: 0px;
}

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-12T18:20:38+09:00

エンジニア研修

概要

今回弟がエンジニアデビューするということで、macbookAir(gold)を買ってあげました。
これから9か月間、私の方で研修をおこない、それなりのエンジニアになってもらおうかと思います。

そこで弟のように、エンジニアを始めたばかりの人の参考になるように、「研修内容」、「弟が躓いた箇所」や「参考文献など」を記事にしていこうかと思います。
普段私は自分のブログサイトで発信していましたが、誰も見てくれないので、qiitaに書いていくことにしました。
https://campbel.love/が私のサイトです。たまには見てくださいな(笑)

弟はそこまで忍耐力もなく、また、ほとんど初心者なので「挫折をしないカリキュラム」、「スムーズな理解」に重点を置くつもりです。まさにゆとり！
なので、少し遠回りをしてしまうかもしれません。
例えば、Dockerを用いてもらいたいけど、初学者の弟には難しいのでMampから始めてもらう。みたいな。(最終的にはdockerにしてもらいますが。)

偉そうにカリキュラムは組みましたが、私自身も勉強途中で全部を理解はしていません。弟と一緒に勉強して知識を高めていきたいと思っています。
＊もし、こんなやり方の方がいい、これは間違っているなどありましたら、コメントをお願いいたします。弟と私のために。

私は文章を書くのがすこぶる苦手なので、わかりづらい事や誤字脱字もあるかと思いますが、どうぞよろしくお願い致します。

予定のカリキュラム

文法の理解などは基本はdotinstallをやってもらいます。(有料なので私が支払うことになりそう。。。)
わからないことがあれば随時きくように。

1ヶ月~2ヶ月
・php、html、css、js、mysqlを理解する。(jsから初めてもらおうかなと)
・mampの設定
・macの操作、mampになれる。

3ヶ月〜5ヶ月
・jqueryもしくはvueをつかう。vueが使えるようになったら最高。ちなみに私は使用したことがない。
・gitを使えるようにする。
・local環境下でいいのでlaravelでサイトを作れるようにする。
「掲示板的なやつ」もしくは「画像投稿サイト」でいい。
デザインパターンはしっかり行う。
リレーション、トランザクションもしっかり行こなう。
ログイン認証もしっかり行う
時間があればrest api作成も行う。
・hostsの理解など

ここらへんで一区切り。。。

6ヶ月〜7ヶ月
・cicdを使う(cercleciでいいかと)
・awsを使う
・laravelのテスト仕様書も書けるようにする。

8ヶ月
・localとawsでdockerを使う。

9ヶ月
kubernetesを使用する？？これは未定。。。

これでかなりレベルの高いエンジニアであると僕は思うが、参考にしているエンジニアチャンネルでは、これが最低ラインだと言っていました。。。(kubernetesは除く)
エンジニアの敷居が上がってきているのかしら？٩( ᐛ )و
しかし、専門学生が2年通うよりも全然最強だと思います！！
ちなみに私はこれらのことを、もちろんこれだけでなく他の勉強もしながらですが、数年かけました。それを弟は9ヶ月で行うため、厳しい道のりになるとおもわれます。弟よ！がんばれ〜！！( ^ω^ )

私の課題として、「awsでdockerを使用する」、「kubernetesを使用する」はまだやったことがないので、できるようにしておきます！

なぜmacなのか

一言で言うと使っている人が多いから。
他には、サーバーではlinuxを使用することが多いが、macはwinよりもlinuxに近いからとか、bashが使えるからとか、かっこいいから。

賛否両論だと思いますが、とにかくmacを買うことをお勧めします。
高いなと思うかもしれませんが、分割での購入も可能で、2年の分割だと利子はなんと0円です。
あと学割があって最大22000円引きで購入が可能。2020年2月からは新学期キャンペーンで3万ほどのヘッドフォンがついてきますよ！お得です！
参考

1日目はマックの設定

1 appleidの作成、osが最新かどうかのチェック
2 アプリのダウンロード(詳細は以下)
3 chromeの拡張のダウンロード(詳細は以下)

macにダウンロードするアプリ

ブラウザ
「こんなにいらないやろ」と思うかもしれないが、”エンジニア”には必要。(アプリ欄を見てこれらがないと笑われてしまう。)
chrome
firefox
opera

開発に必要なアプリ
サイバーダッグ: サーバーのファイルをいじれる
iterm2: ターミナルの拡張版
sequel pro: mysqlをいじる
vs code: エディタ(高級なメモ帳)
postman: apiを可視化
xcode: 主にアイフォンのアプリを作成するのに使用。アイフォンのアプリを作成しなくとも必要。
mamp: mac、apache、mysql、phpの略。windowsだとxamp。パソコン内に仮想のサーバーを立てることができる。
mampでの開発は時代遅れのゴミで、本来ならば(というよりできるエンジニアは)Dockerを使うべきだが設定はmampの方が断然楽なので、初め(6ヶ月くらい)はmampで対応する。
composer: phpのライブラリ環境コマンド。これは必須。なくても開発はできるが、使用していないのはゴミエンジニアである。

チャットアプリ
line: line
chatwork: よく使われるチャットツール
slack: よく使われるチャットツール

その他便利なアプリ
app cleaner: アプリをきれいに削除できる
cd to: フォルダから直で移動できる。
clipy: 有料。コピーしたものの履歴が残る。数百円なので絶対に入れた方がいいと思われるアプリの一つ。使ったら世界が変わったように感じた。弟にも買ってあげた。

これらはまだ使用しないと思われるので、まだインストールしなくていい
brew cask
git
anyenv: phpしか使わないならば、いらない。python、node.jsをやる場合は入れた方がいい。

chromeにダウンロードする拡張の機能

開発はおもにchromeで行うため、chromeの設定はとても大事です。
ダウンロード先はここ
https://chrome.google.com/webstore/category/extensions?hl=ja

開発に必要なアプリ
Clear Cache: キャッシュの削除
EditThisCookie: クッキーの編集
Page load time: ページが表示されるまでの時間計測
Quick Javascript Switcher: jsのオンオフ切替。1クリックでできるため、めちゃめちゃ便利です。

あると便利なアプリ
Wappalyzer: 自分が閲覧したサイトがどの技術で作られているか確認ができる。
Google のクロム ™ のための時計: chromeに時計を表示させる。
ブックマークサイドバー: ブックマークがマウスオーバーで開ける。お勧めの設定は「マウスを左に持っていき右クリックで表示させる。」

個人的にお勧めなアプリ
Douga Getter: 動画のダウンロード
ストリームレコーダー: 動画のダウンロード

とりあえず1日目はここまで。お疲れ様です。

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-12T17:10:50+09:00

JavaScriptでテーブルを動的に生成

以下のサンプルソースは、forループでテーブルを自動生成し、生成されたテーブルを指定した行数ずつ表示するページング機能を実装しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>サンプル</title>
    <meta charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

    <style>
    div#paging
    {
      text-align: center;
      /* スクロールに対してページングボックスの位置を固定 */
      position: fixed;
      /* 位置を指定 */
      bottom: 0;
      right:45%;
    }

    div#pagingbox{
      background: #FFF;
    }

    th{
      /* ヘッダ背景塗りつぶし */
      background: #eee;
    }
   th,td {
     /* 枠線を1本線指定 */
      border: solid 1px;
      width:auto;
   }

   table{
     /* 枠線を1本線指定 */
      border: solid 1px;
      border-collapse:  collapse;
      white-space: nowrap;
    }

    footer{
      position: fixed;
      width: 100%;
      background-color: #C0C0C0;
      padding: 15px 0;
      bottom: 0; /*下に固定*/
    }
    </style>

  </head>




  <body>
    <!--テーブル生成位置-->
    <div id ='maintable'></div>



    <!--ページングボタン配置-->
    <footer>
      <div id="paging">
        <table>
          <tr>
            <tb><button id="prevbtn" type="button"><</button></tb>
              <tb>
                <span id="currentpage">currentpage</span>
                  /
                <span id="lastpage">lastpage</span>
              </tb>
            <tb><button id="nextbtn" type="button">></button></tb>
          </tr>
        </table>
      </div>
    </footer>


    <script>
      // table要素を生成
      var table = document.createElement('table');
      // tr部分のループ
      for (var i = 0; i < 700; i++) {
        // tr要素を生成
        var tr = document.createElement('tr');
        // th・td部分のループ
        for (var j = 0; j < 50; j++) {
            // 1行目のtr要素の時
            if(i === 0) {
              // th要素を生成
              var th = document.createElement('th');
              // th要素内にテキストを追加
              th.textContent = i + '-' + j;
              // th要素をtr要素の子要素に追加
              tr.appendChild(th);
            } else {
              // td要素を生成
              var td = document.createElement('td');
              // td要素内にテキストを追加
              td.textContent = i + '-' + j;
              // td要素をtr要素の子要素に追加
              tr.appendChild(td);
            }
        }
        // tr要素をtable要素の子要素に追加
        table.appendChild(tr);
        }
      // 生成したtable要素を追加する
      document.getElementById('maintable').appendChild(table);
    </script>


    <script>// ページング機能
    jQuery(function($) {
      var page = 0;
      var displayrows = 30;// １ページ当たり表示する行の数

      function draw() {// ページの表示
        $('#lastpage').html(Math.ceil(($('tr').size()-1)/displayrows));
        $('#currentpage').html(page + 1);
        $('tr').hide();
        $('tr:first,tr:gt(' + page * displayrows + '):lt(' + displayrows + ')').show();// 変数を使用する場合は' +  + 'を忘れずに
      }
      $('#prevbtn').click(function() {// １ページ後進
        if (page > 0) {
          page--;
          draw();
        }
      });
      $('#nextbtn').click(function() {// １ページ前進
        if (page < ($('tr').size() - 1) /displayrows - 1) {
          page++;
          draw();
        }
      });
      draw();//初回表示
    });
    </script>
  </body>
</html>

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-12T17:10:50+09:00

JavaScriptでテーブルを自動で生成

以下のサンプルソースは、forループでテーブルを自動生成し、生成されたテーブルを指定した行数ずつ表示するページング機能を実装しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>サンプル</title>
    <meta charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

    <style>
    div#paging
    {
      text-align: center;
      /* スクロールに対してページングボックスの位置を固定 */
      position: fixed;
      /* 位置を指定 */
      bottom: 0;
      right:45%;
    }

    div#pagingbox{
      background: #FFF;
    }

    th{
      /* ヘッダ背景塗りつぶし */
      background: #eee;
    }
   th,td {
     /* 枠線を1本線指定 */
      border: solid 1px;
      width:auto;
   }

   table{
     /* 枠線を1本線指定 */
      border: solid 1px;
      border-collapse:  collapse;
      white-space: nowrap;
    }

    footer{
      position: fixed;
      width: 100%;
      background-color: #C0C0C0;
      padding: 15px 0;
      bottom: 0; /*下に固定*/
    }
    </style>

  </head>




  <body>
    <!--テーブル生成位置-->
    <div id ='maintable'></div>



    <!--ページングボタン配置-->
    <footer>
      <div id="paging">
        <table>
          <tr>
            <tb><button id="prevbtn" type="button"><</button></tb>
              <tb>
                <span id="currentpage">currentpage</span>
                  /
                <span id="lastpage">lastpage</span>
              </tb>
            <tb><button id="nextbtn" type="button">></button></tb>
          </tr>
        </table>
      </div>
    </footer>


    <script>
      // table要素を生成
      var table = document.createElement('table');
      // tr部分のループ
      for (var i = 0; i < 700; i++) {
        // tr要素を生成
        var tr = document.createElement('tr');
        // th・td部分のループ
        for (var j = 0; j < 50; j++) {
            // 1行目のtr要素の時
            if(i === 0) {
              // th要素を生成
              var th = document.createElement('th');
              // th要素内にテキストを追加
              th.textContent = i + '-' + j;
              // th要素をtr要素の子要素に追加
              tr.appendChild(th);
            } else {
              // td要素を生成
              var td = document.createElement('td');
              // td要素内にテキストを追加
              td.textContent = i + '-' + j;
              // td要素をtr要素の子要素に追加
              tr.appendChild(td);
            }
        }
        // tr要素をtable要素の子要素に追加
        table.appendChild(tr);
        }
      // 生成したtable要素を追加する
      document.getElementById('maintable').appendChild(table);
    </script>


    <script>// ページング機能
    jQuery(function($) {
      var page = 0;
      var displayrows = 30;// １ページ当たり表示する行の数

      function draw() {// ページの表示
        $('#lastpage').html(Math.ceil(($('tr').size()-1)/displayrows));
        $('#currentpage').html(page + 1);
        $('tr').hide();
        $('tr:first,tr:gt(' + page * displayrows + '):lt(' + displayrows + ')').show();// 変数を使用する場合は' +  + 'を忘れずに
      }
      $('#prevbtn').click(function() {// １ページ後進
        if (page > 0) {
          page--;
          draw();
        }
      });
      $('#nextbtn').click(function() {// １ページ前進
        if (page < ($('tr').size() - 1) /displayrows - 1) {
          page++;
          draw();
        }
      });
      draw();//初回表示
    });
    </script>
  </body>
</html>

実行結果

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-12T15:19:36+09:00

TECH::CAMPにて受講開始

1／11（土）とうとうプログラミングスクールでの学習を開始。
はじめメンターとの面談を行い、直近の学習スケジュールを立てる。
目標は週20時間。
平日には平均2時間ほどしか時間の確保ができないと考えると、土日に合計10時間は勉強する必要あり。

HTMLとCSSの基礎を学習した。とりあえず理解は置いておいてコードを書いてみるようにと指示があったので
教材通りどんどん書き進める。なんとなーくわかったようなわからないような。。。

3時間ほど作業を行い、ホームページのトップ画面のようなものが完成。プロパティはたくさん使ったが、どれがなんの機能を果たしているのかは全然わかりませんでした。

自分でウェブサイトを作って見たらモチベーション続くかな。
智恵にこのことを話して、どんなサイトを作ったら楽しそうか話してみよう。

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-12T13:30:22+09:00

申し込みフォームの作成

申し込みフォーム

<!DOCTYPE html>

入会申し込み
<link rel="stylesheet" href="css/style.css">


入会申込み

入会するには、次のフォームに必要事項をご記入下さい。

メールアドレス必須

パスワード必須

登録する

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-12T11:43:27+09:00

初心者によるプログラミング学習ログ 208日目

100日チャレンジの208日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

208日目は

おはようございます
208日目

3日ぐらいぶりにプログラミング勉強した
技術書で、htmlとcssでwebサイトコーディング#100DaysOfCode #駆け出しエンジニアと繋がりたい #早起きチャレンジ
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) January 11, 2020

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-12T11:41:37+09:00

[コピペで即使える]CSSだけで作った三角形の矢印ボタン

CSSのみでボタンを作る時、皆さんは、どのように作っていますか？

今回は、CSSで三角形の上向き・下向き矢印ボタンの作り方を紹介したいと思います！
以下の写真が、これから製作する矢印ボタンのブラウザでの表示となります。

では、さっそくhtmlとcssを見ていきましょう！
以下がHTMLです。
<div class="upward"></div>
<div class="downward"></div>
以下がCSSです。
.upward{
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
    margin-left: 30px;
}
.upward::before,.upward::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.upward::before{
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 1px solid blue;
    background-color: blue;
    border-radius: 25%;
}
.upward::after{
    margin-left: 4.5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 8.7px 5px;
    border-color: transparent transparent #ffffff transparent;
}
.downward{
    margin: 0 20px 0 8px;
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
}
.downward::before,.downward::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.downward::before{
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 1px solid  blue;
    background-color:  blue;
    border-radius: 25%;
}
.downward::after{
    margin-left: 4.5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8.7px 5px 0 5px;
    border-color: #ffffff transparent transparent transparent;

}
解説

.upward::before, .downward::beforeの部分が四角形の外枠になっています。
→四角形の色・大きさを変える際は、ここをいじります。

.upward::after, .downward::afterの部分が矢印です。
→矢印の大きさ、向きを変える際は、この.upward::afterや.downward::afterを変える必要があります。

「CSS三角形作成ツール」
http://apps.eky.hk/css-triangle-generator/ja

この三角形作成ツールが、けっこうオススメで、この作成ツールで、矢印の向き・色・大きさなどを指定できます。
ここで作ったものを.upward::afterや.downward::afterに貼り付けると、自分の好きな色・向きで、矢印を作成できます。
僕の場合は、貼り付けただけだと、矢印が真ん中に来ないので、margin-leftで真ん中に来るように調整しています。

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-12T11:41:37+09:00

コピペで使えるCSSだけの三角形の矢印ボタンの作り方

CSSのみでボタンを作る時、皆さんは、どのように作っていますか？

今回は、CSSで三角形の上向き・下向き矢印ボタンの作り方を紹介したいと思います！
以下の写真が、これから製作する矢印ボタンのブラウザでの表示となります。

では、さっそくhtmlとcssを見ていきましょう！
以下がHTMLです。
<div class="upward"></div>
<div class="downward"></div>
以下がCSSです。
.upward{
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
    margin-left: 30px;
}
.upward::before,.upward::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.upward::before{
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 1px solid blue;
    background-color: blue;
    border-radius: 25%;
}
.upward::after{
    margin-left: 4.5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 8.7px 5px;
    border-color: transparent transparent #ffffff transparent;
}
.downward{
    margin: 0 20px 0 8px;
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
}
.downward::before,.downward::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.downward::before{
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 1px solid  blue;
    background-color:  blue;
    border-radius: 25%;
}
.downward::after{
    margin-left: 4.5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8.7px 5px 0 5px;
    border-color: #ffffff transparent transparent transparent;

}
解説

.upward::before, .downward::beforeの部分が四角形の外枠になっています。
→四角形の色・大きさを変える際は、ここをいじります。

.upward::after, .downward::afterの部分が矢印です。
→矢印の大きさ、向きを変える際は、この.upward::afterや.downward::afterを変える必要があります。

「CSS三角形作成ツール」
http://apps.eky.hk/css-triangle-generator/ja

この三角形作成ツールが、けっこうオススメで、この作成ツールで、矢印の向き・色・大きさなどを指定できます。
ここで作ったものを.upward::afterや.downward::afterに貼り付けると、自分の好きな色・向きで、矢印を作成できます。
僕の場合は、貼り付けただけだと、矢印が真ん中に来ないので、margin-leftで真ん中に来るように調整しています。

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-12T01:36:16+09:00

次世代Webスタイリングを追うーbackdrop-filter

これはなに？

Chrome Dev Summit 2019にて「 Next-generation web styling 」というセッションがあり、それを（ときどき）追いかけています。昨年のアドベントカレンダーでは、「次世代Webスタイリングを追うーScroll Snap, :focus-within, @media (prefers-*), :is()」という記事を書きました。

本記事はその続きで、今回はCSSプロパティ「backdrop-filter」について記載します。

CSSプロパティ: filterを振り返る

backdrop-filter の紹介の前に、 CSSプロパティの filter について振り返っていきます。

MDNによるfilterの説明:

CSS の filter プロパティは、ぼかしや色変化などのグラフィック効果を要素に適用します。フィルターは画像、背景、境界の描画を調整するためによく使われます。

まずは、よく使われるという画像要素に filter のグラフィック効果を適用してみました。良い感じですね。

Original Blur Grayscale Sepia

filter: none;
filter: blur(7px);
filter: grayscale(0.7);
filter: sepia(0.7);

またMDNの説明によると、 filter は、背景にもグラフィック効果を適用することができるようなので試してみました。
画像ではなく、キャプション要素に filter のぼかし効果を適用しています。
<style>
figure {
  position: relative;
  background-color: yellowgreen;
}
figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 8px 16px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
  filter: blur(7px);
}
</style>
<figure>
  <img src="hoge.png" alt="" />
  <figcaption>これはキャプションです。</figcaption>
</figure>
意図した通りにはなりませんでした。
どうやら filter は、「背景含めて要素全体にグラフィック効果を適用する」ことはできても、「要素の背後のみにグラフィック効果を適用する」ということはできないようです。

CSSプロパティ: backdrop-filter

そんな時に活躍するのが、 backdrop-filter です。
backdrop-filter は、filter のグラフィック効果を要素の背後のみに適用することができます。

さきほどのキャプションを backdrop-filter に書き換えてみました。
<style>
figure {
  position: relative;
  background-color: yellowgreen;
}
figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 8px 16px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(7px);
}
</style>
<figure>
  <img src="hoge.png" alt="" />
  <figcaption>これはキャプションです。</figcaption>
</figure>
キャプション要素の背後のみにグラフィック効果が適用されており、意図した通りになりました。
今回はblurでしたが、filterと同じく多くのグラフィック効果があるので興味がある方は試してみてください。

こちらに上記サンプルを置いておきます。

ブラウザの対応状況

CSS property: backdrop-filter

caniuse.com

参考資料

backdrop-filter - CSS: Cascading Style Sheets | MDN

backdrop-filter | CSS-Tricks

おわり

また何かできたら紹介していきたいと思います。
おわり。

Original	Blur	Grayscale	Sepia
filter: none;	filter: blur(7px);	filter: grayscale(0.7);	filter: sepia(0.7);

CSS property: backdrop-filter
caniuse.com

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-12T00:38:47+09:00

リセットCSS、ノーマライズCSS、サニタイズCSSの違い

はじめに、デフォルトCSSについて

HTMLのタグには、デフォルトCSSが設定されています。
例えば<h1>タグはfont-sizeを設定したわけでもないのに大きくボールドで表示されます。
<p>タグも同様にmargin系のプロパティを設定していないのに下に空きができます。
CSSでスタイルを設定しようとすると、思ったとおりの見栄えが実現できないことがよくありますが、理由の1つがこのデフォルトCSSです。
デフォルトCSSの挙動は把握する必要はありますが、一方でデフォルトCSSはブラウザごとに微妙に設定が違います。
これをある程度揃える目的でリセットCSS、ノーマライズCSS、サニタイズCSSが存在します。

デフォルトCSSを揃えるCSS

下記のHTMLを表示させることを考えます。
<h1>&lt;h1&gt;でマークアップされた見出し</h1>
<h2>&lt;h2&gt;でマークアップされた見出し</h2>
<h3>&lt;h3&gt;でマークアップされた見出し</h3>
<h4>&lt;h4&gt;でマークアップされた見出し</h4>
<h5>&lt;h5&gt;でマークアップされた見出し</h5>
<h6>&lt;h6&gt;でマークアップされた見出し</h6>

<ul>
  <li>&lt;nav&gt;の中にないli1</li>
  <li>&lt;nav&gt;の中にないli2</li>
  <li>&lt;nav&gt;の中にないli3</li>
</ul>
<nav>
  <ul>
    <li>&lt;nav&gt;の中にあるli1</li>
    <li>&lt;nav&gt;の中にあるli2</li>
    <li>&lt;nav&gt;の中にあるli3</li>
  </ul>
</nav>

<p>&lt;p&gt;タグ1つ目。ここには&lt;p&gt;で記述した内容が入ります。デフォルトCSS調整用のCSSを読み込むかどうかで見栄えが変わります。</p>
<p>&lt;p&gt;タグ2つ目。ここには&lt;p&gt;で記述した内容が入ります。デフォルトCSS調整用のCSSを読み込むかどうかで見栄えが変わります。</p>
調整用CSSを読み込まない場合、以下の見栄えになります。

リセットCSS

デフォルトCSSをほぼ全て初期化するCSS。例えば以下です。

<h1>〜<h6>は全て同じフォントサイズになる。

<p>のマージンがなくなる。

<li>のビュレット¹が表示されなくなる。

マージンとパディングは全て0になります。
まっさら過ぎるため、自分で独自のスタイルを定義していく必要も生じます。
結果、CSS自体の記述量は増えてしまうでしょう。
まっさらな状態から全てのCSSを設定したい場合に向いています。

HTML5 Doctor Reset CSSが有名です。
以下で記載されているコードをコピペしてreset.cssという名前で保存することで取得できます。
HTML5 Reset Stylesheet | HTML5 Doctor

保存したら、linkタグで読み込みましょう。
html
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
ノーマライズCSS

デフォルトCSSで適用されるスタイルは可能な限り残しつつ、ブラウザ間での表示の差異をなくすように調整するCSS。
デフォルトCSSのスタイルは維持しているので書かなくてもreset.cssと比較して1からの設定は少なくて済みます。
一方でmarginやpaddingを0にするなど、逐一書く必要が生じる箇所は出てきます。
デフォルトCSSの見栄えを活かしたい場合はこちらがよいでしょう。

以下からダウンロードできます。
Normalize.css: Make browsers render all elements more consistently.

保存したら、linkタグで読み込みましょう。
html
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
サニタイズCSS

ノーマライズCSSをさらに気を利かせた感じのCSS。
ある意味、タグのCSSフレームワークです。
例えば以下の設定が追加されます。

<nav><ul>に含まれる<li>（ページナビゲーションによく使われるタグ構造）にはビュレットを表示しない

全ての要素に「box-sizing: border-box」²が適用されている。（レスポンシブWebデザインに便利）

以下からダウンロードできます。
sanitize.css

保存したら、linkタグで読み込みましょう。
html
<link rel="stylesheet" href="css/sanitize.css">
<link rel="stylesheet" href="css/style.css">
使用上の注意

リセットCSS、ノーマライズCSS、サニタイズCSSは必ず一番最初に設定します。
つまりリセットCSSについての<link>タグは一番上に置きます。
（上記の読み込み例は全て自分で設定したstyle.cssを後に読み込ませています。）
html
<link rel="stylesheet" href="css/sanitize.css">
<link rel="stylesheet" href="css/style.css">
後で設定すると、タグが上手くリセットされません。

BootstrapなどのCSSフレームワークを使う場合

CSSフレームワークにもよりますが、基本的にはリセットCSS、ノーマライズCSS、サニタイズCSSの適用は不要なことが多いです。
例えば、Bootstrapには、reboot.cssというデフォルトCSS調整用のCSSが組み込まれています。
つまりbootstrapを読み込むだけでデフォルトCSSの調整がなされる、ということです。
これらのCSSフレームワークを採用しない場合にリセットCSS、ノーマライズCSS、サニタイズCSSが選択候補になるでしょう。

ビュレット: <li>タグの前にある「・」のこと。 ↩

「border-box」はパディングとボーダーを幅と高さに含める設定。パディングとボーダーを幅と高さに含めない設定は「content-box」で、本来はこちらが初期値。 ↩

　 Tweet
Qiitaで続きを読む

20200112のCSSに関する記事は14件です。

gatsbyビルド時に起きるmaterial-uiのスタイル崩れを直す

gatsbyビルド時にmaterial-uiのスタイルが崩れてしまった

スタイル崩れの修正法

参考にしたサイト

MarkdownでのAA入力を対応してみた 【ぼくのがんがえたさいきょうの掲示板】

やりたいこと

無理矢理AAタグを対応する

AAをいい感じに表示する

結果

チームの時間管理できるWebチャートを作成したかった

初めに

元ネタ

画面

機能

cssでのブロックの配置方法

1. 目的

2 内容

エンジニア研修

概要

予定のカリキュラム

なぜmacなのか

1日目はマックの設定

macにダウンロードするアプリ

chromeにダウンロードする拡張の機能

JavaScriptでテーブルを動的に生成

JavaScriptでテーブルを自動で生成

TECH::CAMPにて受講開始

申し込みフォームの作成

申し込みフォーム

入会申込み

初心者によるプログラミング学習ログ 208日目

100日チャレンジの208日目

[コピペで即使える]CSSだけで作った三角形の矢印ボタン

CSSのみでボタンを作る時、皆さんは、どのように作っていますか？

解説

コピペで使えるCSSだけの三角形の矢印ボタンの作り方

CSSのみでボタンを作る時、皆さんは、どのように作っていますか？

解説

次世代Webスタイリングを追う ーbackdrop-filter

これはなに？

CSSプロパティ: filterを振り返る

CSSプロパティ: backdrop-filter

ブラウザの対応状況

参考資料

おわり

リセットCSS、ノーマライズCSS、サニタイズCSSの違い

はじめに、デフォルトCSSについて

デフォルトCSSを揃えるCSS

リセットCSS

ノーマライズCSS

サニタイズCSS

使用上の注意

BootstrapなどのCSSフレームワークを使う場合

日付別

タグ一覧

MarkdownでのAA入力を対応してみた【ぼくのがんがえたさいきょうの掲示板】

次世代Webスタイリングを追うーbackdrop-filter