はじめに

　よく使う要素の中央寄せ。いまだにうまく動いてくれないことが多々あるが、今日の学びでこれだけは！

インライン要素とブロック要素

それぞれの特徴についてはここではあげないが、そもそもインライン要素とブロック要素とで、中央寄せの方法が違うことを理解する。

インライン要素の場合

「インライン要素」という文字を中央寄せしたいとして、

<div class="parent">
    <span class="inline">
        インライン要素
    </span>
</div>

.parent {
 text-aline: center;
}

親要素にtext-aline: center;を当てる。

ブロック要素の場合

「ブロック要素」という文字を中央寄せしたいとして、

<div class="parent">
    <div class="block">
        ブロック要素
    </div>
</div>

.parent {
 width: 500px
}

.block {
 width: 20px
 margin: 0 auto;
}

中央寄せさせたい要素自体ににmargin: 0 auto;を当てることで、親要素の大きさの中央に寄る。

終わりに

　恥ずかしながら、あまりブロック要素・インライン要素を意識していなくて、毎回margin: 0 auto;をして、うまくいかずに悩んでいた。

text-combine-upright: all;

真っ直ぐ立てるように道を示してやりましょう。

<div>デーモン小暮閣下の生年月日は紀元前<span>98038</span>年<span>11</span>月<span>10</span>日</div>

div {
  writing-mode: vertical-rl;
}
span {
  text-combine-upright: all;
}

?	?

text-combine-upright プロパティ

一文字分（1em）の空間に挿入する文字の組み合わせを定義する事ができます。
値には none（初期値） / all / digits <integer>? を入れる事ができますが、digits <integer>?はモダンブラウザではサポートされていません。

今回は<span>タグにtext-combine-upright: all;を指定したため、<span></span>で囲まれたテキストを1em分の空間に縦向きに収める事ができました。
デーモン閣下もにっこりですね?

青空文庫を縦書きで読みたい

だって日本人だから！

引用: https://www.aozora.gr.jp/cards/001265/files/46817_24670.html
↓

body {
  writing-mode: vertical-rl;
}

おとなってやっぱり変だ?
半角英数を span 囲んで text-combine-upright: all; ???
↓

<span class="caption">〈しょうわくせい<span class=“otachinasai”>B612</span>の王子くん。〉</span><br>
<br>
　といっても、大げさにいうほどのことでもない。ごぞんじのとおり、ちきゅう、もくせい、かせい、きんせいみたいに名まえのある大きな星のほかに、ぼうえんきょうでもたまにしか見えないちいさなものも、なん<span class="otachinasai">10000</span>ばいとある。たとえばそういったものがひとつ、星はかせに見つかると、ばんごうでよばれることになる。〈しょうわくせい<span class="otachinasai">325</span>〉というかんじで。<br>
　ちゃんとしたわけがあって、王子くんおすまいの星は、しょうわくせい<span class="otachinasai">B612</span>だと、ぼくはおもう。前にも、<span class="otachinasai">1909</span>年に、ぼうえんきょうをのぞいていたトルコの星はかせが、その星を見つけている。

.otachinasai {
   text-combine-upright: all;
}

違う、そうじゃない?
↓

<span class="caption">〈しょうわくせい<span class="otachinasai">B</span><span class="otachinasai">6</span><span class="otachinasai">1</span><span class="otachinasai">2</span>の王子くん。〉</span><br>
<br>
　といっても、大げさにいうほどのことでもない。ごぞんじのとおり、ちきゅう、もくせい、かせい、きんせいみたいに名まえのある大きな星のほかに、ぼうえんきょうでもたまにしか見えないちいさなものも、なん<span class="otachinasai">1</span><span class="otachinasai">0</span><span class="otachinasai">0</span><span class="otachinasai">0</span><span class="otachinasai">0</span>ばいとある。たとえばそういったものがひとつ、星はかせに見つかると、ばんごうでよばれることになる。〈しょうわくせい<span class="otachinasai">3</span><span class="otachinasai">2</span><span class="otachinasai">5</span>〉というかんじで。<br>
　ちゃんとしたわけがあって、王子くんおすまいの星は、しょうわくせい<span class="otachinasai">B</span><span class="otachinasai">6</span><span class="otachinasai">1</span><span class="otachinasai">2</span>だと、ぼくはおもう。前にも、<span class="otachinasai">1</span><span class="otachinasai">9</span><span class="otachinasai">0</span><span class="otachinasai">9</span>年に、ぼうえんきょうをのぞいていたトルコの星はかせが、その星を見つけている。

.otachinasai {
   text-combine-upright: all;
}

一つ一つ丁寧に<span>タグで囲みました。
でも流石に全部をいちいち囲むなんてやっていられない?

text-orientation プロパティ

行内のテキストの向きが設定できるプロパティです。
IE11には対応していないため、IE11を使用している場合はIE11を使用するのはやめましょう。
text-orientation: upright;を使用すると、縦書きの際に横書きのみの文字（今回だと半角英数）を正立に配置してくれます。

<span class="caption">〈しょうわくせいB612の王子くん。〉</span><br>
<br>
　といっても、大げさにいうほどのことでもない。ごぞんじのとおり、ちきゅう、もくせい、かせい、きんせいみたいに名まえのある大きな星のほかに、ぼうえんきょうでもたまにしか見えないちいさなものも、なん10000ばいとある。たとえばそういったものがひとつ、星はかせに見つかると、ばんごうでよばれることになる。〈しょうわくせい325〉というかんじで。<br>
　ちゃんとしたわけがあって、王子くんおすまいの星は、しょうわくせいB612だと、ぼくはおもう。前にも、1909年に、ぼうえんきょうをのぞいていたトルコの星はかせが、その星を見つけている。

body {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

簡単に一文字ずつ縦向きできたので、これで心安らかにして読めますね?

参考

https://developer.mozilla.org/ja/docs/Web/CSS/text-combine-upright
https://developer.mozilla.org/ja/docs/Web/CSS/text-orientation

本日は仕事が休みだったので短時間のコースを一気見しちゃおう！なんて思っていたのですが、MacOSがアプデされておらずこの後できるかなぁといった所です。

と言う訳でまだ時間はありますがキリのいい所まで進んだので投稿していきます。

学習内容

CSS

影

box-shadow: 0 0 10px rgba(0, 0, 0, .4)

影の設定。X軸、Y軸、影のサイズを指定。rgbaのaで透過度を指定出来る。

太字

font-weight: bold;

boldで太字に指定。数字でも指定可能で、細くする事も可能。

dispray: block;

これについては理解が浅いです…少し調べた限りでは縦に並べる要素を使う事でそのままでは改行されない所で改行させられる…と。

span

<span></span>

divと同じ様にclassを使うなどして区別する上で使用する。ただしdivは改行する性質を持っているので一行内で区別する場合はこちらを使用する。

紐付け

<label for=○○></label>
<input id=○○>

forとidを同値にする事で紐付けがなされる。上記の様に記述するとlabelが付与されているテキストをクリックする事でもテキストボックスの入力が可能になる。

所感

丁度１セクションが終わった所なので、PCが触れない環境でも動画を見返す等して改めて復習し知識の整理を行って行かなければならないと感じる。

どうも7noteです。簡単なくじ引きシステムをjavascriptで作ります。

2チームに分けたり、あたりとはずれの本数を決めてくじびきすることができます。

見本

※jQueryを使用しています。jQueryって何？という方はこちら

仕様

・参加メンバーとくじの本数を選択
・スタートボタンを押す。
・あたりの人とはずれの人の2種類に分ける

※くじの本数が足りない時はアラートで警告を出す。

ソース

index.html

<div class="wrapper">
  <div class="area">
    <div id="member">
      <h2>参加メンバーを選ぼう！：</h2>
      <label><input type="checkbox" value="佐藤" checked/> 佐藤</label>
      <label><input type="checkbox" value="田中" checked/> 田中</label>
      <label><input type="checkbox" value="伊藤" checked/> 伊藤</label>
      <label><input type="checkbox" value="鈴木" checked/> 鈴木</label>
      <label><input type="checkbox" value="高橋" checked/> 高橋</label>
    </div>

    <div id="honsuu">
      <h2>くじの本数：</h2>
      あたり：<select name="hit">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4" selected>4</option>
      </select>　<!--
-->      はずれ：<select name="miss">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4" selected>4</option>
      </select><br>
    </div>
    <div class="button">
      <input type="button" value="抽選開始" onclick="start();">  <!-- 関数startを実行する。 -->
    </div>
    <div id="result">
      <h3>あたり：</h3>
      <h3>はずれ：</h3>
    </div>
  </div>

</div>

style.css

.wrapper {
  margin: 50px 10%;
  text-align: left;
}

.area {
  width: 80%;
  margin: 0 auto;
}

h2 {
  display: inline-block;
  font-weight: bold;
}

#member {
  margin: 5px auto 20px;
}

#member label {
  display: inline-block;
}

#honsuu {
  margin: 0 auto 20px;
}

.button {
  border-bottom: solid 1px #000;
  padding: 0 0 20px;
  margin: 0 auto 50px
}

#result h3 {
  font-size: 18px;
  font-weight: bold;
}

script.js

var toddayMember = new Array();  // 本日の参加メンバーを入れる配列を新規作成

// 関数start
function start() {
  var theamA = new Array();               // あたりの人たちを入れる配列を新規作成
  var theamB = new Array();               // はずれの…〃
  var hitNum = Number($('select[name="hit"]').val());   // あたりのくじの本数を変数[hitNum]に格納
  var missNum = Number($('select[name="miss"]').val()); // はずれの…〃
  var rand = 0;                           // ランダムの数字 初期値は0

  todayMember = $('input[type="checkbox"]:checked').map(function(){
    return $(this).val();                 // チェックのついたメンバーを配列に格納
  }).get();

  // 人数に対してくじが足りない時にアラートして処理を終了
  if(todayMember.length > hitNum+missNum){
    alert("くじの本数が足りないよ");
    exit;
  }

  // 1人ずつ、あたりもしくははずれを決める
  for(var i = 0; i < todayMember.length; i++ ){
    if(hitNum == 0 && missNum > 0){       // あたりくじがなくなっていて、はずれが余っていればrand=2
      rand = 2;
    }else if(missNum == 0 && hitNum > 0){ // はずれくじがなくなっていて、あたりが余っていればrand=1
      rand = 1;
    }else{                                // どちらでもなければランダムで1か2
      rand = Math.floor( Math.random() * 2 ) + 1;
    }

    if(rand == 1){
      theamA.push(todayMember[i]);        // 1だったらあたりチームの配列に追加
      hitNum += -1;                       // あたりくじを1本減らす
    }else if(rand == 2){
      theamB.push(todayMember[i]);        // 2だったらはずれチームの配列に追加
      missNum += -1;                      // はずれくじを1本減らす
    }
  }
  $("#result h3:first-child").text("あたり："+theamA); // あたりチームを表示
  $("#result h3:last-child").text("はずれ："+theamB);  // はずれチームを表示
}

アラートの出方

解説

分かりやすく分解して書いているので最短の処理や記述ではございませんのであしからず。

1. ボタンがクリックされ、「start関数」が起動
   • htmlからjavascriptを動かすときは、onclick="start();"のように書くことで、動かすことができます。
2. あたりチーム、はずれチームそれぞれの配列を作成。また選択されたくじの本数を変数に格納。
   • 新しい配列をつくる時は、new Array()。またselectの要素を取得すると文字列として取得してしまうので、Number()でくくることで数字として変数に格納します。
3. :checkedの疑似クラスを使って、チェックされた人をtodayMember（変数）に格納
4. もし「人数 > くじの本数」だった場合、警告文を出して処理を強制終了
   • .lengthで配列にあるデータ数、今回でいうと参加人数の数値を取得できます。
5. for文を使って1人ずつあたりはずれを抽選する。
   • 最初のif文では、もしすでにどちらかのくじがなくなっていた場合、もう片方のくじを引くように処理を入れています。どちらのくじもまだ残っている場合はランダムの数字を入れます。ランダムはMath.floor( Math.random() * 2 ) + 1とかくことで1もしくは2を取得できます。範囲を広げたいときは2の部分を任意の数時にします。
6. 後のif文ではランダムで決めた1もしくは2でそれぞれチーム移動とくじを1本減らしています。
   • push()で指定の配列から別の配列に値を追加（複製）します。くじを引いたので-1してのこりのくじの本数を調整します。
7. text()でhtmlのほうに結果をテキストで出力して完了。

まとめ

プログラミングを始めるきっかけってそれぞれあると思いますが、ゲームなどの面白いものを作りたいって思って始める人が多いように思います。私自身もゲームがすきで自分で作れたらいいなと思いプログラミングの勉強を始めました。

でも始めたての頃は右往左往して何から手を付けたらいいのか分からないものです。
この記事がこれからjavascriptを始めようと思っている人の練習課題的なものになればいいなと思います。
簡単なものから作り始めれば、経験値を重ねていつかは壮大なものも作れるようになるし、もの作りを続けていれば仲間も増えてより様々なもの作りに挑戦できると思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

この記事は「【マイスター・ギルド】本物の Advent Calendar 2020」8日目の記事です。

今年11月から入社いたしましたマイスター・ギルド（以下MG）開発部の吉川です。Qiita初投稿となります。

やろうと思ったきっかけ

はてなブックマークの方で話題になっていたことがきっかけです。
400スターくらいついててこれはすごいコースじゃないかと思ってみたら、
コース概要にタイピングゲームやブラウザ拡張機能を作るよ！とあったので
これはやるしかねぇとなったのがきっかけです。MGでは主にフロントエンドを担当させていただいており、JavaScriptを改めて復習したいと思っていたのもあります。

https://github.com/microsoft/Web-Dev-For-Beginners

で、どんなコース？

コースは24レッスンあって、これを12週間かけて取り組みましょうな構成です。
ちなみにオール英語です。

各レッスンには次の内容が入っています。

• optional sketchnote（オプションのスケッチノート）
• optional supplemental video（オプションのYoutubeビデオ）
• pre-lesson warmup quiz（レッスン前のウォームアップクイズ）
• written lesson（レッスン）
• for project-based lessons, step-by-step guides on how to build the project- 　（プロジェクトの構築方法に関するステップバイステップガイド　※プロジェクトベースのレッスンのみ）
• knowledge checks（知識チェック）
• a challenge（チャレンジ）
• supplemental reading（補足資料）
• assignment（割りあて）
• post-lesson quiz（レッスン後のクイズ）

レッスン内容は下記表の通り。

	プロジェクト名	教えること	学習目標
1	入門	プログラミングとプログラム売買のツールの紹介	ほとんどのプログラミング言語の背景にある基本的な基盤と、プロの開発者が仕事をするのに役立つソフトウェアについて学習します
2	入門	GitHubの基本（チームでの作業が含む）	プロジェクトでGitHubを使用する方法、コードベースで他のユーザーとコミュニケーションする方法
3	入門	アクセシビリティ	Webアクセシビリティの基本を学びます
4	JSの基本	JavaScriptデータ型	JavaScriptデータ型の基本
5	JSの基本	関数とメソッド	アプリケーションのロジックフローを管理する関数と方法について学習します
6	JSの基本	JSで意思決定	意思決定を使用してコードに条件を作成する方法を学びます
7	JSの基本	配列とループ	JavaScriptで配列とループを使用してデータを操作します
8	テラリウム	HTMLの実践	レイアウトの構築に重点を置いて、HTMLを構築してオンラインテラリウムを作成します
9	テラリウム	CSSの実践	ページをレスポンシブにするなど、CSSの基本に焦点を当てて、オンラインテラリウムのスタイルを設定するCSSを構築します
10	テラリウム	JavaScriptクロージャ、DOM操作	クロージャとDOM操作に焦点を当てて、テラリウムをドラッグアンドドロップインターフェイスとして機能させるJavaScriptを構築します
11	タイピングゲーム	タイピングゲームを構築する	キーボードイベントを使用してJavaScriptアプリのロジックを駆動する方法を学びます
12	グリーンブラウザ拡張機能	ブラウザの操作	ブラウザーのしくみ、ブラウザーの履歴、およびブラウザー拡張機能の最初の要素を足場にする方法を学習します
13	グリーンブラウザ拡張機能	フォームの作成、APIの呼び出し、ローカルストレージへの変数の保存	ブラウザ拡張機能のJavaScript要素を構築して、ローカルストレージに保存されている変数を使用してAPIを呼び出します
14	グリーンブラウザ拡張機能	ブラウザのバックグラウンドプロセス、Webパフォーマンス	ブラウザのバックグラウンドプロセスを使用して、拡張機能のアイコンを管理します。Webパフォーマンスといくつかの最適化について学習します
15	宇宙ゲーム	JavaScriptを使用したより高度なゲーム開発	ゲームを構築するための準備として、クラスと構成の両方、およびPub / Subパターンを使用した継承について学習します
16	宇宙ゲーム	Canvasへの描画	画面に要素を描画するために使用されるCanvasAPIについて学習します
17	宇宙ゲーム	画面上で要素を移動する	デカルト座標とCanvasAPIを使用して、要素がどのように動きを得ることができるかを確認します
18	宇宙ゲーム	衝突検出	キーを押すことで要素を衝突させて反応させ、クールダウン機能を提供してゲームのパフォーマンスを確保します
19	宇宙ゲーム	スコアを維持する	ゲームのステータスとパフォーマンスに基づいて数学計算を実行します
20	宇宙ゲーム	ゲームの終了と再会	アセットのクリーンアップや変数値のリセットなど、ゲームの終了と再開について学習します
21	銀行アプリ	WebアプリのHTMLテンプレートとルート	ルーティングとHTMLテンプレートを使用して、複数ページのWebサイトのアーキテクチャの足場を作成する方法を学習します
22	銀行アプリ	WebアプリのHTMLテンプレートとルート	ルーティングとHTMLテンプレートを使用して、複数ページのWebサイトのアーキテクチャの足場を作成する方法を学習します
23	銀行アプリ	データを取得して使用する方法	アプリにデータが出入りする方法、データを取得、保存、破棄する方法を学習します
24	銀行アプリ	状態管理の概念	アアプリが状態を保持する方法と、プログラムでアプリを管理する方法を学習します

こんな感じで

やったプロジェクト

今回は時間が足りなくてアドカレの一環だし全レッスンやっていると分量が増えすぎてしまうので、グリーンブラウザ拡張機能までやってみました。

• 入門
• JSの基本
• テラリウム
• タイピングゲーム
• グリーンブラウザ拡張機能

どんな手順で勉強したの？

筆者はこんな手順で勉強しました。

スケッチノート見る→レッスン前のウォームアップクイズやる→レッスン本文読む
（テラリウムプロジェクト以降のみ）実際にソースコードを動かす→ レッスン後のクイズやる

実際に取り組んだ所感

英語なのでGoogle翻訳とかDeepL翻訳に助けてもらいながら頑張りました。
あと詳しい学習内容はコースページを見ればわかるのでここでは割愛する。1レッスン長くないしね。

入門～JS入門プロジェクト

※以下レッスンのみ日本語化済み（2020/11/28時点）

レッスン1： プログラミングとプログラム売買のツールの紹介

この2プロジェクトは実際に手を動かしてコードを動かすというよりかは、テキストを読んで学習するスタイルとなる。筆者もテキストを読みながらふむふむと学習していた。

入門コースは「プログラミングとは」「プログラミングで使うツール」「GitとGithubの基本的な使い方」「アクセシビリティ」が主なトピック。

なお入門プロジェクトにあるアクセシビリティレッスンに関してはこの手のコースで触れられるのは初めて見たと思う。アクセシビリティについては個人でサイトを作った際にLighthouseというツールを触れた程度なのでこんなツールがあるのか！と感じながら新鮮な気持ちで読んでいました。

JS入門はJavaScriptの「データタイプ」「関数とメソッド」「意思決定」「配列とループ」の4レッスン。レベルはProgateのJavaScriptコースと同じくらい。ES6の初学者は読んでもいいけど、それ以外の人はページ最初のスケッチノートだけ見ておけばいいかなという印象。スケッチノートに学習内容が詰め込まれているし。クラス文に関するレッスンがない点は疑問に感じた。

テラリウム

HTML、CSS、JavaScriptのDOM操作について学習しながら、簡単なドラッグアンドドロップができるテラリウムアプリを作るコース。ここから実際にコードを書いて学習を進めることになる。

完成図はこんな感じです。

で、植物の絵をドラッグアンドドロップすると、次のように真ん中の瓶の中に植物を設置できるようになります。

やってみた所感ですが、レッスン中のソースコードを指示に従って写経し完成させる形で作っていくのは楽しい。
ですが、CSSやJavaScriptのプロパティはいくつか補足説明されている一方、特に説明されていない点も少なくなく入門コースにしては説明不足感は否めないように思えた。他サイトのドキュメントで調べてねってことだろうか。
（筆者はpositionプロパティとか位置関係は苦手なのでただ写経する形じゃ辛かった、この辺もっと勉強しないと…）

タイピングゲーム

JavaScriptキーボードイベントを学習しながら、タイピングゲームを作るコース。

完成するとこんな感じでゲームができる。

これはコードが比較的簡単だったのとロジックの説明が順序立てて説明されていたので取り組みやすかったです。ゲームが完成したときはこんな簡単なロジックでエラーも検知できて、クリア時間まで出てくるタイピングゲームができるのかと少し感動していました。

グリーンブラウザ拡張機能

今回筆者が一番楽しみにしていたプロジェクトです。
ここでは「ブラウザについて」「フォームの作成、APIの呼び出し、ローカルストレージの使い方」「Webパフォーマンスの測定・改善」を学びならが、ブラウザ拡張機能を作ることになります。ここで作る拡張機能はC02 Signal APIという外部APIを使用して、地域の二酸化炭素排出量を確認できる拡張機能です。

※ここで作る拡張機能はEdge（おそらくChromium版のみ）、Chrome、Firefoxで動作するとのこと

ここのプロジェクトは拡張機能を作る前の準備がちょっと分かりづらいのでメモを残しておきます。

1. Node.jsなどでnpmをインストール（多分yarnに置き換えてもいいはず）。
2. APIを使用するためのAPI Key：ここからメールアドレスを入力するとメールが送られてくるのでそこに書かれているpersonal API token: xxxxxxxxxxxxxxxxxxを見て使ってください。
3. 地域コード：炭素取得料を調べたい地域のコードをここから取得します。本当は関西の排出量を知りたかったのでJP-KNで調べたかったのですが、取り組んでいた日時だとデータが取得できず、九州を表すJP-KYとしました。
4. スターターフォルダ：ここのフォルダを今回は使うのでgit cloneなどしてダウンロード。
5. 4のスターターフォルダをコマンドツールで開き、npm install→npm run buildの順にコマンドを叩く。
6. 公式はEdgeで紹介されているので、ここではEdgeでの手順を記載。Chromeも拡張機能ページを開いたあとの手順はほぼ同じ（Firefoxは何故か上手く行かなかった）。url欄にedge://extensions/を入力→左下の開発者モードをON→展開して読み込みをクリックし、4のスターターフォルダのdistフォルダを開く。するとMy Carbon Triggerという拡張機能が読み込まれるはずです。
7. レッスンの指示どおりにコードを書き、終えたあとはnpm run buildするとコードの記載内容が反映されているはずです。

完成図はこんな感じ。調べたい地域の地域コードとAPIKeyを入力し、Submitボタンを押下すると、二酸化炭素使用量と電気の供給における化石燃料（石炭とか石油などのこと）の割合を確認することができる。

↓

このプロジェクトを感想した所感としては、axiosを使用したAPI取得を通して、非同期処理とLocalStorage/SessionStorageの説明はわかりやすかった。preventDefaultメソッドはReactを使った開発で出てくるイメージがあって、React専用のものだと思っていたのですが、JavaScript標準のメソッドだったんですね。

最後のパフォーマンスに関するレッスンなのですが、やっていて感じたのが今回の小さめの拡張機能だとパフォーマンス改善は伝わりづらいじゃないかと思った（開発者ツールのパフォーマンスタブの使い方のところは良かったです）。この辺りはWebアプリレッスンでやった方が取り組みやすかったと思う。

今回の記事でやったプロジェクトはここまで。

最後に

本コースをある程度進めた感想としましては、beginnerコースでありながら、「アクセシビリティ」や「LocalStorage/SessionStorage」などこの手のコースでは触れられることは少ない項目もあり、新しく学ぶことも少なくなくやりがいはありました。
ただ、実際にアプリを作るプロジェクトになると、コード写経してくださいと言わんばかりにCSSとかJSプロパティの意味は公式ドキュメントとか外部サイト見てね感はあり、全くのWeb開発初心者がやるのはきついかもしれません。

筆者としては今回できなかった「宇宙アプリ」「銀行アプリ」も忘れないうちに触れていきたい次第です。

本コースは翻訳活動が歓迎されており、Githubのpull requestを開くとすでにいろんな言語の翻訳が進んでいます。ただ、日本語については殆どタッチされておらず残念に思います。ということで時間と気力があれば、本コースの日本語翻訳をいつか私が担当したいなぁと思っている次第です。（まずはJS Primer1周するのが優先ですが…）

あと本コース、docsifyという文書作成ツールをローカルにインストールすると、localhostで読めるみたいですよ。筆者はまだ試せてないので、また別の機会に…

object-fit プロパティで使える値

fill(初期値)

ボックス内を満たすように縦横比を変えながらリサイズされます。

cover

縦横比を保持してボックスを完全に覆うようリサイズされます。縦横のうち小さい方を基準にして自動的にリサイズし、ボックスからはみ出した部分はトリミングされます。

contain

縦横比を保持し、ボックスに収まるようにリサイズされます。幅と高さのうち大きい方のサイズに合わせて比率を保持してボックスにフィットさせます。

none

リサイズせず、そのまま表示します

scale-down

noneとcontainのうち、小さい方のサイズに合わせて表示します

https://y-com.info/contents/?p=1165

こちらのページが参考になりました。

実際に私が行った対処法は、

1. Applications > MAMP > bin > php > php7.4.9 > conf > php.iniを開く
2. cmd + F ショートカットで　OPcache.enable_cli　を検索
3. ２カ所ほどヒットしたが、【OPcache】という欄の 　　

opcache.enable_cli=1 → opcache.enable_cli=0

と変更。さらに、

opcache.enable=0

を新しく追加しました。

すると、今までstyles.cssに変更を加えても何も変化しませんでしたが、即座に変更が反映されるようになりました。

やりたいこと→要素を横並びから縦並びに置き換えたい

@media(max-width:767px){
 /* 横並び解除 */
 .menu-item{
   display: block;
 }
}

通常時のcss
.menu-item{
display: flex;
}
子要素横並びになる

スマートフォン向けのcss
.menu-item{
display:block;
}
子要素が縦並びになる

box-sizing: content-box;を使うことがあったのでおさらいメモです。

box-sizingとは

以下4つで整形された要素
①content + ②border + ③padding + ④margin

box-sizing: border-box;とbox-sizing: content-box;の違いはwidth内にどこまでいれるかである。
完全に正しい表現ではないかもしれないがあくまでイメージです。(詳細は下記)

box-sizing: content-box;

width = ①contentとなる。

つまり仮に②border + ③paddingがあった場合、widthの幅から ②border + ③padding の幅が上乗された見た目になる

例

• 定義したwidth = 250px
• 見目サイズ = 330px ( 250px (①width)+20px (②border)+60px (③padding) )
• widthと見た目サイズがずれる

See the Pen MWjYZRL by non Man (@nonMan21) on CodePen.

特に何もしないとcontent-box;です。
しかし、実際にpaddingやborderをいれるたびに頭の中で思っていたwidthからずれるのはコーディングしていても意図しないズレが起きるし、せっかく調整したあとに修正する場合に非常に効率が悪いことが多いです。

box-sizing: border-box;

width = ①content + ②border + ③paddingとなる。

つまり仮に②border + ③paddingがあった場合でも、widthの幅で変わらない

例

• 定義したwidth = 250px
• 見目サイズ = 250px ( 170px (①width)+20px (②border)+60px (③padding) )
• widthと見た目サイズが同じ

See the Pen yLayGrG by non Man (@nonMan21) on CodePen.

まず全体のレイアウントを考えてwidthを設定、その後borderやpaddingで中身をスタイルすることが多いと思います。
border-box;を設定しとくと要素のwidthは変わらず、中身だけを集中してスタイルできるし、幅の修正をする際も基本的にはwidthだけを考えればOKで効率が良いことの方が多いです。
そのため、通常はbase.cssのhtmlセレクタなどにborder-box;を設定してしまうことが多いです。

content-boxをあえて使うとき

最近あった例ですが、小さい画像コンテンツにborderをつけるときに使いました。

border-boxは中身が画像でもいい感じに縮小してくれます。が、そもそも小さい画像の場合は見えにくくなってしまうため必要に応じてcontent-boxを使ってあげるのも良いかもしれません。
※ 下記例は一部切り取ったのであんまり変わらないかもですが、小さい要素程サイト全体で見た時にサイズ感の変化に違和感が出ることもしばしばでした。

border-boxの場合

「白いborder入れたら画像が小さくなっちゃって少し見えにくい...!??」

content-boxの場合

「画像サイズは元のままだし、borderの太さ調整が来ても基本OK!」

１画像を伸縮できるようにするcss

img{
  max-width: 100%;
  height: auto;
}

解説
全てのimgタグに適用される。画像は親要素のボックス幅に合わせて伸縮するようになる。
しかし、画像の元々のサイズより拡大することはない。
レスポンシブデザインで画像を扱う場合、ほぼパターンと考えて良い。

ec-cube.coというクラウド版のEC-CUBEでは、管理画面から編集してサイトをカスタマイズしていくことが基本ですが、ローカル環境にテンプレートとして読み込むことで、コーディングソフトで編集していくことができます。
今回はcssの編集方法を紹介したいと思います。

準備するもの

• EC-CUBEのローカル環境

手順

1. ローカル環境の用意
2. ec-cube.coのテンプレートのエクスポート
3. ローカル環境にテンプレートをインポート
4. css周りの設定
5. 編集
6. 編集したテンプレートをec-cube.coにインポート

1. ローカル環境の用意

ec-cube.coは最新版のEC-CUBEです。ローカル環境にも最新版のEC-CUBEをインストールします。
インストール方法についてはEC-CUBEの開発ドキュメントをご覧ください。

2. ec-cube.coのテンプレートのエクスポート

ec-cube.coの管理画面＞テンプレート＞テンプレート一覧から使用しているテンプレートをエクスポートします。
エクスポートすると「テンプレート名.tar.gz」というファイルがダウンロードされます。

3. ローカル環境にテンプレートをインポート

ローカル環境にインストールしたEC-CUBEの管理画面＞テンプレート＞アップロードからテンプレートをインポートします。
テンプレートコードやテンプレート名は自由に決めてください。

アップロードしたテンプレートを有効にします。
テンプレートの保存先から格納先を確認します。

4. css周りの設定

テンプレート内に編集用のcssを作成してテンプレートに読み込ませます。
EC-CUBEのテンプレートは格納先が2箇所にわかれています。
phpファイルはappディレクトリに、cssやjsのファイルはhtmlディレクトリに格納されます。

/*-- phpファイル（twigファイル）の格納先 --*/
[app]
 └─ [template]
     └─ [テンプレート名]

/*-- cssの格納先 --*/
[html]
 └─ [template]
     └─ [テンプレート名]
            └─[assets]
                 ├─ [css]
                 │    ├─ style.css     # 読み込まれているCSS
                 │    └─ style.min.css # 軽量版CSS
                 └─ [sass]
                      ├─...

テンプレートには元々style.cssというファイルがあり、テンプレートのcssが全て記述されています。
style.cssを編集していくこともできますが、今回は別ファイルのcssを作成して編集していきたいと思います。

編集用のcssを追加

html/template/テンプレート名/assets/cssにアクセスし、cssを追加します。
「test.css」というファイルを追加してみました。

cssの読み込み

次に作ったcssをテンプレートに読み込ませます。
src/Eccube/Resource/template/default/default_frame.twigをコピーします。

default_frame.twigというのは、テンプレートのheadやbodyなどのベースになるphpファイルです。
EC-CUBEは本体のコアファイルの中に、親テンプレートが存在しています。
親テンプレートをコピーして、自分のテンプレート内にファイルを複製すると読み込みの優先順位が、自分のテンプレートが優先されるようになります。

テンプレート優先順位

1.自分のテンプレート
　↓ファイルがなければ
2.親テンプレート

default_frame.twigを、app/template/テンプレート名/にペーストします。

コアファイルのdefault_frame.twigを直接編集してしまうとec-cube.coにテンプレートとして読み込むことができないので、必ず自分のテンプレートにdefault_frame.twigを複製してください。

ペーストしたdefault_frame.twigを以下のように編集します。

default_frame.twig

/* 37行目をコピー */
<link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
/* 38行目にペースト、編集用cssを読み込む */
<link rel="stylesheet" href="{{ asset('assets/css/test.css') }}">

5. 編集

test.cssを編集していきます。
サンプルにサイトの背景を水色にするcssを入力してみました。

test.css

@charset "UTF-8";
.ec-layoutRole{
  background: #B2EBF2;
}
.ec-categoryRole,
.ec-topicRole,
.ec-itemNav__nav li a{
  background: transparent;
}
.ec-newsRole .ec-newsRole__news{
  border: 8px solid #fff;
}

サイトに反映されているか確認します。
反映されていなければ、管理画面＞コンテンツ管理＞キャッシュ管理からキャッシュを削除してください。

6.編集したテンプレートをec-cube.coにインポート

2、3と同じ手順で、編集し終わったテンプレートをエクスポートしてec-cube.coにインポートします。
インポートしたテンプレートを有効にして、反映されていれば完了です。

作成したtest.cssはec-cube.coの画面では編集できません。
ローカル環境でサイトを構築し、coにはテンプレートとして読み込ませましょう。

開発環境構築

VSCodeに以下のプラグインをインストールしました。

• Live Sass Compiler
  　プロジェクト内のscssの変更を監視。
  　scssファイルからcssファイルへのコンパイルを自動でしてくれる。
  　Live Serverと競合しデッドロックした場合は、VSCodeを再起動する。

• Live Server　
  　右下の「Go Live」をクリックすると、PC上の仮想サーバが立ち上がる。
  　基本的に開発は仮想サーバで動作を確認しながら行う。（右クリック→Open with Liveserver）

• Prettier
  　ソースを自動で整形してくれるツール。

親要素に対して、子要素の幅が100％を超えるときの挙動の整理のため執筆しています。
※codepenですが、0.5×で見ていただくと綺麗にみることができます。

パターン1 | 親要素が600pxで子要素を50%ずつにする。

これは非常にシンプルです。
青セクションと赤セクションが半分になっていますね。

See the Pen
widthが100をオーバーするとき by TakahiroOkada (@okalog)
on CodePen.

パターン2 | 子要素間に余白を持たせたい場合。

codepenを見てもらえば分かりますが、文字がつまっていて読みづらいですよね。
多くの方は要素間にmarginやpaddingで余白を持たせると思います。

これを行おうと、このようなコードを書いてみました。

sytle.css

.left{
  width:50%;
  background-color:#B0C2FF;
}
.right{
  width:50%;
  margin-left:50px;
  background-color:#FFA7A7;
}

結果はこうなります。

See the Pen
width整理-2 by TakahiroOkada (@okalog)
on CodePen.

親要素に対して、,子要素が100%を超えてしまったのでずれてしまっていますね。

パターン3 | widthにcalc指定をして子要素の大きさ100%に調整する。

CSSには、calc()という便利な機能があります。
参考(https://coliss.com/articles/build-websites/operation/css/how-calc-works-by-ire.html)

これを利用し子要素を100％になるように調整します。

See the Pen width整理-3 by TakahiroOkada (@okalog) on CodePen.

子要素が親要素に対して100％になりましたね。

番外編

実は最初flex-wrap:wrap;の指定なし、calc指定なし、margin-left:50px;だけでも綺麗にコンテナに収まっていました。

これはflex-wrapのデフォルトがno-wrapになっていたことで、コンテナからはみ出さないように指定されていたようです。
参考(https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap)
頭いいですよね。

See the Pen KKgwraz by TakahiroOkada (@okalog) on CodePen.

まとめ

いやー結構曖昧に使っていたので整理されてよかったです。

本記事の対象者

Djangoの公式ドキュメントで丁寧に書かれているチュートリアルは試した！けど、どうすればそれっぽい見た目のWebサイトを作れるんだ・・・？と悩んでいるそこの貴方！！！
「とにかくいい感じの固定サイドバー」があれば、良いwebサイトに見える気がしませんか？見えますよね！
この「とにかくいい感じの固定サイドバー」を5分で実装できればいいな〜〜と思っている良く深い貴方が対象です。

前提条件

• 仮想環境の構築
• Djangoのアプリ作成

が終わっている状態で以下の記事を読んでください。

実装環境

• Django v.2.2.4
• python v.3.7

実装

testapp : アプリ名 

階層
testapp --- __init__.py
        --- admin.py
        --- apps.py
        --- model.py
        --- tests.py
        --- urls.py
        --- views.py
        --- templates --- testapp --- base.html
                                  --- index.html
        --- static    --- css     --- main.css

とにかくコードをコピペする

base.html

{% load static %}
<html>
    <head>
        <title>5分で作ったWebサイト</title>
        <link rel="stylesheet" href="{% static 'css/main.css' %}">
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">
    </head>
    <body>
        <nav>
            <p>とにかくいい感じの固定サイドバー</p>
            <h1>5分で作ったWebサイト</h1>
            <div id="pageitem">
                {% include 'testapp/pagelist.html' %}
            </div>
        </nav>
        <header>
            <p>ついでに</p>
            <p>ヘッダーも作ろう</p>
        </header>
        {% block content %}{% endblock %}
    </body>
</html>

pagelist.html

<ul>
<li><a class="item" href="{% url 'testapp:index' %}">index</a></li>
<li><a class="item" href="{% url 'testapp:page1' %}">page1</a></li>
<li><a class="item" href="{% url 'testapp:page2' %}">page2</a></li>
</ul>

index.html

{% extends 'testapp/base.html' %}
{% block content %}
<main>
    <h1>indexページ</h1>
    <div>
        <p>hogehogehoge</p>
        <p>piyopiyo</p>
    </div>
</main>
{% endblock %}

page1.html

{% extends 'testapp/base.html' %}
{% block content %}
<main>
    <h1>page1ページ</h1>
    <div>
        <p>hogehogehoge</p>
        <p>piyopiyo</p>
    </div>
</main>
{% endblock %}

page2.html

{% extends 'testapp/base.html' %}
{% block content %}
<main>
    <h1>page2ページ</h1>
    <div>
        <p>hogehogehoge</p>
        <p>piyopiyo</p>
    </div>
</main>
{% endblock %}

main.css

p {
   font-family: "Roboto";
   font-size: 14pt;
   color: #44546A;
   margin: 0px;
}

body {
   display: grid;
   margin: 0;
   height: 100vh;
   grid-template-rows: 75px 1fr;
   grid-template-columns: 350px 1fr;
   grid-template-areas:
      "nav    header  "
      "nav    main    ";
}

nav {
   grid-area: nav;
   text-align: right;
   display: grid;
   margin: 0;
   min-height: 100vh;
   grid-template-rows: 2px 100px 1fr;
   grid-template-columns: 1fr;
   grid-template-areas:
       "stitle "
       "mtitle "
       "plist  ";
   padding : 20px;
   box-shadow: 2px 2px 4px gray;
   z-index: 2;
}

nav h1 {
   grid-area: mtitle;
   color: #2E75B6;
   font-family: "Roboto";
   font-size: 24pt;
   font-weight: bold;
   text-align: right;
}

nav p {
   grid-area: stitle;
   color: #44546A;
   font-family: "Roboto";
   font-size: 14pt;
   text-align: right;
}

nav div {
   grid-area: plist;
}

nav div ul{
   list-style: none;
}

nav div ul li a {
   color: #44546A;
   font-family: "Roboto";
   font-size: 12pt;
   font-weight: bold;
   text-align: right;
   background-color: #f4f5f7;
   border-left: 10px solid #44546A;
   padding: 5px 10px;
   margin: 0 0 10px 0;
   text-decoration: none;
   display: block;
}

nav div ul li a:hover {
   background: #8795a8;
   color: #FFF;
}

header {
   grid-area: header;
   background: #f4f5f7;
   margin : 0px;
   text-align: right;
   z-index: 1;
   padding: 10px;
   box-shadow: 1px 1px 2px gray;
}

header p {
   grid-area: stitle;
   color: #44546A;
   font-family: "Roboto";
   font-size: 12.5pt;
   text-align: right;
   margin : 0px;
}

main {
   overflow: auto;
   grid-area: main;
   margin : 0px;
}

main h1 {
   grid-area: mtitle;
   color: hsl(215, 22%, 34%);
   font-family: "Roboto";
   font-size: 20pt;
   font-weight: bold;
   text-align: left;
   padding-left: 15px;
}

main div p {
   text-align: center;
}

main::-webkit-scrollbar {
   display:none;
}

いろいろ直す

このままでは何も表示されないので以下のコードを書き換えます。

urls.py

ここを変更しないとサイドバーに並べたリンク集を踏んでもページが繊維しません。

from django.urls import path

from . import views

app_name = 'testapp'
urlpatterns = [
    path('', views.index, name='index'),
    path('page1/', views.page1, name='page1'),
    path('page2/', views.page2, name='page2'),
]

views.py

ここを変更しないとサイドバーに並べたリンク集を踏んでもページが繊維しません。

from django.shortcuts import render

def index(request):
    return render(request, 'testapp/index.html')

def page1(request):
    return render(request, 'testapp/page1.html')

def page2(request):
    return render(request, 'testapp/page2.html')

最後に

サポーターズ様主催の技育展に参加して早5ヶ月・・・。
この5ヶ月、有志で集まったDiscordの技育展サーバの中で毎週もくもく会を開いたり、メンバーを集めてハッカソンに出てみたり、いろいろやってきました。
今後もツヨツヨになれるよう頑張っていきます。