どうも7noteです。ショートハンドの書き方と使い分け方について書いていきます。

cssにはショートハンドで書けるプロパティがいくつかありますが、どのタイミングでいつショートハンドで書くべきなのか迷うことがあると思います。特にmarginやpaddingなんかはショートハンドで書くことが多いですがきちんと使い分けができていないと、何かあった時に無駄な時間を過ごしてしまう可能性があります。
今回はショートハンドの書き方とロングハンド?と言っていいのか怪しいですが、margin-rightなどの個別の指定方法の使い分け方について書いていきます。

ショートハンドの書き方

ショートハンドで書けるプロパティは以下の12種類です。

padding / margin / border-radius / box-shadow / border / background / font / list-style / animation / transition / flex-flow（親要素） / flex（子要素）

実際にショートハンドと個別指定の書き方の違いを見てみましょう。

* { 
    /* margin ショートハンドの書き方 */
    margin: 10px; /* 上下左右 */
    margin: 10px 5px; /* 上下 左右 */
    margin: 10px 5px 20px; /* 上 左右 下 */
    margin: 10px 5px 20px 30px; /* 上 右 下 左 */

    /* margin 個別の書き方 */
    margin-top: 10px; /* 上だけ */
    margin-right: 10px; /* 右だけ */
    margin-bottom: 10px; /* 下だけ */
    margin-left: 10px; /* 左だけ */
}

* {

    /* padding ショートハンドの書き方 */
    padding: 10px; /* 上下左右 */
    padding: 10px 5px; /* 上下 左右 */
    padding: 10px 5px 20px; /* 上 左右 下 */
    padding: 10px 5px 20px 30px; /* 上 右 下 左 */

    /* padding 個別の書き方 */
    padding-top: 10px; /* 上だけ */
    padding-right: 10px; /* 右だけ */
    padding-bottom: 10px; /* 下だけ */
    padding-left: 10px; /* 左だけ */

}

他のcssプロパティのショートハンドの書き方については詳しいく書かれた記事があったので紹介します。↓
https://webliker.info/css-short-hand/

ショートハンドで書くメリットとしてはソースが短くかけるので、綺麗で軽いソースになります。

ショートハンドかロングハンドのどちらを使うべきか

ここからは私の考察として書きますが、marginやpaddingなどは基本ショートハンドで書くのがいいと思います。もしくは各種ブラウザのデフォルトスタイルの書き方に合わせて使い分けるのがベストかなと考えます。

理由としてはソースは短い方がいいですし、ブラウザのCSSを上書きするように書くのが基本と考えるからですかね。

その考えに基づいて、私は以下のように書き分けています。

基本的にショートハンドで書くもの

padding / margin / border-radius / box-shadow / border / background / transition

基本的に個別指定で書くもの

font / list-style / animation / flex-flow（親要素） / flex（子要素）

各ブラウザのデフォルトスタイルの書き方を見ると、paddingやmarginはショートハンドで書かれています。また逆にfontはfont-weightやsont-sizeなど個別で指定されています。

marginやpaddingの例

項目がいくつか並んでいる時、「最後の一個の下向きのmarginは無くす」みたいなcssを書く場面が出てきます。そんな時は下のように書くといいでしょう。

ul li {
    margin: 0 0 20px;
}

/* 最後の一個だけ下のmarginを無くす */
ul li:last-child {
    margin-bottom: 0;
}

「あれ、上と下でショートハンドかそうじゃないか書き分けるの？」と思った方もいるかもしれません。この書き方がいい理由ですが、今後もしレイアウト調整が必要になり、「ul li」に対して左右にもmarginの値、たとえば20pxを入れなければならないとなったと考えましょう。
もし「ul li:last-child」にmargin: 0;と書いていたらどうなるでしょうか？
「ul li」には左右のmargin20pxがはいるはずなのに、最後の1個だけは左右に対しても「ul li:last-child」のmargin: 0;の値が効いてしまうので、最後の一個だけは左右のmarginがとれずレイアウトが崩れてしまいます。

これを防ぐために、予め指定するときに、「ul li:last-child」にはmargin-bottom: 0;という書き方をして、下方向のみ打ち消すことができるように書きました。

考え方についての補足ですが、どっちで書くか迷った時にはこう考えるようにしています。
marginなどをショートハンドで書く時は、「この要素には下向きに?pxの余白を取ろう」と考えています。
逆に個別指定する時は「この要素の下にだけ?pxの余白を取ろう」と考えています。
上で書いていた例でも、「最後の一個の下のmarginだけ無効化したい」という考え方をもとに、基本は下に20pxのmarginをとりつつ、最後の一個だけmargin-bottom: 0;と書くことで最後の一個の下のmarginだけを無効にできる書き方を行いました。

まとめ

ショートハンドで書くことを覚えましたが、正直ショートハンドが使えるのがわずか10数種類しかないのは知りませんでした。fontもショートハンドがあるのは知っていたけど今後もサイズや太字ごとに個別に指定し続けると思います。

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

HTMLの基本的なタグについて

HTMLのタグは様々な種類があり、それによって文字の役割が変わってくるので非常に重要なものである。
タグは基本、<>（開始タグ）や</>（終了タグ）を用いて書いていく。

htmlタグ

htmlタグは、HTMLで書くコード全てを囲むタグである。開始タグは一番上、終了タグは一番下に書く。この中に様々なhtmlのコードを書いていく。

headタグ

headタグは、doctype宣言やmetaタグなど、読者の目には見えない情報をこの中に記述するタグである。

metaタグ

metaタグ、は製作者や日付、キーワードなどを記述するタグである。このタグには終了タグはなく、開始タグの中に書き込んでいく必要がある。

linkタグ

linkタグは、外部のサイトやCSSなどを読み込むときに使うタグである。こちらも,metaタグ同様に終了タグがない。

bodyタグ

bodyタグは、読者が読む内容を記述していくタグである。bodyタグからCSSを適用していく。

headerタグ

headerタグは、ロゴやホームページ内の構造などを書き記すときに使うある。headerをクリックすると一番上に戻るなどの役割を持たせる。

footerタグ

footerタグはページの一番したに置いておくものを書くときに使うタグである。

divタグ

divタグは、一つのまとまりを作る時に使うであり、タグ自体に意味は持たない。

h1〜６タグ

H1〜６タグは、見出しに使うタグ。番号が大きくなるにつれて見出しの大きさも小さくなっていく。

pタグ

pタグは、説明文など文章を書く時に用いるタグである。

imgタグ

imgタグは、画像などを表示させる時に使うタグ。srcに続けて画像のurlを指定する。こちらも終了タグがない。

aタグ

aタグは、他のサイトのリンクを貼るときやページ内の別の場所に飛ばしたい時に用いるタグである。hrefに続けてリンクを貼る。

liタグ

liタグはリストなどを作成する時に用いる。主にulタグで囲って使用する。

他にも様々なタグがあるので使いながら覚えておくといい。

これからも学習次第、Qiitaにまとめて行けたらと思う。

自己紹介

はじめまして！高校卒業後→地元の工場へ就職→現在転職のため学習中
はい。こんな感じで何にも学歴も良いわけでもなく何も取り柄がないわけですが、
転職を考えております。技術で勝負するしかないのです。

Qiitaになぜ投稿し始めたか。

これは単純にアウトプットする場所が欲しかったからです。
これから少しづつアウトプットしていきます。

とりあえず触ってみた技術、言語

HTML,CSS,JavaScript,Python,Django,Vue.js
とざっくりこのあたりを触りましたが、エラーを吐かれすぎて挫折仕掛けていました。

これからどうしていくのか

エラーを吐かれて解決できずに止まることがモチベーションが下がり気味
スクールに通うか迷いましたが、闇が深すぎて断念
様々な人に聞いたところMENTAを使ってみてはどうかということで、
メンターさんについてもらうことにしました。
これからはもう少し効率的に進めていけたらと思います。

初めまして！
弱弱駆け出しエンジニアのてしまと申します。

初投稿です！

今回はRubyonRailsでのBootStrapの導入手順についてまとめてみました。
導入自体は簡単です！
もし僕のような初学者でBootstrapに興味がある方は参考になればと思います。
実際に使った例も載せているため後半は長くなっております。

内容

①RubyonRailsにBootstrapを導入
②Bootstrapを使ってテーブルとボタンの装飾

対象者

・RubyonRailsで簡単なアプリケーションを立ち上げたことがある
・Bootstrapを知らないor使ってみたいと考えている
・Scaffoldを使ったことがある（無くても導入はできます）

Bootstrapとは

CSSの「フレームワーク」
通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが
このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので
ルールに沿って利用するだけで整ったデザインのページを作成できます。
（引用：https://techacademy.jp/magazine/6270）

色々調べているとBootstrapをダウンロードすると出てきましたが
今回、Gemを使ったので特にダウンロードせずに使えました。

前提条件

今回はBootstrapの導入と一部使用例をまとめています。
予めscaffoldを使ってtasksテーブルを作成。titleカラム、textカラムを追加しております。
今回使いませんがdeviseも入れてます。

では早速本題の導入手順です。

RubyonRailsでBootstrapを使えるようにする

①Gemの導入

まずはGemfileにgemを導入します。

Gemfile.

gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'

jqueryは今回使っていませんが、いつか使うと思われるので入ってなければ記述。

ターミナル.

bundle install

bundle installも忘れずに。

②SCSSファイルにimport

application.cssをapplication.scssに名前を変更。
そして以下の文を追記

application.scss

@import "bootstrap";

一応application.jsにも追記

application.js

//= require bootstrap

はい！以上で準備完了です！
これだけでBootstrapが使えるようになります！
肝心の使い方があまり載ってなかったので
実際にコードを入れて装飾してみたいと思います。

Bootstrapのコードを実際に入れてみる

では実際にBootstrapを使って装飾をしていきます。
装飾前がこんな感じです。
Scaffoldで生成してるのである程度形は整ってます。

①まずはHPにアクセス

「Bootstrap　HP」
https://getbootstrap.com/

ヘッダー左2番目のDocumentationをクリックして参考コードを検索しに行きます。

②作りたいCSSを検索

今回はテーブルを作るので「table」で検索
するとサンプル画像とそのコード一覧が出てくるので使いたいものを選びコピペするだけです！

③使いたいコードをコピー

一覧は画面の大きさの都合上、割愛してます。
今回は以下の画像サンプルのコードを使って実装していきます。

③エディタに貼り付け

先ほどコピーしたコードをエディタの対象ファイルに貼り付けます。
今回はviews/tasks(ご自身のファイル名）/index.html.erb
一旦、一番下などに貼り付けしてしっかり反映するか確かめてみると良いです。
下記はコピーして貼り付けただけです。
このテーブルタグの中身の記述（白テキスト部分）を自分のデータに置き換えていきましょう！

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

④記述場所にデータを置き換え(index.html.erbファイル）

貼り付け前のファイルの記述がこちらです。（参考までに）
views/tasks/index.html.erb

 <p id="notice"><%= notice %></p>
<h1>Tasks</h1> 
<table> 
   <thead>
     <tr>
       <th>Title</th>
     <th>Text</th>
       <th colspan="3"></th>
     </tr>
   </thead> 
   <tbody>
     <% @tasks.each do |task| %>
       <tr> |
         <td><%= task.title %></td>
         <td><%= task.text %></td>
         <td><%= link_to 'Show', task %></td>
         <td><%= link_to 'Edit', edit_task_path(task) %></td>
         <td><%= link_to 'Destroy', task, method: :delete, data: { confirm: 'Are you sure?' } %></td>
     </tr>
     <% end %> 
 </tbody> 
</table>
<br>
<%= link_to 'New Task', new_task_path %> 

Bootstrapのサンプルに余計なテーブルがあるので削除。
先ほどコピペしたコードのテーブルタグの中身を表示したいデータの記述に置き換えます。
バーっと作ったのでインデントなど細かいところはすみません?
変更場所は見比べていただければと思います。
貼り付けがうまくいったら元々あった記述は消しちゃいましょう。 　　
以下が変更後の記述です。

<h1>Tasks</h1>
<% if user_signed_in?%>
  <%= link_to "ログアウト", destroy_user_session_path, method: :delete %>
<% else %>
  <%= link_to "新規登録", new_user_registration_path %>
  <%= link_to "ログイン", new_user_session_path %>
<% end %>
<%# ----------以下がBootstrapのテーブル---------- %>
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">No</th>
      <th scope="col">Title</th>
      <th scope="col">Text</th>
      <th scope="col">Date</th>

      <th scope="col">Show</th>
      <th scope="col">Edit</th>
      <th scope="col">Destroy</th>
    </tr>
  </thead>
  <tbody>
      <% @tasks.each.with_index do |task, no| %>
        <tr>
          <td><%= no++1 %></td>
          <td><%= task.title %></td>
          <td><%= task.text %></td>

          <td><%= task.created_at.strftime('%Y/%m/%d %H:%M')  %></td>
          <td><%= link_to 'Show', task %></td>
          <td><%= link_to 'Edit', edit_task_path(task) %></td>
          <td><%= link_to 'Destroy', task, method: :delete, data: { confirm: 'Are you sure?' } %></td>
        </tr>
      <% end %>
    </tbody>
</table>
<%# ----------以上がBootstrapのテーブル---------- %>
<br>
<%= link_to 'New Task', new_task_path %> 

完成図と相違があると困惑するため
deviseで使っている上の部分の記述があります。
気になさらずに。
コメントアウトで区切っている中身のみをご確認ください。

⑤ボタンも作成

せっかくなのでボタンも入れてみましょう！
今度は「btn」で検索して（検索方法は色々あると思います）

以上のように色々出てきました。
今回は新規投稿ページにリンクさせたいので画像最下部のaタグのCSSを拝借。

まずは以下のリンクの記述を削除し

<%# ----------以上がBootstrapのテーブル---------- %>
<br>
<%= link_to 'New Task', new_task_path %> 

以下のように書き換え
※引用元のa href=後ろのリンク先の記述とタグ内の文字を変更しただけ
引用元に合わせてPrefixからURIパターンに書き換えてます。

<br>
<a href="tasks/new" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">New Task</a>

完成画像

HTMLの記述だけでサンプル画像と同じ見た目の装飾ができました！
（CSSのクラス名がBootstrapによって決められているため）
この高さの揃った綺麗なテーブルを作るのが意外と大変•••
きっと初学者の方なら共感いただけるかと思います。

Bootstrapを使えば決まったレイアウトにデータを置き換えるだけなので
このように簡単にCSSを作成可能！
アイコンなどもたくさんあったのでFontawsome派の方もぜひみる価値はありそうです！
今後はJSなども色々試してみてみたいと思います！

参考資料

初めてのRuby on rails Bootstrap導入編 [Memo for neko]
https://qiita.com/Matteneko3/items/4dae9e55054e4a4affb4

参考資料の方の記事を長く書いただけの記事です、、、
画像もつけて結構丁寧に書いたつもりですが
初投稿なのでもし間違っている点、ご意見などございましたら
コメントに残していただけると勉強、励みになります?‍♂️?
よろしくお願いいたします。

100日チャレンジの384日目

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

おはようございます
昨日の作業⇩

●就寝前筋トレ5分、キンドル読書 10分
●ブログ1記事作成
●プログラミング学習384日目 2h
・メンターの課題

モヤモヤしながらだったから捗らず・・・#駆け出しエンジニアとつながりたい#100DaysOfCode#早起きチャレンジ

— ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) July 27, 2020

計算機を作る

今回作る機能

ボタン切り替え機能

1.演算子入力をボタン切り替え機能を使って、計算する。
2.演算子入力した後で、別の演算子を入力するとその演算子を使った計算に切り替わるようにする。
3.CLEARボタン押すことで、リセットできる。

今回は、押した演算子ボタンの計算行いたかったので計算の関数を多少改変した。

今回の記事では、どのボタンを押したか分かりやすく、ボタンの背景色をピンクにしている。

苦戦したのは、CLEARボタンを押すことで演算子ボタンを初期化する機能。

getElementsByClassNameで指定したクラスを全部消す

上記のサイトで解決することができた。

該当するコード

caluculate.js

//ボタン切り替え機能の関数
var btns = document.getElementsByClassName('symbol-btn');
for (var i = btns.length - 1; i >= 0; i--) {
  btnAction(btns[i],i);
}

function btnAction(btnDOM, btnId) {
  btnDOM.addEventListener('click', function() {
    this.classList.add('active');

    for(var i = btns.length - 1; i >= 0; i--) {
      if(btnId !== i) {
        if(btns[i].classList.contains('active')) {
          btns[i].classList.remove('active');
        }
      }
    }
  });
}

//計算の関数
var calc = data => {
  if (flag === 0 && data !== "=") {
    flag = 1;

    var formula = total + operator + currentValue;
    total = eval(formula);

    operator = data;
    currentValue = '';
    show.textContent = total;
    console.log(operator); //確認用
  } else if (flag === 1 && data === "=") {
    var formula = total + operator + total;
    total = limitNum(eval(formula));

    currentValue = "";
    show.textContent = total;
  } else if (data === "=") {
    flag = 1;

    var formula = total + operator + currentValue;
    total = limitNum(eval(formula));

    currentValue = "";
    show.textContent = total;
  } else {
    operator = data; //演算子入力を変更できる
    console.log(operator);
  }
};

caluculate.js

//CLEARボタンを押すことでクラスを取り除く関数
function resetBackColor() {
  [].forEach.call(btns, function(e) {
    e.classList.remove('active');
  });
}

var clear = document.getElementById('clear-btn')
clear.addEventListener('click', () => {
  resetBackColor();
});

完成物

See the Pen QWyRvjr by ライム (@raimumk2) on CodePen.

サンプルコード

HTML

caluculate.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/caluculate.css">
  <title>計算機</title>
</head>
<body>
  <div class="caluculate">
    <div class="wrapper">
      <div id="number-text">0</div>
    </div>
    <div class="other-btns">
      <button id="clear-btn">CLEAR</button>
      <button id="record-btn" onclick="record()">RECORD</button>
    </div>
    <div id="btns">
      <div id="num-btns">
        <button onclick="number(7)">7</button>
        <button onclick="number(8)">8</button>
        <button onclick="number(9)">9</button>
        <button onclick="number(4)">4</button>
        <button onclick="number(5)">5</button>
        <button onclick="number(6)">6</button>
        <button onclick="number(1)">1</button>
        <button onclick="number(2)">2</button>
        <button onclick="number(3)">3</button>
        <button id="zero" onclick="zero(0)">0</button>
        <button name="point" onclick="point('.')">.</button>
        <button id="equal" onclick="calc('=')">=</button>
      </div>

      <div id="symbol-btns">
        <button class="symbol-btn" onclick="calc('/')">/</button>
        <button class="symbol-btn" onclick="calc('*')">*</button>
        <button class="symbol-btn" onclick="calc('-')">-</button>
        <button class="symbol-btn" onclick="calc('+')">+</button>
      </div>
    </div>
  </div>

  <script src="js/caluculate.js"></script>
</body>
</html>

CSS

caluculate.css

* {
  margin: 0;
  padding: 0;
}

.caluculate {
  margin: 100px auto;
}

.wrapper {
  width: 300px;
  margin: 0 auto;
}

.wrapper > #number-text {
  width: 285px;
  height: 54px;
  line-height: 54px;
  margin-left: 5px;
  margin-bottom: 5px;
  font-size: 48px;
  border: 1px solid black;
  /* 右から左へ入力するためのスタイル */
  text-align: right;
}

.other-btns {
  margin: 0 auto;
  width: 300px;
}

#clear-btn {
  width: 135px;
  margin-left: 5px;
  font-size: 24px;
  /* 上下のズレを直すためのスタイル */
  vertical-align: middle;
}

#record-btn {
  width: 135px;
  font-size: 24px;
  margin-left: 13px;
  /* 上下のズレを直すためのスタイル */
  vertical-align: middle;
}

#btns {
  width: 300px;
  display: flex;
  margin: auto;
}

button {
  width: 65px;
  height: 57px;
}

#num-btns {
  margin: 5px;
}

#num-btns > button {
  margin-bottom: 5px;
  font-size: 24px;
}

#symbol-btns {
  height: 228px;
  display: flex;
  flex-direction: column;
  display: inline-block;
  margin-top: 5px;
}

#symbol-btns > .symbol-btn {
  margin-bottom: 5px;
  height: 57px;
  font-size: 24px;
  text-align: center;
}

.active {
  background-color: pink;
}

Javascript

caluculate.js

var show = document.getElementById('number-text');
var total = ''; //合計と演算子
var operator = '+'; //演算子
var currentValue = ''; //現在の値
var flag = 0; //ボタンが押されたあとに効かなくする※flag(フラグ)を立てる。最初は0を代入。

//数字入力の関数
var number = data => { //押されたボタンの値 data()をアロー関数にしている
  if (currentValue.length <= 8) {
    flag = 0;
    currentValue += data;
    show.textContent = currentValue;
    console.log(show.textContent); //確認用
  }
};

//0についての関数
var zero = data => {
  if(currentValue === '0') {
    return; //最初の文字が0のとき0を押せなくする
  } else if (currentValue.length <= 8){
    flag = 0;
    currentValue += data;
    show.textContent = currentValue;
    console.log(show.textContent);
  }
}

//小数点(.)の関数
var point = data => {
  if (currentValue === '') {
    return; //最初に小数点を押せなくする
  } else if (!currentValue.includes('.')) {
    currentValue += data;
    show.textContent = currentValue;
  }
}

//計算の関数
var calc = data => {
  if (flag === 0 && data !== "=") {
    flag = 1;

    var formula = total + operator + currentValue;
    total = eval(formula);

    operator = data;
    currentValue = '';
    show.textContent = total;
    console.log(operator); //確認用
  } else if (flag === 1 && data === "=") {
    var formula = total + operator + total;
    total = limitNum(eval(formula));

    currentValue = "";
    show.textContent = total;
  } else if (data === "=") {
    flag = 1;

    var formula = total + operator + currentValue;
    total = limitNum(eval(formula));

    currentValue = "";
    show.textContent = total;
  } else {
    operator = data; //演算子入力を変更できる
    console.log(operator);
  }
};

//ボタン切り替え機能の関数

var btns = document.getElementsByClassName('symbol-btn');
for (var i = btns.length - 1; i >= 0; i--) {
  btnAction(btns[i],i);
}

function btnAction(btnDOM, btnId) {
  btnDOM.addEventListener('click', function() {
    this.classList.add('active');

    for(var i = btns.length - 1; i >= 0; i--) {
      if(btnId !== i) {
        if(btns[i].classList.contains('active')) {
          btns[i].classList.remove('active');
        }
      }
    }
  });
}

//小数点以下の桁数を揃える関数
function limitNum(num) {
  return Math.round(num*10000000)/10000000;
}

//CLEARボタンの関数
function reset() {
  operator = '+';
  total = '';
  currentValue = '';
  flag = 0;
  show.textContent = '0';
};

function resetBackColor() {
  [].forEach.call(btns, function(e) {
    e.classList.remove('active');
  });
}

var clear = document.getElementById('clear-btn')
clear.addEventListener('click', () => {
  reset();
  resetBackColor();
});

参考サイト

js関連

jQuery日本語リファレンス

qiita:jQuery classの追加・削除

qiita:すっきり書きたい JavaScriptの条件分岐

qiita:JS イベントまとめ

【jQuery入門】removeClass()でクラスを削除する方法まとめ！

getElementsByClassNameで指定したクラスを全部消す

エラー関連

Uncaught Type Error: Cannot read property 'columns' of undefinedについて

今後の構想

・計算結果をリストに追加していく機能
（複数の計算があったとき用のメモ代わり）
RECORDボタン押してリストに追加する。

・計算結果リストの編集ができる機能
(作れそうなら作ってみる)

リストに追加する機能自体は、自分の記事からコピペして、今のコードに合うように書き換える。

リスト自体の配置やスタイルをどう当てるかが課題。

計算結果リストの編集機能は、主に削除さえできればと思っている。

ファイルハンドルに test.dat ファイルをひも付け、ファイルオープン。値を取り出して、インクリメントして閉じる式。

これと、test.dat ファイルに、0と入力し、FTPソフトでアップロード。
ファイルパーミッションを、php=705,dat=706にセットして完成。

ウェブページを書く前に。

ウェブページを作るにあたっては、個別サイトか企業サイトかで中の作りが変わってくるので作りたい方に必要な要素などを書き出してから進めるといい。

ホームページの種類は従来型とブログ型（CMS）に大きく分けられる。

従来型

メリット

自己紹介や会社概要などの時系列を持たないコンテンツの配信には従来型のホームページが適している。

デメリット

一から作成していく必要があるので、コンテンツを追加しようとすると手間がかかってしまう。

ブログ型（CSM）

メリット

日々更新するような日記やニュースなどはブログを使った配信の方が適している。本文を簡単に投稿するだけで簡単にページを作成することができる。

デメリット

常に新しいコンテンツが優先してしまうので、古い記事の大事な内容が読者の目に止まりにくくなってしまう。

最近では両方のメリットを兼ね備えたページもある

最近では従来型とブログ型のメリットを生かして、自己紹介や会社案内、お問い合わせなどは常に表示されるようにして、ニュースやお知らせなどは投稿するだけで新しい記事になっていくものもある。

環境

Mac OS Catalina

プロジェクトの作成

create-react-appで作成できる

// プロジェクトを作成したいディレクトリで
$ npx create-react-app react-example-app

// いろいろパッケージがダウンロードされる

プロジェクトのディレクトリへ移動

$ cd react-example-app
$ npm start

(一部略)
Compiled successfully!

You can now view react_app_practice in the browser.

  Local:            http://localhost:3000

以下の画像のようなページに遷移できるはず。

index.js、index.cssとApp.jsに変化を加えてみる

別のものを表示してみる。index.jsを以下のように書き換える。

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function Moneybook() {
  return (
    <div>
      <h1>
        小遣い帳
      </h1>
      <table className="book">
        <thead>
          <tr>
            <th>
              日付
            </th>
            <th>
              項目
            </th>
            <th>
              入金
            </th>
            <th>
              出勤
            </th>
          </tr>
        </thead>
        <tbody>
          <tr><td>1/1</td><td>お年玉</td><td>10000</td><td></td></tr>
          <tr><td>1/3</td><td>ケーキ</td><td></td><td>500</td></tr>
          <tr><td>2/1</td><td>お小遣い</td><td>3000</td><td></td></tr>
          <tr><td>2/5</td><td>漫画</td><td></td><td>600</td></tr>
        </tbody>
      </table>

    </div>
  );
}

export default Moneybook;

index.cssも書き換える

index.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.book {
  border-collapse: collapse;
}

.book th, .book td {
  border: solid 1px;
  padding: 1px 15px;
}

最後にindex.jsも書き換える

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import MoneyBook from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <MoneyBook />,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

これで npm startとすれば、以下のように表が表示されるはず。

これからもいろいろ他のものも触っていきたい。

参考

作りながら学ぶReact入門