chocotakaの日記

日々技術的な事で学んだ小さな事をを自分なりに書いていきます

AMP

AMPとはなんぞや Accelerated Mobile Pagesの略です。 読み込みに「3 秒以上かかると 40% の人がサイトの閲覧を諦める」という調査結果が出たりしています。 このような事を改善するために、モバイル端末でウェブページを高速表示する事が目的です。 AMPの作…

aria-live

aria-liveは、要素に変更があったときに変更内容をスクリーンリーダーで読み上げてくれたりするのでアクセシビリティに貢献する事ができます。 ライブリージョン JavaScriptで動的に更新されたりする要素に対して、スクリーンリーダーなどの支援技術を使って…

HTML5 コンテンツ・モデル

HTML5以前の要素は大きくブロックレベル要素とインライン要素に分類されていましたが、 HTML5からブロックレベル要素とインライン要素の分類は無くなっているとのことです。 そのような概念に変わっていた事が知らなかったので書き留めておきます。 ブロック…

lang属性

HTMLのlang属性は、要素内で使用されている言語を表記するためにあります。 <html lang="ja"> これはhtml要素内で使われている言語はjapaneseという意味になります。 この設定をする事で、ブラウザに対して使用している言語を認識させる事ができます。 <p lang="en">hello chocotaka!</p> のよ</html>…

seo最適化 robots.txt

robots.txtとは robots.txtはクロール最適化の手段の一つで、検索結果に必要のないページへのクロールを制御し、重要なページのみを認識してもらうようにしてSEOを改善するものであります。 不要なページに対するクローラーのアクセスをブロックすることがで…

css initial inherit の違い

cssの設定で何かを初期化したい時にinitialプロパティがありますが、似たような名前のプロパティでinheritがあります。 このinheritってそういえばなんぞやと思ったので調べました。 inheritは訳すと「受け継ぐ」という意味で、調べてみてやっと納得した次第…

Reactバージョン16から文字列をそのままrenderできる

Reactはrender時に文字列だけだったりをそのままrenderする事ができませんでした。 そのため必ず<p>テストテスト</p>のようにタグを挿入する必要があったため Reactの1つの悩みであった階層が深くなりがちだったりするのを回避する事ができそうです。 render() { r…

react-routerのパスを正規表現でバリデーションする

react-routerの4系以上からで /hogehoge/:id のように:id部分の入ってくる値を整数値だけにしたい場合 /hogehoge/:id(\d+) のように正規表現を指定する事ができます。 <Route path="/hogehoge/:id(\d+)" component={Hoge} /> これでルーティングを細かく制御したり、リダイレクト処理をしたりと自由に処理を扱う事</route>…

文字詰めCSS font-feature-settings

テキストの文字詰めをしたい時に役立つのがfont-feature-settingsプロパティ。 font-feature-settings: "palt" 約物を含む和文の字間を詰める font-feature-settings: "pkna" 仮名系のみ字間を詰める この2種の設定方法があります。 文字詰した方が見やすい…

折り返し制御するcss

長いテキストや長いURLを途中で折り返す時にcssで設定する主なプロパティが word-break: break-all または word-wrap: word-break; overflow-wrap: word-break; word-wrapとoverflow-wrapを併記していますが、word-wrapからoverflow-wrapへと改称されたため…

Cache-Control max-age=0 no-cache

ブラウザのキャッシュを制御するのに設定するのが、Cache-Control。 Cache-Control: max-age=N のようにしてレスポンスヘッダに設定して使います。 設定方法に、Cache-Control: max-age=0とCache-Contro: no-cacheがあるのですが、二つともキャッシュ制限し…

apple-touch-iconとapple-touch-icon-precomposed

スマートフォンであるwebページをホーム画面に設定するときに表示されるアイコンがapple-touch-iconです。 <link rel="apple-touch-icon" href="hogehoge.png"> のようにhead内に設定する事ができます。 この設定でも問題ないのですが、iOSの古いバージョンの場合に勝手に光沢加工を付けたアイコンにしてしまう</link>…

rel="noreferrer"

先日の記事でrel="noopenerについて記述しました。 今回は補足として、rel="noopener noreferrer"と設定する事がより良い事がわかりました。 noopnenerはIE/Edgeやある端末ブラウザで対応していません。 Can I use... Support tables for HTML5, CSS3, etc …

rel="noopener"

aタグにtarget="_blank"を設定している場合は、rel="noopener"をつけておくのがよさそうです。 というのも、遷移先のページのjavascriptで元のページを操作することができてしまうそうです。 遷移先でwindow.opener.location=hogehogeとしてあると元タブのペ…

Cache-Control immutable max-age

Cache-Controlにmax-ageを指定することで、ブラウザにリソースをキャッシュさせることができます。 ブラウザはmax-ageに満たないキャッシュを持っていてもConditional GETによってキャッシュの有効性の問い合わせを行います。 Immutableは、キャッシュがmax-…

nofollow

nofollowについて クローラーにページ内のリンクを辿らせず、リンク先にページの評価を渡さないために指定する値です。 aタグのrel属性でも指定できる値です。 nofollowの使い方 <meta name="robots" content="nofollow"> <a href="http://sample.jp/" rel="nofollow">サンプル</a> 信頼できないリンク先のページが保証できない、あるいは保証したく</meta>…

noindexタグ

noindexとは noindexとは、検索エンジンにページを認識(インデックス)させないために指定するmeta要素のcontent属性に指定できる値です。 noindex属性の使い方 <meta name="robots" content="noindex"> のように設定します。 - 検索結果に出したくないページがあるとき - 複製のコンテンツを扱う</meta>…

history.replaceState

history.replaceStateメソッドは現在の履歴エントリを修正します。 history.replaceState(state, title, url) 第一引数にはstate。 第二引数にはtitle。 第三引数にはurl。 これらを引数に渡して実行することにより、現在の履歴を変更します。 SPAを実装した…

safariでbuttonタグにdisplay:flexが効かない問題

buttonタグを使って表現する時に困った事です。 このようなボタンを表現する時に <button>さらに記事を見る</button> のように作るとしてcssで button { width: 100%; height: 50px; display: flex; align-items: center; justify-contente: center; } のようにテキストを上下…

ページネーションによるcanonicalタグの対応

ページネーションは一連の長い記事を複数のページに分けたり、いくつかのまとまりに分けたりするときによく使われます。 例えば 1ページ目はhttps://hogehoge?page=1 2ページ目はhttps://hogehoge?page=2 のようなURL設定する場合があるとします。 このよう…

運動しましょう!

今日はケータイからの投稿です。 中学高校でやってたバスケしてきました!定期的にやってます! 社会人になってから風邪で本格的に休んだのは2日ぐらしかないのでいたって健康です。 適度に運動して健康を維持する事はとても大事ですね!仕事のパフォーマン…

cpコマンドでハマった事

cpコマンドを使ってファイルやフォルダをコピーしようとした時にハマった事です。 cp hoge/assets build のようにやると、もともとbuildフォルダが存在しないのでエラーになってしまいます。 buildフォルダが作成されbuildフォルダの中にhogeの中のassetsフ…

ステータスコード1xx系3xx系

Webを支える技術 ── HTTP,URI,HTML,そしてREST(WEB+DB PRESS plusシリーズ)|gihyo.jp … 技術評論社 先日購入した本から1つ。 よく見るステータスコードは 2xx系のリクエストの成功 4xx系のクライアントエラー 5xx系のサーバエラー 他に1xx系の処理中…

sketchで透明度を簡単に変更する

あるレイヤーのopacityを調節する時にinspector内にあるopacityを設定する箇所でいじれます。 ここで設定することもできますが、やっぱりショートカットキーを使ってさくさく操作したいところ。 そこで1~9のキーを押すことで簡単にopacityを変更することが出…

sublimeText 戻るショートカットキー

こんばんは。chocotakaです。 コーディング中に入力した内容を無かったことにしたかったり、入力前に戻りたいに使うショートカットキーは cmd + Z このキーはとてもよく使います。 しかし過去に戻りたい時にたまにあるのが、cmd + zで戻りすぎてしまう時。 …

cssでカスタムイージング

cssでアニメーションをしたい時にはtransitionを設定したりanimationを設定したりします。 さらにアニメーションにイージングを細かく指定したい時にcubic-bezierを使うととても便利でした。 トランジションの変化が進行する時間をX軸、変化の度合いをY軸と…

sketchで要素間の幅を測る

sketchである要素間のマージンが何ピクセルあるか調べる時にとっても便利なショートカットキーがあります。 それは調べたい要素にフォーカスをあてた状態でaltを押し続けるだけです。 あとはカーソルを動かしてみると、数値が表示されます。 とても便利でデ…

URIとURLとURN

Webを支える技術 ── HTTP,URI,HTML,そしてREST(WEB+DB PRESS plusシリーズ)|gihyo.jp … 技術評論社 先日購入した本から1つ。 世間一般的に使われている言葉でURLがあります。 URLはサイトのアドレスを指す時に使ったりしますが、正しい名称はURIです…

【css】 クラスの付け替えで擬似要素は上書きできない?(解答編)

先日書いたこちらの記事 【css】 クラスの付け替えで擬似要素は上書きできない? - chocotakaの日記 こちらchromeの仕様のようで、safariやfirefoxで検証した結果上書きする事が出来ていました。 もしこのような実装にぶつかることがありましたら、気をつけ…

【css】 クラスの付け替えで擬似要素は上書きできない?

cssの擬似要素でよく使う:beforeと:afterがあります。 クラスを付け替えてスタイルを指定しようとしていたのですが、擬似要素のcssは上書きできませんでした。 最強の!important攻撃ですら効きませんでした。cssは奥が深い。