投稿日：2020-07-15T22:25:05+09:00

Marpを使ってスライドを爆速で作成し、CSSで自由にスタイルをあてる

はじめに

Marpというのは、Markdownからpdfやpptx、はたまたhtmlなどに変換することができるツールです。

Marpに関する記事が割と多くある中でなぜこの記事を書こうと思ったかというと、Marpでざっくりとシンプルなスライドを作る方法は分かったけど、「CSSはどうやって当てたらいいのかよくわからない」 という問題に直面したからです。

最近資料を作る中でどのようにCSSでスタイルを当てるのか理解したので、そのことを共有したいと思い、書いています。

準備

Marpで資料作成をするにあたって自分が使っているのは以下

Marp for VS Code

@marp-team/marp-cli

Tips

ここからは資料作成時に必要になりそうな使い方について書いていきます。
公式に詳しいことは書いてあるっちゃあるんですが、CSSをどのように当てればいいのかわからなかったので、そのことについても書きました。

1 : スライドの画像にCSSをあてたい！

shintarou-akao/marpSample

上記リポジトリの sample1.md と sample2.md , sample2.css にまとめました！

自分で作成したCSSをあてたい場合、以下のことが必要です

VSCodeでCSSのパスを追記する

Exportする場合は生成するスライドに当てたいCSSのパスを指定

VSCodeでCSSのパスを指定

設定を開いてmarp themesと打ちCSSファイルのパスを追加します

CSSを当てたいファイルとCSSファイルで書くべき記述

CSSが中々反映されないと思ったときに確認する部分として、まずCSSファイルに記述するべき内容として...

まず /* @theme sample2 */ としてカスタムテーマの名前を指定してあげる必要があります。これがないとCSSが反映されません

その後に書いてある @import 'default'; ではdefaultテーマのCSSを継承しています
sample2.css
/* @theme sample2 */

@import 'default';
作成したCSSファイルをあてたいMarkdownファイルには以下のように、先ほど設定した theme: sample2 を指定してあげる必要があります。
sample2.md
---
marp: true
theme: sample2
---
Exportする場合は生成するスライドに当てたいCSSのパスを指定

pdfやpptx , html にExportする場合、CSSをあてるオプションをつけないと、CSSが反映されません。どのようにCSSをあてるかというと...
marp --theme-set sample2.css -- sample2.md
上記のように設定してあげることでCSSを反映した状態のhtmlファイルをExportできます。他にpdfファイルをExportしたい場合は以下のような感じですね
marp --theme-set sample2.css --pdf sample2.md
ただ、これらに関してはこちらに詳しく書いてあるので、こちらを参考にしてみてください

2 : スライドの文字にCSSをあてたい！

shintarou-akao/marpSample

上記リポジトリの sample3.md と sample3.css にまとめました！

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-15T21:53:22+09:00

TechAcademyが無料公開している「レスポンシブWebデザイン入門講座」を受講する～第4回～

アジェンダ

レスポンシブデザインの考え方

実践

レスポンシブデザインの考え方

レスポンシブデザインは、一つのHTMLファイルを、様々な表示形態に合わせることが出来るデザイン。
画面のサイズを取得し、最適なCSSを反映する。

実践

メディアクエリを使用して、index.html、style.cssを作成した。
index.html
<!DOCTYPE html>

<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <title>レスポンシブなサイト</title>
  </head>
  <body>
    <div class="main_content">
      <h1 class="contact">お問い合わせ</h1>
      <div class="message">
        <p>御用の方は、こちらよりご連絡ください。</p>
      </div>
      <div class="address">
        <p class="sub_headding">連絡先</p>
        <ul class="contact_info">
          <li>xxx@hogehoge.mail.com</li>
          <li>03-0000-0000</li>
          <li>@hogehoge_taro</li>
        </ul>
      </div>
      <div class="footer">
        <p>2020-07-15</p>
      </div>
    </div>
  </body>
</html>
style.css
body {
  background-color: lightcyan;
}

.main_content {
  background-color: white;
  height: 80%;
  margin: 1em auto;
  padding: 1em 2em;
  width: 80%;
}

.contact {
  text-align: center;
  width: 100%;
}

.message {
  float: left;
  width: 60%;
}

.address {
  float: right;
  width: 40%;
}

/* 画面が小さい場合、縦に表示する. */
@media screen and (max-width: 680px) {
  .message, .address {
    float: none;
    width: 100%;
  }
}

.sub_headding {
  font-weight: bold;
  margin: 0em;
  padding: 0em 0em 0em 2em;
}

.contact_info {
  margin: 0.5em 0em 1em 0em;
}

.footer {
  border-top: solid 2px lightgray;
  clear: both;
  color: gray;
  text-align: center;
  width: 100%;
}
これをWebブラウザに表示させるとこんな感じ。
まずは、一般的なモニタサイズに合わせて大きく表示した場合。

メッセージと連絡先が横に並んでいる。

次に、ブラウザの横幅を狭くした場合。

メッセージと連絡先が縦に並んでいる。

このように、画面サイズが変化しても表示が崩れないように、表示形態を整えることが出来る。

ちなみに、メディアクエリを使用しなかった場合、以下のようになってしまう。

狭い幅で開業されて見づらい上に、メールアドレスが見切れてしまっている。

おわりに

今回は、レスポンシブデザインの実践の回だった。
設定方法はわかったので、あとはどの時にどのように表示するかを設計するだけである。

今回でレスポンシブWebデザインの講座はおしまい。

参考

4-1 レスポンシブデザインの考え方（レスポンシブウェブデザイン）
4-2 切り替えポイントを作る（レスポンシブウェブデザイン）
4-3 段落を切り替える（レスポンシブウェブデザイン）
4-4 更に見た目を整える（レスポンシブウェブデザイン）

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-15T19:55:50+09:00

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

100日チャレンジの371日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
371日目は、

おはようございます
昨日の作業・やったこと⇩

●寝る直前の筋トレ5分
●ブログ1記事作成
●プログラミング学習371日目1.5h
・メンターの課題#駆け出しエンジニアとつながりたい #100DaysOfCode #早起きチャレンジ
— ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) July 14, 2020

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-15T19:53:56+09:00

スクロールバー上にリンクを乗せてスクロールさせないCSS

スクロールできない

スクロールバーでスクロールできないサイトの原因を調べてみた

このようにスクロールバー上の広範囲にリンクタグが設定され、スクロールバーをドラッグできない。

次のスタイルシートでoverflowやabsolute等を指定すると実現できる。
<style>
  .scrollbar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow-y: scroll;
  }
  .linktag {
    right: 0;
    top: 50px;
    bottom: 0;
    position: absolute;
    background-color: rgba(230, 236, 240, 0.2);
  }
  .longheight {
    height: 2000px;
    background-color: #f7f9f9;
  }
</style>

<div class="scrollbar">
  <div class="longheight"></div>
</div>

<a href="." class="linktag">リンクタグ</a>
Google ChromeとFirefoxで動作確認した。

overflow-y: scroll はボックスに収まらない場合、スクロールバーを表示する。

position: absolute;top: 0;right: 0;left: 0;bottom: 0;のどれが欠けても動作しないので、特別な意味があるかもしれない。

position: absolute; top: 0; right: 0; left: 0; bottom: 0;とは何か？

調べてみた。

top と bottom の両方が指定されており、 position が absolute または fixed に設定されており、かつ height が未指定 (auto または 100% のどちらか) の場合は、 top と bottom の距離が尊重されます。

bottom - CSS: カスケーディングスタイルシート | MDN

結論

CSSのposition: absolute;top: 0;right: 0;left: 0;bottom: 0;は親要素と同じ大きさにできる。

width:100%;height:100%;では親要素と同じ大きさにならない。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-15T14:04:08+09:00

CSSを書く上で気をつけたこと

はじめに

私は現在、とある施設のWebサイトを作成しております。
コーディングは私でレビューは別の方にお願いしているのですが
私自身、まだまだ知識・技術ともに未熟でさまざまな指摘を受けます。

そこで指摘されたことを忘れないようにするためにこの記事を書きました。

ページごとにCSSファイルを分ける

ページが複数がある場合、ページごとにファイルを分けて書きます。
わかりやすくなり修正の際に特定のクラスを探すのが容易になります。
また、レビューする方の負担も減ります。

よく使う設定は変数に定義する

文字色や背景色など、よく使うものは変数に定義しておきます。
$main-bg-color: #〜〜〜〜;
$main-font-color: #〜〜〜〜;
$main-border-color: #〜〜〜〜;

/* 例 */
.h1 {
  color: $main-font-color;
}

.table {
  border: 1px solid $main-border-color;
}
同じ内容のクラスが複数あるときは共通クラスとしてまとめる

同じ内容のクラスが複数ある場合、共通クラスとしてまとめます。
また、共通クラスも1つのCSSファイルにまとめておきます。

ここではtable1とtable2の背景は同じ色なのでクラスの汎用性を高めるためにも
bg-color-greenといったクラス名でまとめます。
.table1-bg-color {
  background-color: green;
}

.table2-bg-color {
  background-color: green;
}
common.css
.bg-color-green {
  background-color: green;
}
適用場所・対象が具体的なクラス名を付ける

クラス名を.top-colorにした場合、topというのがどこを指しているのか曖昧です。
そのため、より具体的なクラス名にします。
ファーストビューのことを指しているなら.first-view、
トップページを指しているなら.top-page など何に当てているのかわかる名前にします。

ほかにも見出しの色だと .heading-color、アイコンだと.icon-facebookなど。

!importantはできるだけ使わない

CSSには詳細度というものがあります。
同じ要素に対して複数の宣言が行われている場合、詳細度が高い宣言が適用されます。
例えば、pタグに対してclassでスタイルを当てた場合とidで当てた場合だと
idの方が詳細度が高いのでidで定義したスタイルが適用されます。
<p id="color-red" class="color-blue">
#color-red {
  color: red;/* このスタイルが適用されます。 */
}

.color-blue {
  color: blue;
}
しかし、スタイルの最後に!importantを追加すると詳細度を無視して!importantがあるスタイルが優先されます。
!importantを多用すると、スタイルの優先順位がわかりづらくなり修正も難しくなります。
使わないと解決できないようなところ以外では使わないようにします。
#color-red {
  color: red;
}

.color-blue {
  color: blue !important; /* このスタイルが適用されます。 */
}
参考：

詳細度

カスケードと継承

コンポーネント化する

色やサイズなどを他でも使えるように1つ1つのクラスに分けるということも重要ですが、
1つにまとめてコンポーネント化することも重要です。

例えば、円形の図でサイズとポジションを指定する場合、2つクラスを作るのではなく
.circleというクラスにまとめます。
要素に当てるクラスが多くなるとクラスをつけ忘れたり、
また、別ファイルに定義しているクラスだと探す手間もあります。
メンテナンスの観点からクラスを定義していく必要があります。
.circle-size {
  font-size: 2rem;
}

.circle-position {
  position: absolute;
  top: 5%;
  left: 5%;
}
.circle {
  font-size: 2rem;
  position: absolute;
  top: 5%;
  left: 5%;
}
まとめ

これが初投稿となります。普段、学んだ内容はメモに取っていますが単語や一文だけで適当です。

しかし、記事を書くとなると文脈なども意識して書くため学んだ内容を整理することができました。
これからも学んだ内容の整理のために記事を書いていきたいです。

この記事の内容で間違いなどがございましたら編集リクエストまたはコメントで教えていただければ幸いです。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-15T12:34:01+09:00

bootstrap画面Layout例（初心者今更聞けないいくつか）

背景

Html書く時、毎回画面LAYOUTに悩みます。はるか昔tableとgif使いましたが、CSS時代のやり方を勉強しなおし、要点を残し、将来の参考になればと思います。

要件

こんな感じの画面を作りたい。
- 画面は左右に分け、左側は更に上下に分ける
- 画面全体はscroll発生しないよう自動調整する
- 右はjstree使い、項目が多い時画面を突き破ることなく、自分内部でscroll

図1：画面LAYOUT想像図

利用ツール

bootstrap ：LAYOUT担当。全体の配置、大きさ、枠線、色を制御。CSSのみ実現されjavascript書く必要ないところが便利。
jquery はjavascript内でhtmlを操作する時便利機能を提供する。今回はADDボタンとjstreeの初期化に利用。今更誰がjquery使うかと思いましたが、調べると意外に。
jstree はデータをツリー状表示用ライブラリ。今回動的にアイテムを追加し、画面の高さの影響を確認するために利用する。

図２：jqueryは健在

基本LAYOUT

まず全体を描く。bootscrapにLAYOUTする方法複数（grid、float、position、display、flex ）あります。flexは一番柔軟で、中身に合わせて自動で改行されたり、適切に配置できるありますが、今回の要件は固定位置で表示するので、gridを選びました。

<body>
    <div class="container-fluid">
      <div class="row">                  <!-- 行 -->
        <div class="col-8">              <!-- 左側 -->
          <div class="row">
            <div class="col">up</div>     <!-- 上 -->
          </div>
          <div class="row">
            <div class="col">down</div>   <!-- 下 -->
          </div>
        </div>
        <div class="col-4">right</div>    <!-- 右側 -->
      </div>
    </div>
</body>

grid layoutは
1. まずcontainerを立てる。container-fluidはcontainerと違って、画面いっぱい使えます。
1. 一つの行（row）
1. 行の中2列（col）がある
2. 全部12分割のうち、左側は８（col-8）、右側は４（col-4）で配置する
2. 更に左側の列の中に２つの行を配置し、それぞれ１つだけ列を持つ

以下の感じになります。

図３：LAYOUT効果

枠線追加

文字以外何もわからないので、枠線を入れる。

<body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-8 border border-warning">　　　　　　　<!-- 枠線 -->
          <div class="row">
            <div class="col border border-warning">up</div>
          </div>
          <div class="row">
            <div class="col border border-warning">down</div>
          </div>
        </div>
        <div class="col-4 border border-warning">right</div>
      </div>
    </div>
</body>

以下は効果

更にpadやmarginを微調整する必要なら、bootstrapをご参考ください。

高さ固定

普通、内容に合わせて、タグの高さが変動します。高さを固定するには、heightを明示します。bootstrapが提供する vh-100 （ CSS の height:100vh; に相当する）を利用し、window(=viewport)の100% を使います。

もう一つ、height をパーセントで指定する時、親タグも height を指定が必要です、しないタグが自動拡張され、結局画面を突き破ります。

<body class="vh-100 vw-100">　　　　　　　　　　　　　　　　　<!-- 全体の高さ -->
    <div class="container-fluid h-100 w-100">              <!-- 各層全部高さ設定 -->
      <div class="row h-100">
        <div class="col-8 border border-warning">
          <div class="row">
            <div class="col border border-warning">up</div>
          </div>
          <div class="row">
            <div class="col border border-warning">down
              <button id="add" class="btn btn-success">add</button>
            </div>
          </div>
        </div>
        <div class="col-4 border border-warning h-100">　　　<!-- 各層全部高さ設定 -->
            <div id="jstree" class="h-100 overflow-auto">   <!-- ここの高さ指定したい -->
              <ul>
                <li id="rootnode" data-jstree='{"opened":true,"selected":true}'>Root node</li>
              </ul>
            </div>
        </div>
      </div>
    </div>
</body>

おまけ

LAYOUTではないですが、jstree使う時、落とし穴を注意ください。

jstree追加削除など変更したい時、"check_callback" : true, は必須
jstreeのroot nodeに data-jstree='{"opened":true} 入れないとツリーが開かない

例全体

jsfiddle で試せます。

<!DOCTYPE html>
<html>
  <link rel="shortcut icon" type="image/x-icon" href="https://github.com/favicon.ico">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
  <head>
    <meta charset="UTF-8">
    <title>jstree bootstrap demo</title>
  </head>

<body class="vh-100 vw-100">
    <div class="container-fluid h-100 w-100">
      <div class="row h-100">
        <div class="col-8 border border-warning">
          <div class="row">
            <div class="col border border-warning">up</div>
          </div>
          <div class="row">
            <div class="col border border-warning">down
              <button id="add" class="btn btn-success">add</button>
            </div>
          </div>
        </div>
        <div class="col-4 border border-warning h-100">
            <div id="jstree" class="h-100 overflow-auto">
              <ul>　                        <!-- ↓↓↓↓　opened指定しないとツリー開けない -->
                <li id="rootnode" data-jstree='{"opened":true,"selected":true}'>Root node</li>  
              </ul>
            </div>
        </div>
      </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.10/jstree.min.js"></script>
<script>
  $('#jstree').jstree({
    "core" : {
      "check_callback" : true, // これがないと修正系関数効かない
    },
    "plugins" : [
      "wholerow",
    ]
  });

  $('#add').on("click", function(e, data){
    $('#jstree').jstree().create_node('rootnode', "new item");
  });
</script>
</html>

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-15T11:42:07+09:00

【解決済み】olタグを入れ子にした時、Firefoxで番号がうまく動かなかった

ググっても出てこなかったのでメモ。

おこったこと

利用規約とかでこういうのを書いていた。
<ol> タグが入れ子になっている。
<h2>第5条 免責事項および損害賠償</h2>
<ol class="bracket-num">
  <li>
    当社の債務不履行または…
    <ol class="latin">
      <li>本サービスを通じて、会員間、会員または…</li>
      <li>本サービスを通じて入手した役務、情報が…</li>
      <li>本サイトから…</li>
    </ol>
  </li>
  <li>
    ...
  </li>
</ol>
期待される表示は以下のようなもの。
第5条 免責事項および損害賠償

(1) 当社の債務不履行または…
  a. 本サービスを通じて、会員間、会員または…
  b. 本サービスを通じて入手した役務、情報が…
  c. 本サイトから…
(2) ....
  a. ...
  b. ...
(3) ...
(1) のような項番は <ol> タグの list-style では指定できない。
そのため、cssの counter 機能を使って以下のように装飾している。
.latin > li {
  list-style: lower-latin;
}

ol {
  counter-reset: ol-counter;
}

.bracket-num > li {
  counter-increment: ol-counter;
}

.bracket-num > li::before {
  content: '(' counter(ol-counter) ') ';
}
(counter機能の説明は?を読んでほしい)

タグをcssで装飾する

このcssによって、Chromeでは期待通りの表示になったが、
Firefoxでは以下のような表示になってしまった。
第5条 免責事項および損害賠償

(1) 当社の債務不履行または…
  b. 本サービスを通じて、会員間、会員または…
  c. 本サービスを通じて入手した役務、情報が…
  d. 本サイトから…
(2) ....
  f. ...
  g. ...
(3) ...
親の <ol> の番号の進みを、子の <ol> が引き継いでいる気がする。

こうしたら直った

(1) の番号を、各<ol> ごと1に戻すために指定していた counter-reset を外したら直った。
ol {
  /* このぶぶん */
  counter-reset: ol-counter; 
}
counter を利用していない他の <ol> （.latinとか）には影響しない認識だったので、
横着して <ol> 自体に counter-reset を記述していたけれど、
firefoxではうまく動かないらしい。

とはいえ counter-reset がないと (1)の数字が無限に増え続けてしまうので、
counter を利用している要素にだけ効くように修正。
.bracket-num {
  counter-reset: ol-counter;
}

.bracket-num > li {
  counter-increment: ol-counter;
}

.bracket-num > li::before {
  content: '(' counter(ol-counter) ') ';
}
無事、なおりました！

結論

cssの counter を使うときにはfirefoxに注意

　 Tweet
Qiitaで続きを読む

20200715のCSSに関する記事は7件です。

Marpを使ってスライドを爆速で作成し、CSSで自由にスタイルをあてる

はじめに

準備

Tips

1 : スライドの画像にCSSをあてたい！

VSCodeでCSSのパスを指定

CSSを当てたいファイルとCSSファイルで書くべき記述

Exportする場合は生成するスライドに当てたいCSSのパスを指定

2 : スライドの文字にCSSをあてたい！

TechAcademyが無料公開している「レスポンシブWebデザイン入門講座」を受講する～第4回～

アジェンダ

レスポンシブデザインの考え方

実践

おわりに

参考

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

100日チャレンジの371日目

スクロールバー上にリンクを乗せてスクロールさせないCSS

スクロールできない

position: absolute; top: 0; right: 0; left: 0; bottom: 0;とは何か？

結論

CSSを書く上で気をつけたこと

はじめに

ページごとにCSSファイルを分ける

よく使う設定は変数に定義する

同じ内容のクラスが複数あるときは共通クラスとしてまとめる

適用場所・対象が具体的なクラス名を付ける

!importantはできるだけ使わない

参考：

コンポーネント化する

まとめ

bootstrap画面Layout例（初心者今更聞けないいくつか）

背景

要件

利用ツール

基本LAYOUT

枠線追加

高さ固定

おまけ

例全体

【解決済み】olタグを入れ子にした時、Firefoxで番号がうまく動かなかった

おこったこと

こうしたら直った

結論

日付別

タグ一覧