俺的カンニングペーパー

Web技術のカンニングペーパーを作ることを目的に発信していきます

HTML＆CSS　カンニングシート

HTML5&CSS3と関連する便利ツールについて自分なりにまとめてみました。

 

骨組みに使われるタグ

骨組みに使われるタグはブラウザ上で表示されません。しかし、内容に合わせて正しいタグを選択することは、セマンティックウェブ(コンピュータが効率よく情報を収集・解釈できるようにすること)の観点からも非常に重要です。

タグ名 説明
header ヘッダーに使います。
footer フッターに使います。
section 1つの内に意味の区切りを設けたいときに使います。
articcle 独立した記事に使います。
aside 補足的な情報に使います。
nav 主要なナビゲーションに使います。
div 特に意味を持たない汎用的なコンテナ。デザインやレイアウトのための囲みが必要な場合などに使います。
main メインコンテンツ用です。IE11では未対応(※)。

(※)IEの対応状況を気にしている資料があったので、調べてみたところ IE11で部分的にしかサポートされていないようです。

 

id属性とclass属性

CSSでHTMLタグを識別するために、HTMLタグに指定できる属性です。違いは次の通りです。

  • id属性

    1つのHTML文章内では一度しか出現できず、それぞれのタグ名はID名を一つしか持つことができません。

  • class属性

    1つのHTML文章内で何度でも使え、1つのタグに複数のクラス名をつけることも可能です。例えば、<ul class="gallery flower">のように、クラス名の間を半角スペースで区切ることで、いくつでも名前をつけることができます。実装するに当たってclassを主に使うと思います。

olタグとulタグの違い

使い分けは順序があるかないかです。(以外に忘れる！)

タグ名 説明
ol 順番が入れ替わると意味が変わってしまうリストの場合に使用する。
例：パンくずリストのように、物事の流れや順序を表すもの。
ul 順番を入れ替えても意味の変わらないリストの場合に使用する。

特殊記号

「htmlのコードと干渉しないようにする」という目的のために使用されます。

例えば、HTML記載時に使用する「< 」「>」「"」「&」の他に「©」「☆」「♥」などの変わり種も多数存在します。

こちらに特殊記号の一覧が載っています。

http://www.htmq.com/text/

テキストに意味を持たせるタグ

以下のタグを用いることで、テキストに意味を持たせることができます。

タグ名

 

説明
h1〜h6 見出しにしたい箇所を表し、数字が大きくなるほど小さな見出しとなります。また、ブロック要素であるため自動で改行されます。
em 強調したい箇所を表します。
strong emタグよりも強い重要性を表します。
b キーワードや製品名・サービス名など、他と区別したいテキストを表します。重要性や強調を表す役割はありません。
i 声や心の中で思ったことなどを表す際に使用します。重要性や強調を表す役割はありません。
mark 文書内の該当テキストをハイライトして目立たせる際に使用します。strongやemタグのようにその部分を強調することが目的ではなく、ユーザーが参照しやすいように目立たせることが目的です。
deltd 削除された部分を表す際に使用します。テキストに打ち消し線が引かれます。
smalltd 「意味合いを弱める」目的があり、注釈や細目を表す際に使用します。
spantd 上記以外の用途で文字を装飾したいケースで利用します。汎用的なタグで単体では意味を持たず、class属性やid属性を設定し、スタイルシートを適用することで自由に装飾できます。

表の作成

HTMLで表を作るにはtable、tr、th、tdタグを用います。

table-elements

上図の表をソースで表すと、次のようになります。表の装飾には基本的にCSSを利用します。

ただし、表の横幅は表内の文字数に応じて変わるため、HTMLで指定した方がいい場合もあります。

HTMLで表の横幅を指定するには、まず表全体の幅サイズをtableタグのwidth属性に設定します。次に、各セルの幅のサイズを1行目のth、tdタグのwidth属性に設定します。この時の注意点として、各セルの幅のサイズの合計と、表全体の幅のサイズが一致する必要があります。幅サイズはピクセル数かパーセント単位で指定できます。

これをソースで表すと次のようになります。

CSS3

CSSとは

Cascading Style Sheets(カスケーディング・スタイル・シート)の略で、ウェブページのスタイルを指定するための言語です。HTMLとの使い分けは、HTMLでテキストに「文書構造」を与え、CSSで装飾やレイアウトを施します。

基本的な書き方

CSSは「セレクタ」「プロパティ」「値」の3つで構成され、HTML内の「どこ(セレクタ)」に「何を(プロパティ)」を「どうする(値)」のかを記述します。

記述例は次の通りです。

  1. p {/*(1)*/
  2. color: #ff0000;
  3. font-size: 20px;
  4. /* (2) (3) */
  5. }

(1)はセレクタの設定です。{}で囲んだ中にプロパティと値を記述します。

(2)と(3)はプロパティと値の設定です。プロパティ: 値;のフォーマットで記述し、複数指定可能です。

上記の例ですと、pタグ内の文字色を赤色、文字サイズを20pxにする設定です。

また、pythonのように字下げは必須ではなく、コメント部は/* */で囲みます。C言語の用な//コメントは非対応です。

CSSを記述する場所

次の3つがあります。その中でリンクがよく使われます。理由は1つのCSSファイルを複数のHTMLファイルに適用させることができるからです。

  • インライン

    HTMLファイルのタグに直接記述します。

    1. <!-- sample.html -->
    2. <p style="font-size:20px">あいうえお</p>
    3. <p>かきくけこ</p>

  • エンベッド

    HTMLファイルにstyleタグを追加し、その中に記述します。

    1. <!-- sample.html -->
    2. <style>
    3. p { font-size: 20px;}
    4. </style>
    5. <p>あいうえお</p>
    6. <p>かきくけこ</p>

  • リンク

    CSSを外部ファイルとして扱い、HTMLファイルから参照して利用します。

    1. <!-- sample.html -->
    2. <link rel = "stylesheet" href="style.css">
    3. <p>あいうえお</p>
    4. <p>かきくけこ</p>
    1. /* style.css*/
    2. p { font-size: 20px; }

因み、長すぎるCSSファイルは以下のように分割することもできますが、その分サーバーに対するアクセス要求が増えるため、ページの読み込み速度が低下する恐れもあります。

  • HTMLから複数のCSSファイルを読み込む方法

    上述したlinkタグを複数行記載する方法です。

    link

  • CSSから複数のCSSファイルを読み込む方法

    CSSファイル内でCSSファイルを読み込む@importを複数行記載する方法です。

    @import

    @importはCSSファイルの先頭行(@charsetは除く)に次のように記載します。

    1. @charset "utf-8"; /* 文字コード指定 */
    2. @import url("sample.css");
    3. @import url(sample.css); /* 引用符を省略 */
    4. @import "sample.css"; /* urlを省略 */

セレクタの種類

セレクタとは、HTMLファイル内のスタイルを適用するタグを選択するための条件式で、次のような種類があります。

  • タグセレクタ

    同じ種類の全てのタグに適用され、HTMLのタグ名をそのまま指定します。

    1. h2 { font-size: 50px; }

  • IDセレクタ

    特定のIDを持つタグを選択する場合に使用されます。#ID名のように先頭が#だとIDセレクタになります。

    1. #hoge { font-size: 50px; }

  • クラスセレクタ

    特定のクラス名を持つタグを選択する場合に使用されます。.クラス名のように先頭が.だとクラスセレクタになります。

    1. .hoge { font-size: 50px }

  • 子孫セレクタ

    タグの中にあるタグを選択する場合に使用します。親セレクタ 子セレクタのようにセレクタ間は半角スペースで区切ります。

    1. header h2 { font-size: 50px; }

  • 複数セレクタ

    複数のセレクタに同じスタイルを適用したい場合に使用されます。

    セレクタ1, セレクタ2のようにセレクタの間は,で区切ります。

    1. h1, h2, h3 { font-size: 50px; }

    また、次のようにセレクタ指定方法を組み合わせることもできます。

    1. /* liタグのl1,l2,l3クラスを指定する。 */
    2. li.l1, li.l2, li.l3 { list-style-type: decimal; }

  • 全称セレクタ

    全てのタグを対象としたい場合に使用します。アスタリスクで全てのタグを表します。

    1. * { font-size: 20px;}

  • 擬似クラス

    スタイルを適用する条件を指定する場合に使用され、セレクタ:擬似クラスで指定します。擬似クラスには、マウスカーソルが重なった時を指定する:hover(以下のサンプルソース参照)の他にリストの先頭や末尾を指定する:fast-childや:last-childなど、様々な指定ができます。

    ※PCで「Hello World!」にマウスカーソルを合わせると背景が赤くなります

  • 擬似タグ

    タグにテキストや画像を追加したい場合に使用され、セレクタ::擬似タグで指定します。タグの前に追加する::beforeや、後に追加する::afterなどがあります。::beforeを利用すると以下のようにh2タグの先頭に「✔」を追加したりできます。

擬似クラスや擬似タグはここで紹介した以外にもあります。

参考：CSS3のセレクタ全42種 まとめておさらい使い方リファレンス

スタイルの優先順位

CSSを書く場所やセレクタの種類によって決まります。

優先順位が同じ場合は、後に書いた方が優先されます

複数のセレクタを組み合わせる場合、計算によって求めらる点数が大きいほど優先順位が高くなります。

計算方法について次のように書いている資料がありました。

「個別性」というチェック式に点数をつけられる計算によって優先順位が決まります。

個別性という単語を使う理由はサッパリですが、要はセレクタに含まれるIDやタグ毎に付けられた重みから算出するようです。

重み対応表

記号(重み) 個数の算出方法
a(1000) style属性なら1、それ以外なら0
b (100) ID名の数
c (10) クラス名、属性名、擬似クラスの数
d (1) タグ名、擬似タグの数

点数は「(a × aの個数) + (b × bの個数) + (c × cの個数) + (d × dの個数)」で求めますが、正直こんな計算やってられません。

当然計算してくれるサイトがあります。ただし、セレクタを直接記述する方式のため、重みaの計算には対応していませんでした。

優先順位を計算してくれるサイト：http://specificity.keegan.st/

また、以下のように!importantをプロパティの末尾に追加することで、優先順を強制的に変えることもできます。

本来であれば.wordセレクタで指定した背景色→赤、文字色→黒の設定になります。ですが、pセレクタで文字色を指定するcolorプロパティの末尾に!importantを追加しているため、こちらの設定が優先され文字色は赤色でなく白色の設定になります。

スタイルの継承

文字関連の一部のプロパティは、HTMLの親子関係に沿ってスタイルを継承していきます。

以下の例でh1とpタグで囲んだ文字には、colorプロパティは継承されるため文字色は赤色になりますが、borderプロパティは継承されないため青枠では囲まれません

次のように継承されないプロパティにinheritを指定することで、強制的に継承させることもできます。

初期設定で継承されるプロパティの一覧はこちらを参照ください。

CSS初学者の最初の壁「スタイルの継承」をしっかり理解する

文字サイズの指定

font-sizeプロパティで指定することができ、サイズを指定する単位は「相対単位」と「絶対単位」の2つに分類できます。

  • 相対単位とは？

    親タグのサイズに応じて実サイズが決まります。

    単位 説明
    px 画面のピクセル
    % 親タグのサイズに対する%で指定
    em 欧文における大文字のMを基準とした単位
    ex 欧文における小文字のxを基準とした単位
    rem em基準だが、親タグに対して相対的にフォントサイズが決定

  • 絶対単位とは？

    親タグに影響されず、指定した値はどんな環境でも均一に見えます。

    単位 説明
    pt ポイント
    pc パイカ(1pc=12pt)
    mm ミリメートル
    cm センチメートル。
    in インチ(1in=約25mm)
    <

以下は、emを使った相対サイズ指定の例です。

色の指定方法

colorプロパティで指定でき、次のような指定方法があります。

  • 16進数による指定

    赤緑青の強さをそれぞれ16進2桁で指定します。

    1. color: FF00FF;

  • RGB指定

    赤緑青の強さを0〜255の数値か、0%〜100%のパーセントで指定します。

    1. color: rgb(255, 0, 255);
    2. color: rgb(!00%, 0, 100%);

  • HSL指定

    次の3つの値で指定する方法です。同じ色を保って明るさや鮮やかさだけを変化させるのが容易です。

    色相(hue)
    色味を色相環に照らし合わせた0〜360度の角度で表します。0度は赤、120度は緑、240度は青、360度で赤に戻ります。
    彩度(Saturation)
    色相で指定した色の鮮やかさを0%〜100%で表します。0%に近づくほど灰色になります。
    輝度(Lightness)
    明るさを0%〜100%で表します。0%で黒、100%で白、50%で純色になります。
    1. color: hsl(128, 40%, 70%);

    色相環

  • 不透明度の指定

    RGB指定とHSL指定では0〜1の値で不透明度を追加指定することができます。指定する場合はrgbaやhslaと末尾にa(※)がついたプロパティを使用します。

    1. color: rgba(255, 0, 255, 0.5);
    2. color: hsla(128, 40%, 70%, 0.5);

    ※aはalphaの略です。不透明度を英訳したopacityのoでない理由は下記のようです。

    アルファ値（アルファち、alpha value）とは、デジタル画像データにおいて色情報とは別に、画素（ピクセル）ごとに設けられた付加情報を表す数値である。特に透明度（不透明度）として利用されることが多い。

    引用：ウィキペディア

    因みに、0〜1の数値で不透明度を指定できるopacityプロパティもあり、画像などの不透明度を指定する際はこちらを使います。

ボックスモデル

ボックスモデルは下図のような4種類の概念で構成されます。

ボックスモデル

各概念についての詳細は次の通りです。

  1. マージン

    隣り合うタグとの距離を調整するために使います。

    1. margin: 10px /* 全ての辺に、外側の余白を指定 */
    2. margin-top: 10px /* 上辺に、外側の余白を指定 */
    3. margin-right: 10px; /* 右辺に、外側の余白を指定 */
    4. margin-bottm: 10px; /* 下辺に、外側の余白を指定 */
    5. margin-left: 10px; /* 左辺に、外側の余白を指定 */
    6.  

  2. ボーダー

    タグの四辺に枠線を付けるものです。

    borderプロパティで指定でき、「線の種類」「線の太さ」「線の色」の3つを半角スペースで区切って記述します。margin同様にborder-topで上辺だけ指定することもできます。

    1. border: solid 1px red;
    2. border-top: solid 1px blue

    また、個別に指定するためのプロパティも用意されています。

    指定内容 変更したい辺 プロパティ名
    線の種類 4辺全て border-style
    指定した辺のみ border-[向き]-style
    線の太さ 4辺全て border-width
    指定した辺のみ border-[向き]-width
    線の色 4辺全て border-color
    指定した辺のみ border-[向き]-color

    ※[向き]にはtop、right、bottom、leftのいずれかを記述します。

    指定できる線の種類はこちらを参照ください。 border-style/枠線の種類

  3. パディング

    タグの内側の間隔を指定するものです。

    1. padding: 10px /* 全ての辺に、内側の余白を指定 */
    2. padding-top: 10px /* 上辺に、内側の余白を指定 */
    3. padding-right: 10px; /* 右辺に、内側の余白を指定 */
    4. padding-bottm: 10px; /* 下辺に、内側の余白を指定 */
    5. padding-left: 10px; /* 左辺に、内側の余白を指定 */

  4. コンテンツ

    実際に表示する内容の領域です。指定しない場合、内容のテキストや子タグに合わせて自動調整されます。

    1. widt: 3000px; /* 幅の指定 */
    2. height: 512px; /* 高さの指定 */

因みに、marginは次のように1つのプロパティで複数の値をまとめて指定することもできます。この指定は、paddingとborder-style、border-width、border-colorプロパティでも可能です。

  1. margin: 10px 15px 20px 30px; /* 上 右 下 左 */
  2. margin: 10px 15px 20px; /* 上 左右 下 */
  3. margin: 10px 15px; /* 上下 左右 */
  4. margin: 10px; /* 上下左右 */

このような指定方法をショートハンドといいます。他にもありますので、詳しくはこちらを参照ください。

CSSのショートハンド

floatプロパティ

このプロパティで指定されたタグは左右に寄せて配置され、 後に続く内容はその反対側に回り込みます。主に次のような目的で使用されます。

  1. 画像などの横にテキストを回り込ませる

    次のような実装を行いたい場合に使用します。

    上記サンプルで使用している<figure>タグは文章の本文から参照されるイラスト・図・写真・ソースコードなどタグで囲んだ部分を他の場所に移動しても、本文の文脈に問題がない場合に使用します。見出しや説明を付けたい場合は、figcaptionタグを使用します。

  1. カラムレイアウトを実現する

    カラムレイアウトとは、各パーツを複数列に配置する段組の作り方で、この列のことを「カラム」と呼びます。カラムレイアウトには次のようなパターンがあります。

    ColumnLayoutPattern

    上図の各パーツは主にdivタグで囲んで実装するのですが、divタグはブロックレベルの性質を持つため、そのままでは縦方向に表示されてしまいます。

    ブロックレベルの性質：

    • 内容が少なくても横並びにはならず、縦方向に並んで表示される。
    • デフォルトで横幅の情報を持っており、ブラウザいっぱいまで広がっているため、次のタグはその下に積まれます。

    この性質を変えてカラムレイアウトを実現するために利用されます。以下はflotプロパティを利用したカラムレイアウトのサンプルソースになります。

    上記サンプルで.wrapperセレクタにoverflow:hiddenプロパティを指定しているのは、フッターが重なってしまうを防ぐためです。フッターが重なる理由はfloatプロパティで子タグをすべて浮動させると、親タグは中身が無いものと認識され、高さがなくなってしまうからです。

    別の方法として、以下のようにfooterセレクタにclearプロパティを指定して、floatプロパティで指定した回り込みを解除する方法もあります。

displayプロパティ

displayプロパティは、ブロックレベル・インライン・テーブル・ルビ・フレックスコンテナ等の、タグの表示形式を指定する際に使用します。

floatプロパティで行ったカラムレイアウトは、displayプロパティにinline-block値を設定しインラインやインライブロックに変化させることでも実現可能ですが、後述の理由から推奨されていないようです。

P149

インラインのタグは、HTML上で前後に改行がある場合、それを半角スペースとして認識します。つまり、レイアウトする前後のコードに改行がある場合、意図して指定した幅+余計なスペースが発生してしまい、意図しないレイアウト崩れが起きてしまう可能性があります。

この現象をソースで表すと次のようになります。

displayプロパティに設定できる値の一覧はこちらを参照ください。

http://www.htmq.com/style/display.shtml

さらに詳しく知りたい方はこちらの記事が参考になります。

【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

positionプロパティ

positionプロパティは座標を数値で指定してレイアウトする際に使用します。

記述方法は次の通りです。

  1. [セレクタ名] {
  2. position: [配置方法を指定];
  3. top: [上からの位置をpxで指定];
  4. right: [右からの位置をpxで指定];
  5. bottom: [下からの位置をpxで指定];
  6. left: [左からの位置をpxで指定];
  7. }

配置方法を指定するpositionプロパティには、以下の3種類が指定可能です。

  • relative(相対配置)

    初期状態で表示されていた位置からどれだけずらすかを指定します。

    relative_image

  • absolute(絶対配置)

    基準となるタグからの位置を指定します。

    absolute_image

  • fixed(固定配置)

    指定方法はabsoluteと同じですが、スクロールしても位置が固定されたままになります。

    fixed_image

グラデーション

ボタンやリンクを立体的に見せるために使用されます。 正直よくわかっていないのでこちらの記事を参考下さい。

CSSのグラデーション（linear-gradient）の使い方を総まとめ！

transitionプロパティ

アニメーションをつけるために使用されるプロパティです。

もっとも簡単な例は次のように、ボタンにマウスポインタが乗った時の色の変化にアニメーションを付けるケースです。

transition指定有無のアニメーション

記述方法は次の通りです。

  1. transition: [対象のプロパティ] [変化時間] [変化の種類];

「変化時間」は0.1秒単位で指定できます。「変化の種類」には下表に示す値を指定することができます。

値 説明
default 変化なし。
ease 開始と完了を滑らかにする。
linear 一定のスピード。
ease-in ゆっくり始まる。
ease-ou ゆっくり終わる。
ease-in-out ゆっくり始まってゆっくり終わる。
cubic-bizer 3次ベジェ曲線を表す4つの数字をカンマ区切りで指定する。(補足)

(補足) cubic-bizerはより複雑な変化をさせたい場合に利用されます。以下のサイトを利用することで、簡単に指定することが出来ます。

　サイト：cubic-beierのサイト

　参　考：直感的にCSSのイージングを作成できるサイト「cubic-bezier」

さらに詳しい解説はこちらの記事が参考になります。

【CSS3】Transition（変化）関連のまとめ

便利ツール

Brackets

  • HTMLやCSSの編集に最適化されたAdobe製のエディタ。
  • オープンソース。
  • macOS,Windows,Linuxのクロスプラットフォーム対応。
  • ライププレビュー機能があるため、エディタの修正がリアルタイムでブラウザに反映される。
  • 画像ファイルのパスにマウスカーソルを合わせると、ポップアップで画像を表示してくれる。
  • 色指定箇所にマウスカーソルを合わせると、ポップアップで色を表示してくれる。
  • アドオンによる拡張機能に対応している。

サイト：Brackets

参　考：史上最強のエディタBracketsに出会ってしまった

PIXLR EDITOR

Photoshopと同じような機能があってしかも無料で使えるクラウドツールです。

サイト：https://pixlr.com/

参　考：【無料】Pixlr Editor（ピクセラエディタ）の機能説明＆使い方～高機能画像処理ソフト

Adobe Color CC

色の組み合わせを考える際に役立つサイトです。次のようなことができます。

  • 類似色や補色などのカラールールを決めるだけで様々な組み合わせのカラーパレットを作成してくれるサイトです。
  • 写真やイラストをアップロードするだけで5つの色を抽出してくれます。

サイト：Adobe Color CCのサイトはこちら

参　考：Adobe Color CCの使い方!画像からカラーパレットが作成できるツール

グラデーションの指定

グラデーションはもともと指定が複雑なのに加え、旧機種対応の指定も必要なので、思い通りに指定するのは至難の技です。そのため、手書きでは行わず「ジェネレーター」と呼ばれるオンラインの生成ツールやWeb制作のアプリケーションでコードを生成することがほとんどです。

サイト：Ultimate CSS Gradient Generator

参　考：超便利！CSSグラデーション基礎と簡単に作れるジェネレーターまとめ

CSS-TRICKS

CSSのみで描く図形が多数紹介された英語のサイトです。

サイト：CSS=TRICKSのサイト

cubic-beier

直感的にCSSのアニメーションを作成できるサイトです。

サイト：cubic-beierのサイト

参　考：直感的にCSSのイージングを作成できるサイト「cubic-bezier」

Font Awesome

アイコンフォントは様々なものが公開されています。その中でアイコンの種類が豊富で人気が高いサイトです。

サイト：Font Awesome

参　考：【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

　　　　Font Awesome 5をCSSの疑似要素で指定するとアイコンが表示されない場合の対処方法

Webサイトの品質確認

品質というとデザインや見た目の良さと思うかもしれませんが、Webサイトは情報を伝達するツールなので、見る人に対して情報が伝わっているかどうかや、マークアップが正しく書かれていることが重要になります。

品質を左右する3要素

マークアップの用法が正しいかどうかは、次のツールでチェックすることができます。

HTML5/CSS3のブラウザ毎の対応状況をチェック

　HTML5は足並みを揃えてアップデートしているため、ブラウザ毎の誤差はそこまでありません。しかし、CSS3はそうではありません。プロパティ(書式指定)毎に個別に仕様が定義され、アップデートされていいます。そのため、プロパティごとにブラウザでの対応状況が異なるます。これらを1つ1つ追うのは大変です。

そんな時に便利なのがcaniuse.comというサイトになります。チェックしたいプロパティを入力するだけで、ブラウザでのバージョン毎の対応状況の一覧を色分けして表示してくれます。色の分類についての説明はサイトの右下にあります。

サイト：caniuse.com

参　考：HTML5、CSS3のブラウザ毎の対応状況が確認できる「Can I use…」

最後に

軽くまとめるつもりが無駄に長くなってしまいました。

長いんですが「グラデーション」や「スマホ向け対応」等、HTML5&CSSについてまだまだ網羅できておらず穴だらけです。穴を塞ぐために、今後もこういった記事を書いていこうと思います。

そして、将来的にはこの記事を目次にして内容は分散させようと企んでいます。

ここまで読んでいたいだき、ありがとうございました。

You cannot specify the same gem twice with different version requirements[Gemfile]

エラー

🤨< gemfile触ってたらエラーが発生したので、解決方法をまとめます

[!] There was an error parsing `Gemfile`: You cannot specify the same gem twice with different version requirements.
You specified: web-console (>= 3.3.0) and web-console (~> 2.0). Bundler cannot continue.

 #  from /Users/*/*/*/Gemfile:52
 #  -------------------------------------------
 #    gem 'spring-watcher-listen', '~> 2.0.0'
 >    gem 'web-console', '~> 2.0'
 #  end
 #  -------------------------------------------

解決方法

エラー文を見てみると、
英語
You cannot specify the same gem twice with different version requirements
↓
日本語
異なるバージョン要件で同じgemを2回指定することはできません

🤔< Gemfileに二つweb-consoleを指定しているのがエラー原因になってるとのことなので、gemfileを編集してweb-consoleを一つにします

🤪< はい解決です

テストコードを書くに当たって大切にすること

テストコードの大切さ

テストコードはとても大切です。テストコードを書かなければ、プログラムは想定していなかった動きを見せる可能性が高くなります。
あらゆるケースを想定し、「バグがないことを確かめてから」本番に適用するようにするのがテストコードを書く意義です。

テストを書くメリット

基本的に、ひとつのプロダクションコードに対してはひとつのテストコードが必要です。
例えばRuby on Railsにおいては、モデルクラスやコントローラークラスひとつにつきひとつのテストコードを書かなければいけません。これは面倒に感じるかもしれませんが、それを補いなお余るほどのメリットも存在します。それは、主に以下の2つです。

1.仕様漏れを減らすことができる

テストをするにあたっては、対象のメソッドがどのような目的で作成されどんな挙動をしなければいけないのかということを全て洗い出します。結果的に仕様を良く確認することになり、バグを引き起こす仕様漏れを少なくすることができます。

2.リファクタリングや機能追加をしやすくなる

リファクタリングとは、コードをより綺麗なかたちに修正する作業のことです。一度テストを通過してしまえば、最終的な結果を維持しリファクタリングをするのが簡単になります。また、新たな機能を追加する際も、従来の箇所は間違いなく動いていることを確認できているので、その結果を崩さないようにするだけで安全に実装することができます。

テストコードを書く際の心がけ

1. スピードは求めない

コードを書く量が増えるので、開発スピードが遅くなることは許容しましょう。

2. DRYを意識し過ぎない

DRYとは、Don't Repeat Yourselfの頭文字をとったもので、「同じような記述はなるべくまとめられないか考える」というプログラミングの原則です。
しかし、テストコードを書く際はわかりやすさ優先です。DRYを意識し過ぎるとわかりづらくなることがあるので注意しましょう。

テストの種類

テストと偏に言っても様々な種類があります。

1. 単体テスト

ひとつのプログラムのまとまりに関して、それ単体が正常に動くか確かめるテストのことを単体テストと呼びます。例えばRailsであれば、モデルクラスひとつ、コントローラークラスひとつにつきそれぞれテストコードを書きます。

2. 統合テスト

複数のプログラムが連動して行われる処理が意図した通りに行われるかを確かめるテストのことを統合テストと呼びます。例えばRailsであれば、ユーザーの新規登録における一連の処理をテストすることが考えられます。ユーザーの新規登録用画面から値を入力、送信して、データベースにレコードが追加されるまでの一連の流れをシミュレートするテストコードを書きます。

劇的hamlアフター

今hamlでview画面を実装しているのだが、書き方がわからなくて手が止まってしまう場面があるので、
html.erbで書いたファイルをhamlに変換して書き方を調べてみる。
変換する方法は下記参考
qiita.com
確認していないので参考程度です。

Before

<article class="section">
  <div class="container">
    <header class="header header--section">
      <h2 class="text-middle">
        テストページ
      </h2>
    </header>
    <div>
      <ul class="listview js-lazy-load-images">
        <li style="margin-bottom: 15px">
            <a class="listview__element--right-icon" href="#">
              <div class="box">
                <div class="box__cell w80">
                   <div class="thumbnail__figure" style="background-image: url("#");"></div>
                </div>
                <div class="box__cell pl1em">
                  <h3 class="text-middle text-break color-sub">
                    <%= @product.title %>
                  </h3>
                  <p class="text-xsmall">
                    test
                  </p>
                </div>
              </div>
            </a>
          </li>
        </ul>
    </div>
  </div>
  <%= form_for [@product, @review] do |f| %>
    <div style="margin: 8px 0">
      <%= f.label :評価, style: { 'margin-right' => 8 } %>
      <%= f.number_field :rate, placeholder: '評価', value: 1, max: 10, min: 1, html: { class: "search__query", style: 'text-align: right;' } %>
    </div>
    <div style="margin: 8px 0">
      <%= f.text_area :review, placeholder: 'レビューを書いてね！', style: 'width: 100%;height: 300px;' %>
    </div>
    <div class="row">
      <div class="col10 push1">
        <%= button_tag type: "submit", class: "btn btn--block" do %>
              投稿する<i class="icon-arrow-right"></i>
        <% end %>
      </div>
    </div>
  <% end %>
</article>

After

%body
  %article.section
    .container
      %header.header.header--section
        %h2.text-middle
          テストページ
      %div
        %ul.listview.js-lazy-load-images
          %li{:style => "margin-bottom: 15px"}
            %a.listview__element--right-icon{:href => "#"}
              .box
                .box__cell.w80
                  .thumbnail__figure{:style => "background-image: url("}
                .box__cell.pl1em
                  %h3.text-middle.text-break.color-sub
                    = @product.title
                  %p.text-xsmall
                    test
    = form_for [@product, @review] do |f|
      %div{:style => "margin: 8px 0"}
        = f.label :評価, style: { 'margin-right' => 8 }
        = f.number_field :rate, placeholder: '評価', value: 1, max: 10, min: 1, html: { class: "search__query", style: 'text-align: right;' }
      %div{:style => "margin: 8px 0"}
        = f.text_area :review, placeholder: 'レビューを書いてね！', style: 'width: 100%;height: 300px;'
      .row
        .col10.push1
          = button_tag type: "submit", class: "btn btn--block" do
            投稿する
            %i.icon-arrow-right

Rubyのバージョンを変更する方法

Rubyのバージョンを変更する方法

前提

Homebrewが入っている前提です。
もしインストールしてなかったら下記のサイトを参照して下さい
qiita.com

またインストールしているかわからない場合は、下記コマンドで確認しましょう
インストールされていたらverが表示されます

brew --version

手順

1. Homebrewをアップデート

念のためHomebrewを下記コマンドでアップデートします

$ brew update
2. rbenvをインストール
$ brew install rbenv

インストールが完了したら、インストール出来ていることの確認する為、
バージョンを表示させてみましょう。
以下のコマンドで、バージョンが表示されていれば、インストールできています。

$ rbenv --version
rbenv 1.1.1
3. rbenvでインストール可能なrubyのバージョンを確認(もしインストールしたいverが決まっている場合は別に不要)
$ rbenv install --list
Available versions:
  1.8.5-p52
  1.8.5-p113
・
・
・
  ree-1.8.7-2012.02
  topaz-dev
4.希望のverのルビーをインストール

以下のコマンドは、ver"2.5.0”をインストールしています。
"2.5.0"部分を欲しいverに指定して下さい。

$ rbenv install 2.5.0

インストールされたら、以下のコマンドでインストールされているrubyのバージョンを確認してみましょう。
”2.5.0”が追加されているはずです。

$ rbenv versions
* system (set by /Users/owner/.rbenv/version)
  2.5.0

上記のコマンドで、米印がついているのが、現在の環境で動いているrubyとなります。

5. インストールしたverに切り替える

今回は、新しくインストールした”2.5.0”に切り替えます。
また全体で利用するverを変更するコマンドと特定のディレクトリのみverを変更するコマンドの二つがあるので、気を付けましょう。

全体で利用するバージョンを変更

rbenv global 2.5.0

特定のディレクトリのみで利用するバージョンを変更

rbenv local 2.5.0

rubyのverを変えるとbundleが動かなかったら以下のコマンドを実行

gem install bundler

Linux コマンド

よく忘れる。。

よく使うんだけど、毎回調べてるような気がするコマンドまとめ。。

ファイル・ディレクトリ操作
操作 概要 補足
cat ファイルの内容を表示したり、複数のファイルを連結する -n すべての行に行番号をつける
-s 連続した空行を圧縮する
-b 空行以外に行番号をつける
ls lsコマンドは現在いる場所にあるファイルやディレクトリを表示する -l 名前以外の詳しいデータも表示する
-a ファイル名の先頭が.のものも表示する(設定ファイルなど)
-t 最終更新が新しい順に表示します
-R サブディレクトリの下のすべてのファイルを表示する　
組み合わせ可能

cp -r ディレクトリA ディレクトリB ディレクトリAをディレクトリBの中にコピーする ディレクトリのコピーはrオプションが必要
rm -rf ディレクトリA ディレクトリAを確認なしに削除する fオプションを使うと確認なしで削除
chown 所有者 ファイルA ファイルAの所有者を変更する
chown -R 所有者 ディレクトリA ディレクトリAの所有者を中身のファイルもまとめて変更する
chmod アクセス権 ファイルA ファイルAのアクセス権を変更する r:4, w:2, x:1
find 検索場所 -name ファイル名 -type f 検索場所から指定したファイル名を探す typeをdにするとディレクトリが対象になる
grep 文字列 ファイル名 指定したファイル名から指定した文字列を探す findの結果はxargsで受け取れる
nkf -g ファイルA ファイルAの文字コードを推定する
scp ファイルA ユーザA@ホストA:ディレクトリ リモートのサーバにファイルをコピーする scp ~/hoge.txt user1@hoge.co.jp:~/work/
ln -nfs リンク先 リンク（名） シンボリックリンクを作成する 削除は「unlink リンク名」
シェル操作
操作 概要 補足
export 変数名 指定した変数を環境変数にする
printenv 環境変数の一覧を表示する
ファイルの圧縮、解凍
操作 概要 補足
gzip ファイルA ファイルを圧縮する .gzファイルが対象
gunzip 圧縮ファイルA ファイルAを解凍する
bzip2 ファイルA ファイルを圧縮する .bz2ファイルが対象
bunzip2 圧縮ファイルA ファイルAを解凍する
tar cvzf ファイルA ディレクトリA ディレクトリAのアーカイブをファイルAとして作成する zオプションをつけるとgzipとして圧縮も行う（.tar.gz）
tar xvzf ファイルA 圧縮アーカイブファイルAを展開する
ネットワーク操作
操作 概要 補足
ssh -i 秘密鍵のパス 接続先ホスト名 ssh接続する ssh公開鍵認証を実装する
ifconfig IPアドレスを確認する 一般ユーザの場合PATHが通ってなければ /sbin/ifconfig
netstat -at TCP接続の一覧を表示する
ユーザー管理
操作 概要 補足
su - ユーザー名 指定したユーザーになる -をつけると、変身するユーザーのホームディレクトリに移動する
プロセス操作とシステム監視
操作 概要 補足
ps aux すべてのプロセスを表示する
kill PID 指定したPIDのプロセスを終了する
kill -KILL PID 指定したPIDのプロセスを終了する
top システムとプロセスの状態をモニタする
free メモリとスワップの情報を表示する
df -H ディスクの使用情報を表示する Hオプションをつけると単位が分かりやすい
vmstat 秒数 回数 メモリーやCPUの情報を指定した秒間隔と回で表示する プロセスの内訳は見れないが、スナップショットが残るので時間の経過を追いやすい。
日付
操作 概要
date 日付を表示
date -d '1 days' 明日の日付を表示
date -d '1 days ago' 昨日の日付を表示
date "+%Y%m%d%H%M%S" 書式指定（20160407020312）
その他
操作 概要
curl リクエストURL パラメータは --data-urlencode　でURLエンコードできる。
pbcopy < コピーしたい内容 (Macのみ)クリップボードにコピーする。

Java コレクション　まとめ表

コレクション

クラス インターフェース 項目の重複 順序づけ/ソート 同期性
ArrayList List 可 インデックス順・ソートなし 無し
LinkedList List 可 インデックス順・ソートなし 無し
Vector List 可 インデックス順・ソートなし 無し
HashSet Set 不可 順序づけなし・ソートなし 無し
LinkedHashSet Set 不可 挿入順 無し
TreeSet Set 不可 自然順または比較ルールでのソート 無
HashMap Map 不可 順序づけなし・ソートなし 無し
LinkedHashMap Map 不可 挿入順 無し
Hashtable Map 不可 順序づけなし・ソートなし 有り
TreeMap Map 不可 自然順または比較ルールでのソート 無し