chocotakaの日記

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

メタ theme-color

theme-color GoogleのiOS アプリやAndroidのChromeでWebサイトにtheme-colorを設定すると、アドレスバーの色を設定することができます。 実装方法 <meta name="theme-color" content="#ffffff"> head内にmetaタグを設定するだけです。contentに設定されたカラーコードの色に変化します。 実用性 これを設</meta>…

font-display

webフォントの読み込み ローカルフォントがあれば読み込みに時間はあまりかかりませんが、webフォントの場合はローカルフォントと比べると読み込みに時間がかかってしまいます。 この影響でページのロードをしてからテキストが表示されるまでの間にユーザを…

chrome ディベロッパーツール 「Coverage」

chromeのディベロッパーツールでCoverage機能を知っているでしょうか?? chrome 59 から使えるようになった機能ですので、使いたい場合はバージョンUPをしましょう。 js and css coverage どのような機能かというと、使用・不使用のcssとjsのコードを表示し…

お勉強

お勉強させていただきやす

picture要素

picture要素とは HTML5.1で新しく加わった要素の一つで、モバイル/タブレット/パソコンと画面解像度に最適化された画像を設定するのに javascriptやcssでごにょごにょする必要があったのを解決する、とても便利な要素です。 使ってみよう <picture> <source media="(min-width: 700px)" srcset="sample1.jpg"> <source media="(min-width: 300px)" srcset="sample2.jpg"> <img src="default.jpg"> </picture> このように、p…

circleci build skip

circleciでgithubと連携させてビルドを走らせる事ができます。 自サービスではあるブランチ名でpushすると、ciが走りビルドが完了すると開発環境を更新されるような設定になっています。 ただciを走らせたくないタイミングが一時的にありました。 ci上からru…

AMPに挑戦してみる

はじめに 自サービスがのちにAMP対応しようとしていたのと、AMPに合っているサービスということもあり AMPとはどうゆうものなのかという所から、AMPを実際に実装していく所までやっていきました。 AMPの目的がモバイルでの高速表示なので、様々な制限の中ペ…

AMPの基本的な書き方

html宣言 <html ⚡ lang="ja"> のように記述する。 style指定 <style amp-custom> body { width: auto; margin: 0; padding: 0; } </style> cssは極力処理を早くするために外部ファイルを読み込むではなくstyle amp-customで囲う。 img指定 <amp-img src="sample.jpg" layout="responsive" width="266" height="150"></amp-img> width/heightはレンダリングを少しでもスムーズにするために指定</html>…

<br>?<br />?

htmlを書くときに改行タグを、<br>または<br />と書かれてあったりします。 なぜ2種類の書き方があるのか気になったので調べて見ました。 XHTMLの文法 <br />はXHTMLの文法のようで<br>や<img>タグなど、1対で囲まないタイプのタグについては、<br / >や<img />と書くようにと決められました。 XHTM…

あったかい

??????? あったかい

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設定する場合があるとします。 このよう…