placeholderをjavascriptで書き換える

多言語サイトを作っていて、「検索」を「Search」に変えたかった。

const hoge = document.querySelectorAll('#search input')[0];
hoge.placeholder = "Search";

ほんとうに些細なことなんだけど、1行目末の[0]が必須だった。
これに気づかなくて、
なかなかplaceholderの値の取得ができず、苦戦したのだった…。

（ちなみに私はvarとconstとletの違いすら未だにマジでわかってない）

参考

mebee.info

getElementsByClassName

var obj = document.getElementsByClassName("abc")[0];

なんか動かないな〜と思ってた「getElementsByClassName」も、
[0]を付けたら動くようになった。（というか中身を操作できるようになった）
なるほどね…（ガバガバすぎる）

印刷用CSSを別ファイルで用意せずに済ませる

別ファイルで用意するの正直めんどくせ〜と思っていたが、
メディアクエリで書けば簡単

1. CSSファイルをmedia="all"で読み込む

<link rel="stylesheet" media="all" href="~~~~/style.css">

2. @media print{ で書いていく

/**********印刷用**********/
@media print{
    body{
    color: #000;
    background: transparent;
    }
    /*など、適宜書いていく*/
}

これだけ！

デバックはChromeのデベロッパーツールでできちゃう

参考

webtan.impress.co.jp

単語の途中で改行されなくてレイアウトが崩れる時

単語じゃなくても、クライアント様がブログ本文に入力した装飾
「●○●○●○●○●○●○●○●○●○●○●○●○●○●○」
みたいなやつで崩れたりする。
（そういう装飾を自分では使わないから、予測できなかった）

単語の途中でも改行されるようにCSSを書き加えるんだけど、
いつも混乱する

「white-space」と「word-break」と「overflow-wrap」と「word-wrap」

どれがなに？？？？？

white-space

ホワイトスペース＝連続する半角スペースやタブ

ソースの中のホワイトスペースや改行を、
無視するかそのまま表示するか、などを制御できる
white-space－スタイルシートリファレンス

word-break

禁則処理に基づいて「、」や「。」でしか改行しないようにしたりできるし、
逆におかまいなく単語の途中で改行するようにもできる

word-break－スタイルシートリファレンス

overflow-wrap

word-wrap = overflow-wrap に改名されたということので、両者は同じ。

「表示範囲内に収まりきらない単語がある場合に、単語の途中で改行するかどうか」
を制御したい場合、基本的にはこれを使えばいいっぽい。

（表示範囲内に収まっている分には、基本的に英単語の途中では改行したりしないので、そこまで読みづらくはならない。supercalifragilisticexpialidociousみたいな単語が出てきた場合のためのプロパティっぽい）

word-wrap－スタイルシートリファレンス

今回はoverflow-wrap:break-word; を採用

これ、基本的にはデフォルトで設定しておいた方が良い気がするな

参考

creive.me