HTML

Google Analyticsを導入してみる。【ver.4.5】

ポートフォリオにアクセス解析なんて必要ないんだけど、Google PartnersのAnalytics認定が欲しいので勉強がてら導入する。 www.google.com support.google.com analytics.google.com 追跡用のタグを追加する Google Analyticsに登録すると、追跡用の<script>タグを取…

style.cssをindex.htmlの中に書き込んでみる。【ver.4.3】

html内にstyleを書き込む index.html diff <html lang="ja" prefix="og: http://ogp.me/ns#"> <head itemscope itemtype="http://schema.org/Article"> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> </meta></meta></meta></head></html>

index.htmlをminifyしてみる。【ver.4.2】

index.htmlはそんなに容量が大きいわけではないので効果は薄いと思われるが、bundle.jsをminifyしたついでなのでこちらもminifyしてみる。 gulp-htmlminのインストール diff > npm install gulp-htmlmin --save-dev gulpfileにminifyの処理を追加する minify…

robots.txtは追加しない。humans.txtを追加してみる。【ver.3.4】

ポートフォリオではクロールもインデックス登録も別に制御する必要は無いので、robots.txtは置かないことにした。 注: サイトがクロールされる方法を制御する必要がある場合にのみ、robots.txt が必要です。 https://developers.google.com/web/fundamentals…

ベスト プラクティスを参考にheadの記述を追加する。【ver.3.3】

Google Partnersの認定を取ろうとして参考ページを見ていたら、メタタグのベストプラクティスというのを見つけたのでポートフォリオのメタタグを書き直してみた。 Social Discovery | Web | Google Developers ベストプラクティス抜粋 <html prefix="og: http://ogp.me/ns#"> </html>

各パーツのコンポーネント化をしてみる。【ver.1.3】

Reactでのビルドと描画が無事成功したので、次はコンポーネントを作ってみたい。 Header, Main, Footerの3つのコンポーネントに分けようと思う。 エラー出て修正したところは赤太字。 コンポーネントを意識したディレクトリ構成へ React関連はsource/rendere…

WebpackでReactを試してみる。【ver.1.2】

Webpackの雰囲気がふわっとつかめてきたので早速ポートフォリオをReact化してみる。 エラー出て修正したところは赤太字(太字とh3タグの見分けがつかない)。 Webpackのインストール > npm install webpack --save-dev jsxのトランスパイルのためにloaderが…

メタタグを充実させる。【ver.0.7】

<head>内の情報を充実させたいと思っていろいろ探していたら便利なページを見つけた。 github.com これを参考に<head>内を充実させてみる。 BEFORE <head> <title>My Portfolio</title> <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> <link rel="stylesheet" href="./style.css"> </head> AFTER <head> <meta charset="utf-8"> </meta></head></head></head>

著作権表示をクリエイティブコモンズにしてみる。【ver.0.5】

「なんで?」って聞かれたら「なんかかっこいいから」以上の理由はないだけど。。。 CCライセンスとはインターネット時代のための新しい著作権ルールで、作品を公開する作者が「この条件を守れば私の作品を自由に使って構いません。」という意思表示をするた…

Google Fontsを使ってフォントを変えてみる。【ver.0.4】

Google Fontsというすばらしいサービスがあって、およそ全て把握できないような種類のフォントを無料で使えるので使うことにした。 fonts.google.com およそ全て把握できないので、"google fonts best 2017"とか"awesome google fonts"とかでググって探す。 …

マークアップをアクセシビリティの観点から見直してみる。【ver.0.3】

medium.com internationalization → i18n localization → l10n accessibility → a11y [new!] なんでもありだな、とは思った。 記事の中で便利なツールが紹介されていたので、それについて先に書いておく。 下のtota11yはブックマークレットになっているので…

ポートフォリオのスタイリング。【ver.0.2】

やっぱCSSって偉大。既存のHTMLでも好きなようにスタイリングできる。 CSSはCascading Style Sheetの略で、どうでもいいんですけど、イメージ的には黒い馬なんですよ。 マキバオーのせいですね。 学校の階段のEDの人イメージも黒い馬。 CASCADE - sexy sexy …

ポートフォリオのマークアップ。【ver.0.1】

手始めにマークアップしてみる事にした。手を動かすとやりたいことがたくさん出てくる。 後で見返せるように小さいステップで記録していきたい。 前回決めた下の内容をマークアップしていく。 Introduction Profile Contact 今回の製作物。 https://cosmolog…

ポートフォリオ作る。

ということで作る。頑張る。 kazmaarakaki.hatenablog.com 環境作りから!!!(要るかな。。。?) プロジェクトに新しいディレクトリ作って。 > npm init > npm install gulp --save-dev > npm install gulp-webserver --save-dev index.html と gulpfile.…