TIL

Today I Learned. 知ったこと、学んだことを書いていく

１つだけ右寄せでそれ以外は左寄せ flex - CSS

CSS

flexでタイトルの通りのことをしたい

こんな感じ

f:id:tmg1998:20180423231503p:plain:w600


右寄せしたい要素にmargin-left; auto;とする！！！
左のmarginが自動になって、右寄せになる感じ！

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child f-right"></div>
</div>

.parent {
  display: flex;
  background-color: rgba(200, 200, 200, 0.8);
}

.child {
  background-color: rgba(255, 0, 0, 0.8);
  width: 150px;
  height: 50px;
  margin: 5px;
}

.f-right {
  margin-left: auto;    /* これ！！！ */
}

See the Pen 一つだけ右寄せ、それ以外は左寄せ by tamago (@tamago324) on CodePen.

参考文献

文字列の数字同士を比較する時は、数値に変換してから - JavaScript

JavaScript

テキストエディタ(っぽいもの)を作ってて、バグってたから調べてみた結果、

文字列の数字同士を比較と危ないということがわかった

なので、数値として扱いたいときには必ず数値に変換してから比較すること！！

github.com


文字列同士の場合、以下のように、数値同士であればtrueのものもfalseになってしまう

> "9" < "10"
< false

数値に変換すれば、思ったように動作する

> Number("9") < Number("10");
< true


失敗から学ぶことができてよかった！

参考文献

要素の削除 - JavaScript

JavaScript

要素を削除するには２通りあるらしい(今のところ知っている範囲だと)

  • removeChild()：親要素から子要素を削除する
  • remove()：自分自身を削除する


例）child1というidをもった要素を削除したいとき

removeChild()

親要素を取得し、子要素である自分を削除する感じ

const child = document.getElementById("child1");
child.parentNode.removeChild(child);

remove()

自分自身を削除することができる

document.getElementById("child1").remove();

使い分けは？

親から見て、削除したいときにはremoveChild()がいいのかな？ よくわかんない

参考文献

自動補完(Autocomplete)の追加

JavaScript CodeMirror

エディタのいろいろな設定 CodeMirror - JavaScript - TIL の続き

www.youtube.com

自動補完機能はaddonを使うことで実装できる。でも、CSSとJavaScriptとHTMLだけなのかな？

addonフォルダ内にアドオンは入っている。ダウンロードしたフォルダに入っているaddonをコピーしてくる

.
├── index.html
├── addon    // コピーしてくる
├── lib
├── mode
└── theme

自動保管を行うためには以下の手順で行う

  1. 必要なjsファイルとcssファイルを読み込む
  2. キーマップを設定する

まず、必要なファイルを読み込む

自動補完のためのファイルはaddon/hintに入っている。今回はCSSの自動補完をしたいため、以下の３つのファイルを読み込む

  • show-hint.js
  • show-hint.css
  • css-hint.js

※ show-hint.jsとshow-hint.cssはどの言語の自動補完をする時も必ず読み込むこと

<head>
  <script src="addon/hint/show-hint.js"></script>
  <script src="addon/hint/css-hint.js"></script>
  <link rel="stylesheet" href="addon/hint/show-hint.css">
</head>


次に、自動保管を行うためのキーマップを設定する。今回はCtrl + Spaceで自動補完をするようにする
extraKeysで指定する

const conf = {
  extraKeys: {"Ctrl-Space": "autocomplete"},
};

Ctrl+Spaceを押すと以下のように表示される！

f:id:tmg1998:20180416224558p:plain:w200

おぉ！！できてる！！！

こんな面白いこともできるっぽい！！

CodeMirrorでEmoji AutoCompleteをする

チュートリアルは一段落したから、色々いじってみて、テキストエディタを充実させるぞ！！！

参考文献

エディタのいろいろな設定 CodeMirror - JavaScript

テーマの設定 CodeMirror - JavaScript - TIL の続き

www.youtube.com

コンストラクタに渡すことで簡単にいろいろな設定ができる

タブのサイズの設定

tabSizeで指定できる。デフォルトは4

  • tabSize: integer

例）タブのサイズを8に設定

const conf = {
  tabSize: 8,
};

行数の表示

lineNumbersで指定する。trueで表示。デフォルトはfalse

  • lineNumbers: boolean
const conf = {
  lineNumbers: true,
};

f:id:tmg1998:20180416220931p:plain:w300

最初の行数の指定

firstLineNumberで指定する。初期値は1

  • firstLineNumber: integer

例）行数を20からにする

const conf = {
  firstLineNumber: 20,
};

f:id:tmg1998:20180416221001p:plain:w300

たくさん設定できるっぽいからいろいろいじってみよう！！

参考文献