20190711のCSSに関する記事は15件です。

JavaScriptを使い、CSS3を使ったanimationの内容を変える方法

はじめに

CSSでは、 ainmation プロパティと keyframes を使ってアニメーションができます。

1つのオブジェクトに対して1つのアニメーション設定をするだけなら、それほど難しいことはありません。
しかし、ボタンの入力内容などに応じてアニメーション内容を切り替えたいという事もあります。

このページでは JavaScriptを使い、CSSのアニメーションを切り替える方法を書いてみました。

まずは1回だけのCSSアニメーション

まずは、ボタンが押されたらアニメーションを1回だけおこなうサンプルを作ってみます。
ここでは、div要素の中にあるspanで作った赤色の箱(id="box")を、transform:translateX で横移動をさせてみます。

<div class="parent">
 <span class="child" id="box"></span>
</div>

<p>
<input type="button" onclick="move();" value=" move! " />
</p>
div.parent {
    position: relative;
    border: 1px solid black;
    width : 400px;
    height: 100px;
}
span.child {
    position: absolute;
    left: 100px;
    top: 25px;
    width : 50px;
    height: 50px;
    background-color: red;
}
@keyframes move {
    to {
        transform:translateX(200px);
    }
}
.moveToRight {
    animation-name: move;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
function move() {
    const objBox = document.getElementById("box");
    objBox.classList.add('moveToRight');
}

keyframes として 200px 右に動く動きを move という名前で定義しておき、この move を1秒間で1回だけアニメーションさせる定義が .moveToRight です。ボタンが押されたら JavaScript で moveToRight を box の classList に追加してやることでアニメーションが動き出します。

CSSで「animation-fill-mode: forwards」としているので、box は移動終了した場所で止まっています。

アニメーション内容を変更する方法

上のサンプルでは、アニメーションは1回だけしか動作しません(ボタンは何回でも押せますが、押しても何も変化しません)。
もし何回も同じアニメーションをおこなわせたければ、アニメーション終了時に classList から前回のアニメーションを取り除いてやる必要があります。

では、ボタンが押されたら、今度は元の位置までアニメーションで戻るようにしたい場合はどうすれば良いでしょうか?
この場合もアニメーション終了時に classList から前回のアニメーションを取り除いた上で、今度は逆向きに移動する transform の keyframes を使ったアニメーションを定義し、それを classList に追加してやれば良さそうですね。
しかし、それだけでは上手くいきません。classList から取り除いた時点で transform の影響が消えるので、box は瞬間的に元の位置に戻ってしまいます。このため、left 位置に transform 後の値を加味した値を書いておく必要があります。left や transform の値は JavaScript からは読めないので、自分で計算して値を書かなければいけません(レンダリングエンジンが知っているはずの値を自分でも別途管理しなければいけないというのはイマイチな感じがしますね。何か良い方法はありますか? window.getComputedStyle()を使えば transform の値を読めます。コメント参照)。

あと、classList にアニメーションを追加したり削除したりするっていうのは意外に面倒くさいですね。動かしたいオブジェクトが沢山あると、だんだんと管理できなくなってきます。
この問題は、実は簡単に解決できます。classListは使わず、単にオブジェクトの style.animationName を書けば良いだけなのです。

ボタンを押す度に、box (span.child) が右に行ったり左に戻ったりするサンプルを以下に示します。(html は最初のサンプルと一緒です)

div.parent {
    position: relative;
    border: 1px solid black;
    width : 400px;
    height: 100px;
}
span.child {
    position: absolute;
    left: 100px;
    top: 25px;
    width : 50px;
    height: 50px;
    background-color: red;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes moveRight {
    to {
        transform:translateX(200px);
    }
}
@keyframes moveLeft {
    to {
        transform:translateX(-200px);
    }
}
let direct = 0; // 移動方向。0以外なら右へ、0なら左へ

function move() {
    const objBox = document.getElementById("box");
    objBox.style.transform = '';    // 前回移動アニメのtransform を消す

    direct ^= 1;
    if (direct !== 0) {
        objBox.style.left = '100px';    // 移動開始位置を設定する必要がある
        objBox.style.animationName = 'moveRight';
    } else {
        objBox.style.left = '300px';
        objBox.style.animationName = 'moveLeft';
    }
}

最初のサンプルと違い、アニメーション設定は予め span の中に書いてしまっています(アニメーション設定だけの CSS 記述 .moveToRight が無くなりました)。
こうすることで、classList を使う事無く、ボタンが押されたら style.animationName を書くだけでアニメーションの切り替えが出来ます(もちろん、duration とかを変化させても良いです)。
また、classList の削除に相当する transform の初期化は、ボタンが押されてからおこなえばOKです。これは空文字をセットするだけで実現できます。

今回の例では横移動だけのアニメーションですが、色や透明度を変化させる場合も考え方は一緒です。

応用例

応用例として、上下左右のボタンに対して、押された方向へアニメーションするサンプルを作ってみました。
このページのサンプルとちょっと違うのは、同じ方向に何回も移動できるようになっている事です。これを実現するために、アニメーション終了時に style.animationName をクリアしています。style.animationName は、値の変化があった時だけアニメーションが開始します。同じ方向へのアニメでは同じ名前をセットしてしまうので、一度クリアしないとアニメが動かないのです。

このことから、style.animationName への代入は、代入に見せかけた演算子のオーバーロードでは無いことが分かります。style.animationName に限らず、left とか transform の値は、JavaScript でセットしてもすぐに状態が反映される訳では無く、描画直前に前回との差分を見て一気に反映しているらしい事が想像できます。

あと余談ぽくなりますが、moveRight と moveLeft の keyframes を作らずに、1つの keyframes でanimationDirection を normal と reverse を JavaScriptで切り替える方法も可能です。ただし reverse では加速の仕方も逆になってしまうので、animationTimingFunction が linear の時以外は使いにくいです。

最後に

ここまでやるんなら、CSS を使ったアニメーションではなくて、全て JavaScript でやった方が制御しやすいのでは? とも思いますね。
しかし、JavaScript ではインターバル割り込みによって処理する関係上、描画フレーム毎に処理してくれる CSS に比べると、どうしても動きがカクカク見えてしまいます。
当たり判定が不要な演出とかは、このページの内容を参考にして動かしてみるのも良いかもしれません。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

HTML で 文字 を 入力する 欄 を表示する

目的

  • HTMLの画面に文字を入力する欄の表示を行う方法をまとめる

押さえるポイント

  • 一行の入力欄を表示させる時はinputタグ使用する
  • 複数行の入力欄を表示させる時はtext-areaタグを使用する
  • お問い合わせフォームの作成などで送信ボタンを設置するときはinputタグでtype属性にてsubmitを指定する。 送信ボタンは何も設定しないとボタン部分に「送信」と表示される。任意の文字を表示させたい時はvalue属性にて表示させたい文言を与える

書き方の例

  • 下記にHTMLファイルの内容を記載する。
<!-- 一行の入力欄を表示する -->
<input>

<!-- 複数行の入力欄を表示する -->
<text-area></text-area>

<!-- 送信ボタンを表示する -->
<input type="submit">

より具体的な例

  • 企業webサイトによくある問い合わせ用フォームを作成する。
  • 返信用メールアドレスを記入する欄を作成する。
  • 問い合わせ主の名前を入力する欄を作成する。
  • 問い合わせ内容を入力する欄を作成する。
  • 送信ボタンを作成する。
    ※返信用メールアドレスと問い合わせ主の名前の入力欄は一行の入力欄とする。
    ※問い合わせ内容の入力欄は複数行の入力が可能な入力欄とする。
    ※各入力欄の上に入力欄の概要を記載する

  • 下記にHTMLファイルの内容を記載する。

<p>返信用メールアドレス(必須)</p>
<input class="mail">

<p>お名前(必須)</p>
<input class="name">

<p>お問い合わせ内容</P>
<text-area></text-area>

<input type="submit">
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

HTML の 要素 に 下線 や 枠線 を つける

目的

  • HTMLファイルの要素に下線や枠線をつける方法をまとめる。

押さえるポイント

  • 下線や枠線をつけたい要素をCSSで指定してborderプロパティを用いて設定する。
  • 線の太さ、種類、色をそれぞれ指定可能。
  • 太さはピクセル数で設定する。
  • 種類は線の名前で設定する。
  • 色はカラーコードで設定する。

枠線をつけたい時の書き方の例

  • 下記にCSSファイルの内容を記載する
要素の名前かクラス名 {
    border: 太さ 種類 カラーコード;
}

下線をつけたい時の書き方の例

  • 下記にCSSファイルの内容を記載する
要素の名前かクラス名 {
    border-bottom: 太さ 種類 ;
}

より具体的な例

h1要素に太さ5px、種類solid、色が赤の枠線をつける
p要素に太さ10px、種類solid、色が黒の下線をつける

〜サンプルコード〜
- 下記にHTMLファイルの内容を記載する。

<h1>おはようございます</h1>
<p>これは日本の挨拶です。</p>
  • CSSで上記のHTMLファイルのh1タグとpタグに対して枠線と下線の設定をする。
  • 下記にCSSファイルの内容を記載する。
h1 {
  border: 5px solid red;
}

p {
  border-bottom: 10px solid black;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

HTML の 文章 の 一部だけ 文字の色を 変更する

目的

  • HTMLファイルの文章の1部のみ文字の色を変更する方法をまとめる

押さえるポイント

  • 変更したい文字をspanタグで囲みCSSで文字の色を設定する

書き方の例

  • 下記にHTMLファイルの内容を記載する
<h1>おはよう<span>ございます</span></h1>
  • CSSにて色を設定する
  • 下記にCSSファイルの内容を記載する
span {
    color: カラーコード;
}

より具体的な例

h1要素の「おはようございます。」の「。」を赤色に設定する。

〜サンプルコード〜
- 下記にHTMLファイルの内容を記載する。

<h1>おはようございます<span></span></h1>
  • CSSで上記のHTMLファイルのspanタグに対して文字を赤色に設定する。
  • 下記にCSSファイルの内容を記載する。
span {
  color: red;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

すべての新米フロントエンドエンジニアに読んでほしい50の資料

はじめに

さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね?

従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。
そこで、フロントエンドの経験が浅い方や初学者向けに、おすすめのドキュメントや勉強すべき領域をまとめました。

とりあえず動けば良い段階から一歩進んで、フロントエンドエンジニアとして、良いアプリケーションを作るために必要な知識を浅く広く紹介します。

※補足
新米と表記しましたが、実際には新卒や未経験でなく、新卒2~3年目の若手フロントエンドエンジニアやフロント分野に苦手意識のあるバックエンドエンジニアの方を対象としています。
数日で目を通せるような内容ではないため、マイルストーンやスキルセットの一つの参考にして頂けると幸いです。

フロントエンド入門

公式ドキュメントを知る

[1] https://jp.vuejs.org/v2/guide/
一例としてVueを貼りましたが、Vueに限らず信頼出来る情報に当たる癖付けがとても大切です。
特にVue.jsは一昔前のjQueryやRailsやPHPのように、技術に明るくない方が書いたページが多いと感じていて、ちゃんとVueを学ぶならまずは公式を見ましょう。

言語を知る

JSを知る

[2] https://jsprimer.net/basic/introduction/
今からJSを学ぶなら特別な事情がない限り、ES2015以降の文法で良いと思います。
js-primerはES2015以降のJSを知る上で素晴らしいドキュメントです。

昔のJSもちょっと知る

[3] https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures
データの隠蔽やカプセル化を実現するために使われたテクニックです。
今のJSを書く場合に意識する機会は少ないと思いますが、知っておいて損ないです。

[4] https://www.yunabe.jp/docs/javascript_class_in_google.html
ES5以前の古いJSで記述しなきゃいけない仕事に遭遇した際、あらためて読み返したい素晴らしいドキュメントです。ベストプラクティスのひとつだと思います。

昔のJSもしっかり学びたい方は、「JavaScript: The Good Parts」や「開眼!JavaScript」といった書籍の購入も検討してください。
上記の書籍を読んで、DouglasやJohnResigやSubstackを知っていると、先輩のフロントエンドエンジニアから気に入られる確率が向上します(当社比)

非同期処理を知る

[5] http://azu.github.io/promises-book/
非同期処理は初学者にとって大きな壁の一つだと思いますが、しっかりとPromiseオブジェクトを理解することがJSでは必須です。
ES2017で追加されたAsync Functionは、Promiseを返す関数なのでPromiseが分かればすぐ理解できます。

Promiseを理解したら、Asyncjsのようなライブラリで複雑な非同期処理を実装したり、
RxJSのようなライブラリを用いてPromise以外の非同期を扱う方法を学んでみると良きです。

HTMLLivingStandard & ECMAScript を知る

[6] https://html.spec.whatwg.org/multipage/
[7] https://www.ecma-international.org/publications/standards/Ecma-262.htm
聖書。HTMLやJSといった言語の仕様が記載してあります。

ちなみに私のチームでは、実装周りの裁判が発生した際に、六法全書代わりとして活用しています。
※私はおそらく全体の3%ほどしか読んでませんが、ちゃんと読んだぞという空気を出して会話します?

コーディング規約を知る

[8] https://qiita.com/mysticatea/items/f523dab04a25f617c87d
[9] https://qiita.com/soarflat/items/06377f3b96964964a65d
これからフロントエンドを学ぶ方すべてに、まずはLintとコードフォーマッターの導入をお勧めします。
Lintではeslintやstylelint、コードフォーマッターではprettierがデファクトです。
利用するルールは何でも良いと思いますが、とにかくルールを用意することが大切です。

UIを知る

モーショングラフィックやインタラクションを知る

[10] https://goodpatch.com/blog/ui-micro-interaction/
マイクロインタラクションはデザイナーの仕事という認識の方も多いと思いますが、
特殊な例外発生時にユーザーへ適切なフィードバックを返すべきといった気付きはエンジニアの方が強いと思うので、常にプログラム的な例外とUI的な例外(フィードバック)の両方を考える姿勢が大切だと感じます。

マテリアルデザインを知る

[11] https://material.io/design/
Google公式のデザインガイドです。英語のドキュメントですが、グラフィック中心なので分かりやすいです。

アトミックデザインを知る

[12] https://ygoto3.com/posts/atomic-design-on-actual-project/
ReactやVueを用いる際にコンポーネント分割の粒度としてアトミックデザインを活用するといったケースがあります。
アトミックデザインに固執する必要はないですが、コンポーネントをどう分割していくかをデザイナー交えて検討するのは大切だと考えていて、土台としてアトミックデザインは有用と思います。

アクセシビリティを知る

セマンティックを知る

[13] https://developer.mozilla.org/ja/docs/Learn/Accessibility/HTML
[14] https://developer.mozilla.org/ja/docs/Learn/Accessibility/CSS_and_JavaScript
セマンティックなコーディングを行うことでアクセシビリティだけでなく、SEOに対してもメリットがあると言われています。

ARIAを知る

[15] https://developer.mozilla.org/ja/docs/Learn/Accessibility/WAI-ARIA_basics
可能な限りネイティブなHTMLで解決すべきで、必要なときだけ使うことが推奨されています。
業務アプリなど利用ブラウザが制限できて、かつ複雑なUIでは活躍の機会があるかもしれません。

SEOを知る

お上の言うことを知る

[16] https://support.google.com/webmasters/answer/35769?hl=ja
まずはお上の言うことに従いましょう。
私は毎晩、「Googleは神」と三回復唱してから寝るようにしています。

構造化データを知る

[17] https://developers.google.com/search/docs/data-types/article?hl=ja
担当業務領域によっては、構造化データを設定することが必要かもしれません。

SEOと直接関係ありませんが、GAやdatalayerを正しく設定することもフロントでは大切です。

ブラウザを知る

ブラウザの仕組みを知る

[18] https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/
結構長いので、他国の文化を知るような気持ちで、ブラウザってこうなってんだって読むのをお勧めします。

デバイスおよびブラウザの特性を知る

[19] https://caniuse.com/
フロントエンドの辛いところとして、コードの実行環境(ブラウザ)が無数にあることが挙げられますが、JSやCSSがその環境で実行可能か確認できます。

JSに関しては、IE11などでもES2015以降の機能を使えるbabel-polyfillの導入も検討しましょう。

Threadを知る

[20] https://nhiroki.jp/2018/05/07/off-the-main-thread-api
JavaScriptにはメインスレッド(=UIスレッド)が一つしかないので、普通に書くと非同期処理であってもシングルスレッドの直列で実行されます。
重たい処理(UI的にカクついてしまうとか)をマルチスレッドで実行するために、Web Workerの利用を考えましょう。

JITを知る

[21] https://dev.mozilla.jp/2017/05/%E3%82%B8%E3%83%A3%E3%82%B9%E3%83%88%E3%83%BB%E3%82%A4%E3%83%B3%E3%83%BB%E3%82%BF%E3%82%A4%E3%83%A0-jit-%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%A9%E3%81%AE%E3%82%AF%E3%83%A9%E3%83%83%E3%82%B7/
(難しくてよく分かってませんが?)モダンブラウザは実行時最適化と呼ばれるコンパイルを行っているそうです。

常に同じ型で呼び出される型を仮定するそうなので、私のような市井のプログラマには、型を意識した開発を心掛けることでJITの恩恵を享受できる可能性があります。
お気づきの方も多いと思いますが、それはTypeScriptと相性が良いです。

セキュリティを知る

DOM Based XSSを知る

[22] https://gihyo.jp/dev/serial/01/javascript-security/0006
モダンなフロントのフレームワークを使っている場合、もはや意識しないかもしれませんが、JS初学者は一度目を通しましょう。

CORSを知る

[23] https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
CORSを理解しそのクライアントとサーバーを実装すると、HTTPに対する理解も深まるのでとてもお勧めです。

CSRF脆弱性とjwtを知る

[24] https://techblog.yahoo.co.jp/advent-calendar-2017/jwt/
jwt(json web token)は、OAuth2.0という認可の仕組みのアクセストークンとして採用されるなど広く使われています。

CSRFという、なりすましのような脆弱性が存在すること、その対策の一つとしてredirect_uriの制限が可能なjwtが存在することを理解出来るとOKです。
GoogleやFacebookのような代表的なOpenID Providerは、stateにredirect_uriを含めuriのホワイトリストと突合するのが必須になっていると思います。

テストを知る

ユニットテストを知る

[25] https://jestjs.io/docs/ja/getting-started
Reactはもちろん、Vueを使う際もJestがお勧めです。
ただフロントエンドのテストはベストプラクティスが無いと言われていて、下記のようにどういったテストをすべきかをまず検討しましょう。
[26] http://akito0107.hatenablog.com/entry/2018/08/27/190333

もしかしたらあなたに必要なのはユニットテストではなく、TypeScriptかもしれません。

E2Eテストを知る

[27] https://techblog.lclco.com/entry/2018/06/28/080000
フロントエンドが自主的に行うE2EとしてはPuppeteerがデファクトではないかと思います。
ユニットテストでも書きましたが、E2Eの運用も楽ではないので何をテストするのかちゃんと計画しましょう。

代表的なUIテストを知る

[28] https://qiita.com/masaakikunsan/items/dad8d84807918f3a43cb
storybookを採用することで、再利用性やテスト容易性が向上すると思います。
実装やメンテは大変なので、小規模なチームでの採用はコストに見合わない可能性があります。

データストアを知る

cookieを知る

[29] https://developer.mozilla.org/ja/docs/Web/HTTP/Cookies
仕様が複雑ですが、とても良く使うためちゃんと理解しましょう。ブラウザのユーザー固有情報においてサーバーとやり取りできる唯一のストレージです。

他にもブラウザだけで扱えるWeb Storageも存在します。サーバーとのやり取りが不要ならこちらを使いましょう。
[30] https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API#Web_Storage_concepts_and_usage
HTTPヘッダに乗ることもなくブラウザだけで完結するため扱いやすいですが、外部サービスのJSから取得可能な領域のため個人情報を置いたりするのは止めましょう?

NoSQLを知る

[31] https://firebase.google.com/docs/database/ios/structure-data?hl=ja
リンク先はFirebaseのRealtime Databaseですが、MysqlのようなRDBとは設計思想がまるで異なることが分かると思います。
※Cloud Firestoreの設計は、上記のベストプラクティスと異なります。

Cloud FirestoreやDynamoDBといった新世代の優れたデータストアは、これまでバックエンドエンジニアが培ってきた設計が通用しないため運用が難しいと議論されています。
[32] https://qiita.com/funasaki/items/6cdc8f7f7b709e5e601f

一方、多くのネイティブアプリエンジニアが運用してきたように、UIに近い立場のフロントエンドにとっては比較的自然に扱えるデータストアだと感じるので、触れてみるのがお勧めです。

モダンフロントエンドへ

Fluxと仮想DOMを知る

[33] https://qiita.com/mizchi/items/4d25bc26def1719d52e6
Qiita史に燦然と輝く魂の名文。
なぜVueやReactがこれほど重要な位置を占めたか、そのすべてが書いてあります。

私的な余談ですが、右も左も分からない新卒エンジニアだった当時この文章を読んで、全然内容は分からなかったんですが、この筆者が一体何に興奮しているのか興味を持ち、Reactを学びたくなったという背景があります。

言語を知る

TSを知る

[34] https://www.typescriptlang.org/docs/home.html
折に触れてTypeScriptの名前を出してきましたが、今からJSのプロジェクトを始める場合、どんなケースにおいてもTSの採用をオススメします。そこに迷いはありません?

React, Vueを知る

[35] https://ja.reactjs.org/docs/getting-started.html
とりあえずReactかVueのどちらかを学びましょう。

現時点ではTSとの相性がReactの方が高いです。Vue3.0がリリースされるとVueでもTSXがネイティブサポートされ解消される見込みですが。

個人的には、Vueの双方向と単方向データバインディングの合わせ技を便利と感じるか邪悪と感じるかで、VueとReactのどちらを採用するかが決まるかなと考えています。

CSS in JSを知る

[36] https://qiita.com/taneba/items/4547830b461d11a69a20
styled-componentsの採用が多いです。

CSS in JSを嫌っている人もいますが、コンポーネント単位でインターフェースやインタラクションを定義していきましょうという時代に適した手法と感じます。

アーキテクチャを知る

CDNを知る

[37] https://speakerdeck.com/sisidovski/nikkei-itpro-cdn
リリース当時、界隈で話題になった日経電子版のCDNを中心とした設計の話です。
とにかくCDNで出来ることが増えていて、なぜ使うのか、どういったことが可能なのか知ることが大切です。

JAMStackを知る

[38] https://qiita.com/ossan-engineer/items/4fe0e3e388f510bd5c68
CDNファーストを考えた際に、第一候補となる構成です。
この構成を目指す際に採用するGatsbyやVuePressのようなFWは、静的サイトジェネレータ(SSG)と呼ばれる事が多いです。

BFFを知る

[39] https://www.atmarkit.co.jp/ait/articles/1803/12/news012.html
特にこの記事で素晴らしいと思った点は、フロントエンドの担当領域を明確に定義している点です。

私的な余談ですが、なぜBFFという考え方が誕生しその領域をフロントエンドが担うべきなのか、おぼろげに理解できたとき私のなかで点だった技術や思想が線で繋がった感覚がありました。

BFFとSSRを知る

[40] https://speakerdeck.com/yosuke_furukawa/ssrfalsehua
SSRも一種のBFFと呼べますが、なぜSSRをすべきなのかが最もわかりやすいと思います。
さすが日本Node.jsユーザグループ会長、ウォーリーのアイコンも可愛いです。

アーキテクチャの補足ですが、既存の技術資産を活用するためRailsをAPIで残して、フロントエンドだけをモダンにするみたいなケースも見られます。
[41] https://speakerdeck.com/fukuiretu/notewonuxt-dot-jsdezai-gou-zhu-sitahua

レンダリングを知る

[42] https://developers.google.com/web/updates/2019/02/rendering-on-the-web
モダンなフロントエンドのアーキテクチャをレンダリングという観点からまとめたGoogle謹製ページ。
2019年に生きるすべてのフロントエンド必読です。

SSRやSSGを実現する方法を知る

[43] https://ja.nuxtjs.org/guide
NuxtやNextを良く聞くけどイマイチ分かってなかった方々、ここまでの話を読むと凄さが伝わるのではないかと思います。
サーバーサイドでReactやVueが実行可能になったことで、SSRが市井のエンジニアでも実現可能になりました。
NuxtやNextではSSGも可能です。

パフォーマンス改善を知る

Service Workerを知る

[44] https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja
Service Workerを用いたcacheを行うことで、2回目以降のFCPなどのタイムを大幅に削減可能です。

このAPIを用いると、従来Webから出来なかったプッシュ通知などの体験を提供できることから、Service Workerを活用したWebアプリはPWAとも呼ばれてます。

lighthouseを知る

[45] https://developers.google.com/web/tools/lighthouse/?hl=ja
lighthouseを用いることで、これまで紹介してきたアクセシビリティやパフォーマンスといった項目がサイト上でどの程度実現出来ているかの測定が可能です。

Performance Budgetを知る

[46] https://developers-jp.googleblog.com/2019/03/blog-post_15.html
ウェブサイトを高速に保つための手法として、Performance Budgetの導入が推奨されています。
上記で紹介したlighthouseなどと組み合わせてCIに導入すると良い感じだと思います。

Webpackを知る

[47] https://webpack.js.org/guides/asset-management/
本来パフォーマンスの項目で紹介するものではありませんが、Webpackをちゃんと使うことでBundleサイズの削減、ひいてはパフォーマンスの向上が期待できます。
出来ることはたくさんありますが、tree-shakingとcode-splittingをまず検討しましょう。

Webpackは汎用的な知識ではないし、vue-cliやNuxtのAPIでラッパーすれば触らなくても良いんですが、
現時点では未だフロントエンドが頑張るべき分野かなと思っています。

アセット最適化を知る

[48]https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/automating-image-optimization/?hl=ja
画像はCDNから配信するのがスタンダードだし、じゃぁCDN上で画像の最適化をするのがベストプラクティスという話です。
Googleが開発しているモダンな画像フォーマットである、webpも紹介されています。

ここまでの総括として、サーバーレスを知る

[49] https://qiita.com/jshimazu/items/e102cde5124609384d0c
[50] https://inside.dmm.com/entry/2018/11/06/nuxt2-pwa-gae-se
これまでに話してきたことを詰め込んだような内容で、かつインフラのメンテコストを減らす形でサーバーレスのNetlifyやGAEを用いた構成です。

SSGやSSRをサーバーレスで動かすのは現代のベストプラクティスの一つだと確信しています。
※弊社では専門のインフラチームがいるため実際にPaaSなどのサーバーレスを採用するケースは少ないですが、多くのチーム・個人にとって有用だと思います。

さいごに

GoogleやAWSのインフラエンジニアの力を借りることが可能な現代で、
フロントエンドエンジニアは自分たちの力で良いWebサービスを実現できる存在だと思います。

知るべきことも、やるべきことも、山ほどありますが、
みんなでWebを少しでも良い世界にしていきましょう?

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

すべての新米フロントエンドに読んでほしい50の資料

はじめに

さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね?

従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。
そこで、フロントエンドの経験が浅い方や初学者向けに、おすすめのドキュメントや勉強すべき領域をまとめました。

とりあえず動けば良い段階から一歩進んで、フロントエンドエンジニアとして、良いアプリケーションを作るために必要な知識を浅く広く紹介します。

フロントエンド入門

公式ドキュメントを知る

[1] https://jp.vuejs.org/v2/guide/
一例としてVueを貼りましたが、Vueに限らず信頼出来る情報に当たる癖付けがとても大切です。
特にVue.jsは一昔前のjQueryやRailsやPHPのように、技術に明るくない方が書いたページが多いと感じていて、ちゃんとVueを学ぶならまずは公式を見ましょう。

言語を知る

JSを知る

[2] https://jsprimer.net/basic/introduction/
今からJSを学ぶなら特別な事情がない限り、ES2015以降の文法で良いと思います。
js-primerはES2015以降のJSを知る上で素晴らしいドキュメントです。

昔のJSもちょっと知る

[3] https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures
データの隠蔽やカプセル化を実現するために使われたテクニックです。
今のJSを書く場合に意識する機会は少ないと思いますが、知っておいて損ないです。

[4] https://www.yunabe.jp/docs/javascript_class_in_google.html
ES5以前の古いJSで記述しなきゃいけない仕事に遭遇した際、あらためて読み返したい素晴らしいドキュメントです。ベストプラクティスのひとつだと思います。

昔のJSもしっかり学びたい方は、「JavaScript: The Good Parts」や「開眼!JavaScript」といった書籍の購入も検討してください。
上記の書籍を読んで、DouglasやJohnResigやSubstackを知っていると、先輩のフロントエンドエンジニアから気に入られる確率が向上します(当社比)

非同期処理を知る

[5] http://azu.github.io/promises-book/
非同期処理は初学者にとって大きな壁の一つだと思いますが、しっかりとPromiseオブジェクトを理解することがJSでは必須です。
ES2017で追加されたAsync Functionは、Promiseを返す関数なのでPromiseが分かればすぐ理解できます。

Promiseを理解したら、Asyncjsのようなライブラリで複雑な非同期処理を実装したり、
RxJSのようなライブラリを用いてPromise以外の非同期を扱う方法を学んでみると良きです。

HTMLLivingStandard & ECMAScript を知る

[6] https://html.spec.whatwg.org/multipage/
[7] https://www.ecma-international.org/publications/standards/Ecma-262.htm
聖書。HTMLやJSといった言語の仕様が記載してあります。

ちなみに私のチームでは、実装周りの裁判が発生した際に、六法全書代わりとして活用しています。
※私はおそらく全体の3%ほどしか読んでませんが、ちゃんと読んだぞという空気を出して会話します?

コーディング規約を知る

[8] https://qiita.com/mysticatea/items/f523dab04a25f617c87d
[9] https://qiita.com/soarflat/items/06377f3b96964964a65d
これからフロントエンドを学ぶ方すべてに、まずはLintとコードフォーマッターの導入をお勧めします。
Lintではeslintやstylelint、コードフォーマッターではprettierがデファクトです。
利用するルールは何でも良いと思いますが、とにかくルールを用意することが大切です。

UIを知る

モーショングラフィックやインタラクションを知る

[10] https://goodpatch.com/blog/ui-micro-interaction/
マイクロインタラクションはデザイナーの仕事という認識の方も多いと思いますが、
特殊な例外発生時にユーザーへ適切なフィードバックを返すべきといった気付きはエンジニアの方が強いと思うので、常にプログラム的な例外とUI的な例外(フィードバック)の両方を考える姿勢が大切だと感じます。

マテリアルデザインを知る

[11] https://material.io/design/
Google公式のデザインガイドです。英語のドキュメントですが、グラフィック中心なので分かりやすいです。

アトミックデザインを知る

[12] https://ygoto3.com/posts/atomic-design-on-actual-project/
ReactやVueを用いる際にコンポーネント分割の粒度としてアトミックデザインを活用するといったケースがあります。
アトミックデザインに固執する必要はないですが、コンポーネントをどう分割していくかをデザイナー交えて検討するのは大切だと考えていて、土台としてアトミックデザインは有用と思います。

アクセシビリティを知る

セマンティックを知る

[13] https://developer.mozilla.org/ja/docs/Learn/Accessibility/HTML
[14] https://developer.mozilla.org/ja/docs/Learn/Accessibility/CSS_and_JavaScript
セマンティックなコーディングを行うことでアクセシビリティだけでなく、SEOに対してもメリットがあると言われています。

ARIAを知る

[15] https://developer.mozilla.org/ja/docs/Learn/Accessibility/WAI-ARIA_basics
可能な限りネイティブなHTMLで解決すべきで、必要なときだけ使うことが推奨されています。
業務アプリなど利用ブラウザが制限できて、かつ複雑なUIでは活躍の機会があるかもしれません。

SEOを知る

お上の言うことを知る

[16] https://support.google.com/webmasters/answer/35769?hl=ja
まずはお上の言うことに従いましょう。
私は毎晩、「Googleは神」と三回復唱してから寝るようにしています。

構造化データを知る

[17] https://developers.google.com/search/docs/data-types/article?hl=ja
担当業務領域によっては、構造化データを設定することが必要かもしれません。

SEOと直接関係ありませんが、GAやdatalayerを正しく設定することもフロントでは大切です。

ブラウザを知る

ブラウザの仕組みを知る

[18] https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/
結構長いので、他国の文化を知るような気持ちで、ブラウザってこうなってんだって読むのをお勧めします。

デバイスおよびブラウザの特性を知る

[19] https://caniuse.com/
フロントエンドの辛いところとして、コードの実行環境(ブラウザ)が無数にあることが挙げられますが、JSやCSSがその環境で実行可能か確認できます。

JSに関しては、IE11などでもES2015以降の機能を使えるbabel-polyfillの導入も検討しましょう。

Threadを知る

[20] https://nhiroki.jp/2018/05/07/off-the-main-thread-api
JavaScriptにはメインスレッド(=UIスレッド)が一つしかないので、普通に書くと非同期処理であってもシングルスレッドの直列で実行されます。
重たい処理(UI的にカクついてしまうとか)をマルチスレッドで実行するために、Web Workerの利用を考えましょう。

JITを知る

[21] https://dev.mozilla.jp/2017/05/%E3%82%B8%E3%83%A3%E3%82%B9%E3%83%88%E3%83%BB%E3%82%A4%E3%83%B3%E3%83%BB%E3%82%BF%E3%82%A4%E3%83%A0-jit-%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%A9%E3%81%AE%E3%82%AF%E3%83%A9%E3%83%83%E3%82%B7/
(難しくてよく分かってませんが?)モダンブラウザは実行時最適化と呼ばれるコンパイルを行っているそうです。

常に同じ型で呼び出される型を仮定するそうなので、私のような市井のプログラマには、型を意識した開発を心掛けることでJITの恩恵を享受できる可能性があります。
お気づきの方も多いと思いますが、それはTypeScriptと相性が良いです。

セキュリティを知る

DOM Based XSSを知る

[22] https://gihyo.jp/dev/serial/01/javascript-security/0006
モダンなフロントのフレームワークを使っている場合、もはや意識しないかもしれませんが、JS初学者は一度目を通しましょう。

CORSを知る

[23] https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
CORSを理解しそのクライアントとサーバーを実装すると、HTTPに対する理解も深まるのでとてもお勧めです。

CSRF脆弱性とjwtを知る

[24] https://techblog.yahoo.co.jp/advent-calendar-2017/jwt/
jwt(json web token)は、OAuth2.0という認可の仕組みのアクセストークンとして採用されるなど広く使われています。

CSRFという、なりすましのような脆弱性が存在すること、その対策の一つとしてredirect_uriの制限が可能なjwtが存在することを理解出来るとOKです。
GoogleやFacebookのような代表的なOpenID Providerは、stateにredirect_uriを含めuriのホワイトリストと突合するのが必須になっていると思います。

テストを知る

ユニットテストを知る

[25] https://jestjs.io/docs/ja/getting-started
Reactはもちろん、Vueを使う際もJestがお勧めです。
ただフロントエンドのテストはベストプラクティスが無いと言われていて、下記のようにどういったテストをすべきかをまず検討しましょう。
[26] http://akito0107.hatenablog.com/entry/2018/08/27/190333

もしかしたらあなたに必要なのはユニットテストではなく、TypeScriptかもしれません。

E2Eテストを知る

[27] https://techblog.lclco.com/entry/2018/06/28/080000
フロントエンドが自主的に行うE2EとしてはPuppeteerがデファクトではないかと思います。
ユニットテストでも書きましたが、E2Eの運用も楽ではないので何をテストするのかちゃんと計画しましょう。

代表的なUIテストを知る

[28] https://qiita.com/masaakikunsan/items/dad8d84807918f3a43cb
storybookを採用することで、再利用性やテスト容易性が向上すると思います。
実装やメンテは大変なので、小規模なチームでの採用はコストに見合わない可能性があります。

データストアを知る

cookieを知る

[29] https://developer.mozilla.org/ja/docs/Web/HTTP/Cookies
仕様が複雑ですが、とても良く使うためちゃんと理解しましょう。ブラウザのユーザー固有情報においてサーバーとやり取りできる唯一のストレージです。

他にもブラウザだけで扱えるWeb Storageも存在します。サーバーとのやり取りが不要ならこちらを使いましょう。
[30] https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API#Web_Storage_concepts_and_usage
HTTPヘッダに乗ることもなくブラウザだけで完結するため扱いやすいですが、外部サービスのJSから取得可能な領域のため個人情報を置いたりするのは止めましょう?

NoSQLを知る

[31] https://firebase.google.com/docs/database/ios/structure-data?hl=ja
リンク先はFirebaseのRealtime Databaseですが、MysqlのようなRDBとは設計思想がまるで異なることが分かると思います。
※Cloud Firestoreの設計は、上記のベストプラクティスと異なります。

Cloud FirestoreやDynamoDBといった新世代の優れたデータストアは、これまでバックエンドエンジニアが培ってきた設計が通用しないため運用が難しいと議論されています。
[32] https://qiita.com/funasaki/items/6cdc8f7f7b709e5e601f

一方、多くのネイティブアプリエンジニアが運用してきたように、UIに近い立場のフロントエンドにとっては比較的自然に扱えるデータストアだと感じるので、触れてみるのがお勧めです。

モダンフロントエンドへ

Fluxと仮想DOMを知る

[33] https://qiita.com/mizchi/items/4d25bc26def1719d52e6
Qiita史に燦然と輝く魂の名文。
なぜVueやReactがこれほど重要な位置を占めたか、そのすべてが書いてあります。

私的な余談ですが、右も左も分からない新卒エンジニアだった当時この文章を読んで、全然内容は分からなかったんですが、この筆者が一体何に興奮しているのか興味を持ち、Reactを学びたくなったという背景があります。

言語を知る

TSを知る

[34] https://www.typescriptlang.org/docs/home.html
折に触れてTypeScriptの名前を出してきましたが、今からJSのプロジェクトを始める場合、どんなケースにおいてもTSの採用をオススメします。そこに迷いはありません?

React, Vueを知る

[35] https://ja.reactjs.org/docs/getting-started.html
とりあえずReactかVueのどちらかを学びましょう。

現時点ではTSとの相性がReactの方が高いです。Vue3.0がリリースされるとVueでもTSXがネイティブサポートされ解消される見込みですが。

個人的には、Vueの双方向と単方向データバインディングの合わせ技を便利と感じるか邪悪と感じるかで、VueとReactのどちらを採用するかが決まるかなと考えています。

CSS in JSを知る

[36] https://qiita.com/taneba/items/4547830b461d11a69a20
styled-componentsの採用が多いです。

CSS in JSを嫌っている人もいますが、コンポーネント単位でインターフェースやインタラクションを定義していきましょうという時代に適した手法と感じます。

アーキテクチャを知る

CDNを知る

[37] https://speakerdeck.com/sisidovski/nikkei-itpro-cdn
リリース当時、界隈で話題になった日経電子版のCDNを中心とした設計の話です。
とにかくCDNで出来ることが増えていて、なぜ使うのか、どういったことが可能なのか知ることが大切です。

JAMStackを知る

[38] https://qiita.com/ossan-engineer/items/4fe0e3e388f510bd5c68
CDNファーストを考えた際に、第一候補となる構成です。
この構成を目指す際に採用するGatsbyやVuePressのようなFWは、静的サイトジェネレータ(SSG)と呼ばれる事が多いです。

BFFを知る

[39] https://www.atmarkit.co.jp/ait/articles/1803/12/news012.html
特にこの記事で素晴らしいと思った点は、フロントエンドの担当領域を明確に定義している点です。

私的な余談ですが、なぜBFFという考え方が誕生しその領域をフロントエンドが担うべきなのか、おぼろげに理解できたとき私のなかで点だった技術や思想が線で繋がった感覚がありました。

BFFとSSRを知る

[40] https://speakerdeck.com/yosuke_furukawa/ssrfalsehua
SSRも一種のBFFと呼べますが、なぜSSRをすべきなのかが最もわかりやすいと思います。
さすが日本Node.jsユーザグループ会長、ウォーリーのアイコンも可愛いです。

アーキテクチャの補足ですが、既存の技術資産を活用するためRailsをAPIで残して、フロントエンドだけをモダンにするみたいなケースも見られます。
[41] https://speakerdeck.com/fukuiretu/notewonuxt-dot-jsdezai-gou-zhu-sitahua

レンダリングを知る

[42] https://developers.google.com/web/updates/2019/02/rendering-on-the-web
モダンなフロントエンドのアーキテクチャをレンダリングという観点からまとめたGoogle謹製ページ。
2019年に生きるすべてのフロントエンド必読です。

SSRやSSGを実現する方法を知る

[43] https://ja.nuxtjs.org/guide
NuxtやNextを良く聞くけどイマイチ分かってなかった方々、ここまでの話を読むと凄さが伝わるのではないかと思います。
サーバーサイドでReactやVueが実行可能になったことで、SSRが市井のエンジニアでも実現可能になりました。
NuxtやNextではSSGも可能です。

パフォーマンス改善を知る

Service Workerを知る

[44] https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja
Service Workerを用いたcacheを行うことで、2回目以降のFCPなどのタイムを大幅に削減可能です。

このAPIを用いると、従来Webから出来なかったプッシュ通知などの体験を提供できることから、Service Workerを活用したWebアプリはPWAとも呼ばれてます。

lighthouseを知る

[45] https://developers.google.com/web/tools/lighthouse/?hl=ja
lighthouseを用いることで、これまで紹介してきたアクセシビリティやパフォーマンスといった項目がサイト上でどの程度実現出来ているかの測定が可能です。

Performance Budgetを知る

[46] https://developers-jp.googleblog.com/2019/03/blog-post_15.html
ウェブサイトを高速に保つための手法として、Performance Budgetの導入が推奨されています。
上記で紹介したlighthouseなどと組み合わせてCIに導入すると良い感じだと思います。

Webpackを知る

[47] https://webpack.js.org/guides/asset-management/
本来パフォーマンスの項目で紹介するものではありませんが、Webpackをちゃんと使うことでBundleサイズの削減、ひいてはパフォーマンスの向上が期待できます。
出来ることはたくさんありますが、tree-shakingとcode-splittingをまず検討しましょう。

Webpackは汎用的な知識ではないし、vue-cliやNuxtのAPIでラッパーすれば触らなくても良いんですが、
現時点では未だフロントエンドが頑張るべき分野かなと思っています。

アセット最適化を知る

[48]https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/automating-image-optimization/?hl=ja
画像はCDNから配信するのがスタンダードだし、じゃぁCDN上で画像の最適化をするのがベストプラクティスという話です。
Googleが開発しているモダンな画像フォーマットである、webpも紹介されています。

ここまでの総括として、サーバーレスを知る

[49] https://qiita.com/jshimazu/items/e102cde5124609384d0c
[50] https://inside.dmm.com/entry/2018/11/06/nuxt2-pwa-gae-se
これまでに話してきたことを詰め込んだような内容で、かつインフラのメンテコストを減らす形でサーバーレスのNetlifyやGAEを用いた構成です。
SSGやSSRをサーバーレスで動かすのは現代のベストプラクティスの一つだと確信しています。

さいごに

GoogleやAWSのインフラエンジニアの力を借りることが可能な現代で、
フロントエンドエンジニアは自分たちだけで優れたサービスを提供できる存在だと思います。

知るべきことも、やるべきことも、山ほどありますが、
みんなでWebを少しでも良い世界にしていきましょう?

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSSをレスポンシブ対応にする(基礎)

メディアクエリの作成

sample.css
/*PCサイズでは赤に*/
h1 {
  color: red;
}

/*タブレットサイズでは青に*/
@media (max-width: 1000px) {
  h1 {
    color: blue;
  }
}

/*スマホサイズでは緑に*/
@media (max-width: 670px) {
  h1 {
    color: green;
  }
}
index.html
<!--viewportを設定することで、メディアクエリを有効化-->
<head>
  <!--下記をheadタグに追加-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

レイアウト崩れの対処(box-sizing)

sample.css
.item {
  width: 25%;
  float: left;
  /*25%に15pxのpaddingが含まれず、レイアウトが崩れる*/
  padding: 0 15px;
}

/*下記を指定することで、paddingやボーダーも含めて25%になる*/
* {
  box-sizing: border-box;
}

レイアウト崩れの対処(clear)

sample.html
<!--childがfloatされてる場合、parentの高さが0になる-->
<div class="parent">
 <div class="child"></div> 
 <div class="clear"></div>
</div>
sample.css
/*parentの高さをchildに合わせるため、clearを指定*/
.clear {
  clear: both;
}

その他ポイント

・pxではなく%の指定に変える。
・フォントやボタンのサイズ、余白を見やすさに応じて変更。
・非常に大きい画面を想定し、max-widthを設定。
 (例)max-width: 1170px; width: 100%;
・ヘッダ部などをテキストからアイコンに変えるなど、見やすくする。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSSでモーダルウィンドウをレスポンシブに画面中央に配置する

レスポンシブな感じでモーダルウィンドウを画面中央に配置したいときに使ったスタイルです。

index.html
<body>
  <div class="modal">
    <span>ITEM1</span>
    <input type="text" name="item1">
    <span>ITEM2</span>
    <input type="text" name="item2">
    <button>send</button>
  </div>
<body>
main.css
body {
  background: rgba(0, 0, 0, .2);
}
.modal {
  height: 20em;
  background: #fff;
  padding: 20px;
  /* ↓ 画面中央に配置するためのスタイル */
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  margin-left: 10%;
  margin-right: 10%;
}

上下左右の余白の比率は変化することなく、画面サイズに合わせてモーダルウィンドウのサイズが変化します。

↓ ウィンドウを小さくすると
small_display.png

↓ ウィンドウを大きくすると
large_display.png

ただしこのやり方だと、画面サイズが大きくなるにつれて モーダルウィンドウの横幅も大きくなってしまうため、何か良い解決方法があれば教えていただきたいです!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSSでモーダルウィンドウをレスポンシブな感じで画面中央に配置する

レスポンシブな感じでモーダルウィンドウを画面中央に配置したいときに使ったスタイルです。

index.html
<body>
  <div class="modal">
    <span>ITEM1</span>
    <input type="text" name="item1">
    <span>ITEM2</span>
    <input type="text" name="item2">
    <button>send</button>
  </div>
<body>
main.css
body {
  background: rgba(0, 0, 0, .2);
}
.modal {
  height: 20em;
  background: #fff;
  padding: 20px;
  /* ↓ 画面中央に配置するためのスタイル */
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  margin-left: 10%;
  margin-right: 10%;
}

上下左右の余白の比率は変化することなく、画面サイズに合わせてモーダルウィンドウのサイズが変化します。

↓ ウィンドウを小さくすると
small_display.png

↓ ウィンドウを大きくすると
large_display.png

ただしこのやり方だと、画面サイズが大きくなるにつれて モーダルウィンドウの横幅も大きくなってしまうため、他の良い方法を探し中です。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSSでボタンに影をつけ、クリック時に消す方法

CSSでボタンに影をつけ、クリック時に消す

sample.css
.btn {
  /*水平方向の影の長さ、垂直方向の長さ、影の色を指定*/
  box-shadow: 0px 7px #1a7940;
}

/*クリック時のイベントを指定*/
.btn:active {
  /*影をけす*/
  box-shadow: none;
  /*ボタンを下に移動させる=ボタンがクリックされたように見える*/
  position: relative;
  top: 7px;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

この夏プログラミングはじめました

未来電子テクノロジーでインターンをしている mrm1027 です。

今回は、初めてQiitaで記事を投稿するので、書き方がいまいち分からず緊張しております。。

プログラミングを始めて、2週感経ちました。
進捗としては、ProgateのHTML&CSSの上級編まで修了しました。
これまでは基本的な部分を学びながら、それぞれのステージで簡単な成果物を作りあげるような学習でした。
しかし、まだどうしたらどうなって、なぜそれが必要でといった根本をまだまだ理解できていないので、
今後は、これまでに学習した範囲の復習を小まめに入れつつ、次の自由課題に向けて取り組んでいこうと思います。

次回からは、ちゃんとした専門的な内容の記事を書けるようにプログラミングの学習を引き続き頑張りたいと思います!!

【プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし誤りがある場合は、すぐさま修正しますのでどんどん指摘してください。】

誤りからもたくさん学んで吸収していきたいです!よろしくお願いします!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

HTMLで画像だけを透過させたい

はじめに

今回は、「HTMLで画像の上に文字を表示し、画像だけを透過させる方法」について書きます。

何で困ったか

画像の上に文字を表示し、画像だけを透過させたいが、全て透過してしまう。
↓こんな感じ。

スクリーンショット 2019-07-11 11.17.33.png

その時のコードがこちら。(関係のないところのコードは割愛)

index.html
<div class="contents-bg">
          <div class="header-logo">
            Home
          </div>
        <div class="header-list">
          <ul>
            <div>
            <li><input class = "button2" type="submit" value="menu" onClick="alert('Sorry. The menu button is broken.');" ></li>
            <li><button class = "button1" type=“button” onclick="location.href='#'">contact</li>

          </ul>
        </div>
    </div>
stylesheet.css
.contents-bg {
    background-image: url("header.png");
    background-size: cover;
    background-position: center;
    height: 200px;
    opacity:0.6;
}

いろいろ調べてみると・・・

opacityでは要素全体に適用されてしまうコードであることが判明。
以下のサイトを参考にして、文字と画像の間にもう1つレイヤーを挿入する方法でコードを書き直してみました。
http://www.yabi-blog.xyz/css_background_rgba/

書き直し後

div の class として新しくcontentsというレイヤーを挿入しました。
そして、contentsのstylesheetで、rgbaを使用して透過を実装。
(rgbaはプロパティにだけ適用されるコード)

index.html
<div class="contents-bg">
        <div class="contents">
          <div class="header-logo">
            Home
          </div>
        <div class="header-list">
          <ul>
            <div>
            <li><input class = "button2" type="submit" value="menu" onClick="alert('Sorry. The menu button is broken.');" ></li>
            <li><button class = "button1" type=“button” onclick="location.href='#'">contact</li>

          </ul>
        </div>
  </div>
    </div>
stylesheet.css
.contents-bg {
    background-image: url("header.png");
    background-size: cover;
    background-position: center;
    height: 200px;
}

.contents {
    background-color: rgba(255,255,255,0.78);
    height: 200px;
}

実行結果

スクリーンショット 2019-07-11 11.46.37.png

きちんと画像だけ透過させることができました!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Webデザイン初心者に役立つ(と思う)サイト3選

はじめに

某新宿のIT系専門学校一年のYuumaと申します。
今学校の授業でhtmlでWebページを製作しているのですが制作している過程で役に立ちそうなサイトをいくつか見つけたので紹介していきたいと思います。

Unsplash

知っている人も多いと思いますがこのサイトは60万枚以上の美麗な写真が著作権フリーで使えるサイトです。(しかも商業利用もOK)
著作権フリーなので探せばいろいろなブログやサイトでこのサイトの写真が使われてます。

キャプチャ.JPG

サイトには検索機能があるほかアカウントを作ればお気に入りを設定することもできますし複数の写真をまとめたコレクションといったものを作ることもできます。

robert-bock-cV4qkkorDFY-unsplash.jpg

↑こんな感じの綺麗でエモい画像がたくさんあります。
Url https://unsplash.com/

fontisto

こちらは様々なアイコンが使えるCSSファイルを配布しているサイトです。また、アイコンを個別にsvgファイル形式でダウンロードすることも可能です。
キャプチャ.JPG

fontistoにあるアイコンは例えば車や携帯、顔文字といった一般的なものからTwitterやInstagram,Lineなどといった有名なアプリのアイコンやappleやgoogleといったブランドのロゴ。果てはubuntuのロゴまであります。
また、ページにアクセスすると画面下部にメニューが表示されそのメニューの設定次第で背景のスタイルや角度回転のアニメーションなどが設定可能です。
Url https://www.fontisto.com/icons

flatuicolors

このサイトは色を選ぶ際に使えるサイトです。flatuicolors.JPG
サイトにアクセスすると上のような画面が出てきます。
画面の好きな色のボタンをクリックするとクリップボードに指定した色のカラーコードが保存できます。
サイトを作る際に色をどうしようかと迷った場合にとても役に立つサイトです。
Url https://flatuicolors.com/

 おわり

今回の記事はいかがでしたか?
良かったらいいね押していってくださいm(__)m
(良い締めが思いつかなかったのでいかがでしたかブログみたいになってしまった)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

css memo

MEMO

角丸

example
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

CSSの変更が反映されない

現象

HTMLとCSSを勉強のため、dockerとnginxでwebサーバーを構築したが、CSSを変更しても反映されなかった。

対処法

調べたところ、nginx.confのsendfileをoffにすればよいとわかった。

nginx.confの確認
$ docker exec -it コンテナID /bin/bash
$ cat /etc/nginx/nginx.conf

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

nginx.confの編集

docker内のファイルを直接編集する方法がわからず、以下のコマンドでローカルにコピー。

$ docker cp nginx_web_1:/etc/nginx/nginx.conf .

nginx.confのsendfileをoffに変更。

nginx.conf
sendfile        off;

docker-compose.ymlに以下を追加し、confファイルをコンテナにマウント。

docker-compose.yml
'- ./nginx.conf:/etc/nginx/nginx.conf'

コンテナを再度作成

$ docker-compose up

直らず

CSSを削除しても変わらなかったので、ブラウザが原因だと思い、
デベロッパーツールからブラウザのキャッシュをクリアしたところ直った。
CSSが反映されないときはとりあえずブラウザのキャッシュを疑うべきとのことらしい。
スクリーンショット 2019-07-11 1.31.47.png

参考

https://qiita.com/shoyan/items/12389d5beaa8695b1a53
https://qiita.com/gologo13/items/7e4e404af80377b48fd5

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む