lang属性
HTMLのlang属性は、要素内で使用されている言語を表記するためにあります。
<html lang="ja">
これはhtml要素内で使われている言語はjapaneseという意味になります。
この設定をする事で、ブラウザに対して使用している言語を認識させる事ができます。
<p lang="en">hello chocotaka!</p>
のように、一部英語で表記される箇所にはlang="en"と設定すると良いでしょう。
適切に指定することで、プログラムによる自動翻訳などが容易になる効果があるようです。
seo最適化 robots.txt
robots.txtとは
robots.txtはクロール最適化の手段の一つで、検索結果に必要のないページへのクロールを制御し、重要なページのみを認識してもらうようにしてSEOを改善するものであります。
不要なページに対するクローラーのアクセスをブロックすることができる。 クローラーを回す必要のあるページに多くのクローラーが回るようになるためサイト全体のSEOが改善されます。
robots.txtの書き方
User-Agent:* Disallow:
User-Agent
どのクローラーの動きを制御するかの指定で、*は全てのクローラーに指示します。
例えば、User-Agent:Googlebot-imageだと画像用クローラーのみに指示することができる。
Dissallow
クローラーのアクセスを制御するファイルを指定します。
全サイトをブロックするなら/。特定のページをブロックするなら/hogehoge.htmlのようにページを指定します。
最後に
robots.txtが必ず必要かどうかというと、これを設定したからといってすごい効果があるというわけではないですが、少なからず設定していないよりは良いので、seo更に向上したいと考えているならやってみる価値はあると思います。
css initial inherit の違い
cssの設定で何かを初期化したい時にinitialプロパティがありますが、似たような名前のプロパティでinheritがあります。
このinheritってそういえばなんぞやと思ったので調べました。
inheritは訳すと「受け継ぐ」という意味で、調べてみてやっと納得した次第でこざいます。
<div> <p>テスト</p> </div>
というDOMがあった場合
div {
color: red;
}
とするとpタグで囲まれてるテストという文字は赤色になります。
これはdivに設定されたcolorがpタグに継承されて色が変わっています。
テストという文字を赤色にしたくない場合は
p {
color: initial;
}
にすれば継承がなくなり、赤色ではなくなります。
もともと継承がされないプロパティもあるので、逆に継承をさせたい場合はinheritを指定してあげると、親に設定されたスタイルを継承する事ができます。
Reactバージョン16から文字列をそのままrenderできる
Reactはrender時に文字列だけだったりをそのままrenderする事ができませんでした。
そのため必ず<p>テストテスト</p>のようにタグを挿入する必要があったため
Reactの１つの悩みであった階層が深くなりがちだったりするのを回避する事ができそうです。
render() {
return <p>テストテスト</p>';
}
のように記述する必要があったのが
render() {
return 'テストテスト';
}
と余計なpタグを減らす事ができます。
react-routerのパスを正規表現でバリデーションする
react-routerの4系以上からで
/hogehoge/:id
のように:id部分の入ってくる値を整数値だけにしたい場合
/hogehoge/:id(\d+)
のように正規表現を指定する事ができます。
<Route path="/hogehoge/:id(\d+)" component={Hoge} />
これでルーティングを細かく制御したり、リダイレクト処理をしたりと自由に処理を扱う事ができそうです。
文字詰めCSS font-feature-settings
テキストの文字詰めをしたい時に役立つのがfont-feature-settingsプロパティ。
font-feature-settings: "palt" 約物を含む和文の字間を詰める font-feature-settings: "pkna" 仮名系のみ字間を詰める
この２種の設定方法があります。
文字詰した方が見やすい場合もありますが、そうでない場合もあるのでその場合はletter-spacingで調節するのが良さそうです。
ほとんどのブラウザで対応されていますが、webフォント等の影響で文字が崩れたりする場合があるので注意しましょう。
文字詰時の参考になるサンプルページがあったので載せておきます。
折り返し制御するcss
長いテキストや長いURLを途中で折り返す時にcssで設定する主なプロパティが
word-break: break-all
または
word-wrap: word-break; overflow-wrap: word-break;
word-wrapとoverflow-wrapを併記していますが、word-wrapからoverflow-wrapへと改称されたためです。ブラウザによってoverflow-wrapがサポートされていなかったりするので、word-wrapも一緒に記載すると良いです。
それぞれ名前が似ていますが、挙動が違います。
word-break: break-all
好ましくない位置でテキストを折り返してしまうことがあります。
例えばorのような単語でも、orが行ボックスの幅からあふれそうな位置にあれば、あふれる直前で折り返すためoとrの途中で折り返してしまいます。
word-wrap: break-word
単語の途中で折り返さないと行ボックスの幅からあふれてしまうときのみ、その単語の途中で折り返します。 可能な限り折り返しを避けることができます。
