What's New Qiita

20200810のCSSに関する記事は11件です。

  • 投稿日：2020-08-10T23:35:38+09:00

ストップウォッチ作ってみた(HTML,CSS,JavaScript)

ストップウォッチ作ってみた

HTML,CSS(SCSS),JavaScript(not jQuery)でストップウォッチ作ってみました。ストップウォッチ作成は初心者が通り道らしいので私も通ってみました。どこか変なところやアドバイスがあればコメントお願いしますー！

ちなみにSCSSは特に解説してません。

完成形

こんな感じのができました。0.5 倍で見ると見やすいです。CodePen の埋め込み機能を使ってみましたがデフォルトで 0.5 倍にできたらいいんですけどやり方わかりませんでした(笑)

See the Pen zYqGmJz by mkt-engr (@mkt-engr) on CodePen.

特長

  • 時間、分、秒、ミリ秒まで表示する(時間までは使われなそうやけど一応実装した)
  • START,STOP,RESET の 3 つのボタンがある
  • 最初は START ボタンのみ活性化されている
  • STOP ボタンを押すと START という文字が RESTART に変わる
  • STOP ボタンを押すと STOP ボタンが非活性化し RESTART ボタンと RESET ボタンが活性化される
  • RESET ボタンを押すと RESTART ボタンの文字が START に変わる

実装方針

new Date().getTime()がストップウォッチの主役です。MDN の getTime のページによると

1970 年 1 月 1 日 00:00:00 UTC から指定した日時までの経過時間をミリ秒で表した数値。

とあるので

console.log(new Date().getTime());

とすると 1970 年 1 月 1 日 0 時 0 分からの経過時間をミリ秒で表示してくれます。これを利用して START ボタンや STOP ボタンを押した時刻を取得してストップウォッチを実装します。

ストップウォッチには START(RESTART),STOP,RESET の 3 つのボタンがありますがそれに対応して 3 つのイベントリスナーを実装します。

実装の詳細

一番 STOP ボタンの実装に苦労しました。

HTML と JavaScript のイベントリスナー以外の記述

HTML はシンプルです。時刻を表示する部分(<div class="display">)とボタンを表示する部分(<div class="buttons">)に分かれているだけです。

index.html
  <div class="stopwatch_wrapper">
    <div class="display">
      <span id="minutes" class="time">00</span>
      <span id="seconds" class="time">00</span>
      <span id="milli_seconds" class="time">000</span>
    </div>
    <div class="buttons">
      <button class="button" id="start">start</button>
      <button class="button" id="stop" disabled>stop</button>
      <button class="button" id="reset" disabled>reset</button>
    </div>
  </div>

ひとまずこれらのボタンや数値を操作するために以下の記述をします。

script.js
//上から分、秒、ミリ秒
const minutes = document.getElementById('minutes');
const seconds = document.getElementById('seconds');
const milli_seconds = document.getElementById('milli_seconds');

//ボタンたち
const start = document.getElementById('start');
const stop = document.getElementById('stop');
const reset = document.getElementById('reset');

3 つのボタンでそれぞれにイベントリスナーがついています。それらのイベントリスナーが共通でアクセスする変数を定義します。1 番下のpast_moving_timeがストップウォッチの実装の肝かなと思ってます。

script.js
// ストップウォッチを動かすときに用いるsetIntervalの返り値
let timer_id;

// ストップウォッチを動かし始めてからの時間
let stopwatch_time = 0;

// STARTボタンを押した時間
let press_start_time = 0;

// STOPボタンを押した時間
let press_stop_time = 0;

//ストップウォッチが動いていた時間の合計（STARTボタンを押してからSTOPボタンを押すまでの時間の合計）
let past_moving_time = 0;

3 つのイベントリスナー

START ボタン

START ボタンのイベントリスナーのコードは以下の通りです。3 つ特長があるのでそれはコードの後で書きます。

script.js
start.addEventListener('click', () => {
  press_start_time = new Date().getTime();
  timer_id = setInterval(() => {
    stopwatch_time = new Date().getTime() - press_start_time + past_moving_time;

    const time_milli_seconds = `00${Math.floor(stopwatch_time % 1000)}`.slice(
      -3
    );
    const time_seconds = `0${Math.floor((stopwatch_time / 1000) % 60)}`.slice(
      -2
    );
    const time_minutes = `0${
      Math.floor(stopwatch_time / 1000 / 60) % 60
    }`.slice(-2);
    const time_hours = `00${Math.floor(stopwatch_time / 1000 / 60 / 60)}`.slice(
      -3
    );

    //ブラウザに時間を描画する
    minutes.innerHTML = time_minutes;
    seconds.innerHTML = time_seconds;
    milli_seconds.innerHTML = time_milli_seconds;
  }, 1);
  1. START(RESTART)ボタンを押しからの経過時間の取得

まずボタンを押した時間を以下のようにして取得します。

   press_start_time = new Date().getTime();

現在の時間(new Date().getTime())から START ボタンを押した時間を引けば現在の時間が得られます。

   stopwatch_time = new Date().getTime() - press_start_time + past_moving_time;

ストップウォッチを最初にもしくは RESET ボタンを押した後はpast_moving_timeは 0 なので一旦無視してください。これについては STOP ボタンで解説します。

2) slice に関して
.slice(-2)とか.slice(-3)とかは0をパディングしてます。例えば秒を取得するとき 1 秒なら 01 を 23 秒なら 23 に変換しています。どんな秒数でも0を前にパディングしておいて後ろから 2 つ分を slice することでどんな秒数が来ても共通の処理ができます。具体的には以下の通りです。

  • 1→01→01 を取得
  • 23→023→23 を取得

3) ミリ秒、秒、分、時間の取得

stopwatch_timeはあくまでミリ秒です。こいつから秒、分、時間を取り出します。ここではstopwatch_time=123467123とします。

  • ミリ秒

stopwatch_timeは 123467.123 秒を表しています。なので下 3 桁を取得するために以下のように 1000 で割った余りを計算します。

  const time_milli_seconds = `00${stopwatch_time % 1000}`.slice(-3);
  • 秒

stopwatch_timeの 4，5 桁目を取得することを考えます。なのでまずは 1000 で割りMath.floorすることで123467を取得します。ストップウォッチに表示される秒数は 2 桁なので下 2 桁を取得します。60 以上になったら分に繰り上げる必要があるので123467を 60 で割ったあまりを以下のようにして取得します。

  const time_seconds = `0${Math.floor((stopwatch_time / 1000) % 60)}`.slice(-2);

こうすることで 60 秒未満の場合でも 60 秒以上 99 秒以下の場合でも同じ処理で対応できます。例えば 123467 % 60 なら 7 となり123456 % 60 なら 56みたいな感じです。

  • 分,時間

上と同様のロジックで分と時間を以下のようにして取得します。

  const time_minutes = `0${Math.floor(stopwatch_time / 1000 / 60) % 60}`.slice(
    -2
  );
  const time_hours = `0${Math.floor(stopwatch_time / 1000 / 60 / 60)}`.slice(
    -2
  );

STOP ボタン

実装方針ストップウォッチ実装の肝と言っていたpast_moving_timeについて解説します。シンプルに STOP ボタンが押されてclearIntervalをするだけだと RESTART ボタンを押したときに再び 0 秒から始まってしまいます。なぜかというと START(RESTART)ボタンを押すたびにイベントリスナーが走って以下のようにpress_start_timeが更新されるからです。

START ボタンのイベントリスナーには以下のような記述がありました。

script.js
start.addEventListener('click', () => {
  press_start_time = new Date().getTime();
  timer_id = setInterval(() => {
  stopwatch_time = new Date().getTime() - press_start_time + past_moving_time;

RESTART を押すとストップウォッチが再び 0 から始まってしまうことを避けるために定義した変数がpast_moving_timeです。

STOP ボタンのイベントリスナーのコードは以下の通りです。

script.js
stop.addEventListener('click', () => {
  clearInterval(timer_id);
  start.innerHTML = 'restart';

  press_stop_time = new Date().getTime();
  past_moving_time += press_stop_time - press_start_time;

  //STOPボタンを1度押すと非活性され、STARTボタンとRESETボタンは活性化される
  stop.disabled = true;
  start.disabled = false;
  reset.disabled = false;
});

ストップウォッチを動かしている時間の取得

past_moving_time に関してやってることはめっちゃシンプルです。STOP ボタンを押した時間から START ボタンを押した時間を引けばストップウォッチが動いていた時間を以下のように導出できます。

 past_moving_time += press_stop_time - press_start_time;

ここで+=をしているのは何度も STOP,RESTART が押されることを想定してのことです。

START ボタンのイベントリスナーの記述を見ると以下のようにpast_moving_time(ストップウォッチが動いていた時間の合計)がstopwatch_timeに加算されています。

script.js
start.addEventListener('click', () => {
  press_start_time = new Date().getTime();
  timer_id = setInterval(() => {
    stopwatch_time = new Date().getTime() - press_start_time + past_moving_time;

RESET ボタン

RESET ボタンの実装が一番簡単です。やることは以下の 2 つです。

  • ストップウォッチの停止(clearInterval)
  • 初期化(ブラウザの表示,ストップウォッチの表示をするために用いた変数)

RESET ボタンのイベントリスナーのコードは以下の通りです。

script.js
reset.addEventListener('click', () => {
  clearInterval(timer_id);

  start.innerHTML = 'start';

  //ブラウザの表示を初期化
  minutes.innerHTML = '00';
  seconds.innerHTML = '00';
  milli_seconds.innerHTML = '000';

  //変数を初期化
  stopwatch_time = 0;
  press_start_time = 0;
  press_stop_time = 0;
  past_moving_time = 0;

  //RESETボタンを押したらSTARTボタンしか押せない状態にする
  start.disabled = false;
  stop.disabled = true;
  reset.disabled = true;
});

CSS ファイル

SCSS を使っていない方もいると思うのでコンパイルした CSS をここに書いておきます。ちなみに VS Code のプラグインを使うと Webpack とかの準備をすることなく簡単に SCSS が使えるのでおすすめです。ここにプラグインに関して分かりやすく書いてありました。

style.css
style.css
body {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  font-size: 20px;
}

.buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.buttons .button {
  text-transform: uppercase;
  padding: 1rem 2rem;
  margin-right: 1rem;
  color: white;
  border: none;
  cursor: pointer;
  -webkit-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
  background: #4676d7;
  border-radius: 5px;
  font-size: 1.5rem;
  border: 2px solid transparent;
  -webkit-box-shadow: 0 0 8px gray;
          box-shadow: 0 0 8px gray;
  min-width: 225px;
}

.buttons .button:hover {
  background-color: transparent;
  color: #252020;
  border-color: #4676d7;
}

.buttons .button:disabled {
  background-color: #ccc;
}

.buttons .button:disabled:hover {
  color: white;
  border-color: transparent;
  cursor: default;
}

.display {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 2rem;
  background-color: #d3b3ab;
}

.display .time {
  font-size: 5rem;
}

.display .time:nth-child(1)::after {
  content: ':';
}

.display .time:nth-child(2)::after {
  content: ':';
}

.display .time:nth-child(3)::after {
  content: '.';
}
/*# sourceMappingURL=style.css.map */

展望

  • START ボタンを STOP ボタンは 1 つにするべきかな？
  • React や Vue でも作りたい
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-10T23:07:28+09:00

【Google HTML / CSSスタイルガイド】を初めて読んだので、一言で分かるようにまとめてみた -基本・HTML編-

どうも7noteです。フロントエンジニア4年目です。

何万行とHTML・CSSを書いてきたので綺麗なソースにはそこそこ自信がありました。
ですが、Google HTML / CSSスタイルガイドを読んで唖然・・・
できてない事多いなぁ。。。と。

あくまで参考程度でいいとは思うのですが、プロとしてはやっぱり推奨されている綺麗な書き方で書きたい！！
きっとこの記事を読んでくださっている方も、ソースは綺麗に書きたいと思っているはず！

class名の命名則やインデントについての書き方のルールを見直すきっかけになるかも！
またSEO対策には直接影響はないかもしれないが、クローラーの最適化にはなるようなので、知っていて損はない！！！

というわけで、早速google翻訳に頼りながらガイドラインを読んでみた。↓

1.背景

このドキュメントでは、HTMLとCSSのフォーマットとスタイルのルールを定義します。コラボレーション、コード品質の向上、サポートインフラストラクチャの有効化を目的としています。これは、GSSファイルを含む、HTMLおよびCSSを使用する未加工の作業ファイルに適用されます。ツールは、一般的なコード品質が維持されている限り、自由に難読化、縮小、およびコンパイルできます。

ふむふむなるほど。

2.一般

2.1一般的なスタイル規則

2.1.1プロトコル

『他ドメインからファイルを読み込むとき（特にjQueryやapi等）はhttpsを使いなさい』とのこと。

<!-- 非推奨 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- 推奨 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

また関連する話として、sslについてはgoogleが2018年の7月から常時SSL化を推奨しているので、新しく制作するサイトに関しても常時SSLにするのは一般常識になっているのかなと思います。
参考：https://www.idcf.jp/rentalserver/aossl/browser/required-chrome68/

2.2一般的なフォーマット規則

2.2.1インデント

『インデントはスペース2個にしなさい』だって。（タブで書いてた・・・）

<!-- 非推奨 -->
<ul>
    <li>Fantastic
    <li>Great
</ul>

<!-- 推奨 -->
<ul>
  <li>Fantastic
  <li>Great
</ul>

タブとスペースが混同するのはダブ－ですよ、ともかいてます。（・・・はいすみません。面白くないです。次行きます。）

2.2.2大文字

『HTML・CSSに大文字は使うな』とのこと。ただし文字列は除く。

<!-- 非推奨 -->
<A HREF="/">Home</A></script>
<!-- 推奨 -->
<img src="google.png" alt="Google">

BEMの書き方なんかを見ても基本小文字しか書かれてないので大文字で書いている人は少なそう。でもたまに「class="areaBlock"」みたいなclassを見かけることがあるので使わないように注意が必要。

2.2.3末尾の空白

『不要な空白文字は入れるな』とのことです。

<!-- 非推奨 -->
<p>What?_
<!-- 推奨 -->
<p>Yes please.

誤って入ってしまわないように気を付けましょう。
エディタによっては不要な空白を警告してくれたり、不可視文字を見えるようにできたり、あとで一括削除してくれるものもあるようなのでツールに頼ってもいいかもしれませんね！
改行・空白・タブ削除ツール

2.3一般的なメタルール

2.3.1エンコーディング

『エンコーディングはUTF-8（BOMなし）を使いましょう』

<!-- 推奨 -->
<meta charset="utf-8">

はーい、わかりました！
（エンコーディングって何？という方はこちら→https://wa3.i-3-i.info/word135.html）

『cssでは指定しないように。』とも書いてます。

2.3.2コメント

『必要に応じてコードを説明するために使っていいよ』とのこと。

<!-- 推奨 -->
↑こんなかんじでコメントを書いて良い

ありがたい。さすがgoogle先生。

2.3.3アクションアイテム

『コメントの書き方でTODO:～～～って書き方をしてもいいよ』
な、、なんだこれ、見たことないぞ・・・。

<!-- 推奨 -->
<!-- TODO: remove optional tags -->
<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>

・・・調べた情報によると、「TODO（ユーザー名など）:内容」という様に書くらしい。
まぁコメントなのであまり使う場面は少ないのかな。。。

3.HTML

3.1 HTMLスタイルのルール

3.1.1ドキュメントタイプ

『HTML5を使いましょう。』
『DOCTYPEは<!DOCTYPE html>このように書く』

<!-- 推奨 -->
<!DOCTYPE html>

『void要素は閉じるな。』

<!-- 非推奨 -->
<br />
<!-- 推奨 -->
<br>

HTML5の基本的な書き方ですね。

3.1.2 HTMLの妥当性

『<!DOCTYPE html>の宣言や、閉じタグなどは忘れず正しく書きましょう』

<!-- 非推奨 -->
<title>Test</title>
<article>This is only a test.

<!-- 推奨 -->
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>

3.1.3セマンティクス

『目的に応じた要素を正しく使ってください』

<!-- 非推奨 -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- 推奨 -->
<a href="recommendations/">All recommendations</a>

なんでもかんでもdivやspanで書かず、段落にはp、アンカーリンクにはaを使いましょうって話。

3.1.4マルチメディアのフォールバック

『映像や画像が表示できなかった時の代替情報を用意しなさい』

<!-- 非推奨 -->
<img src="spreadsheet.png">
<!-- 推奨 -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

img要素には必ずaltを書きなさい的な話ですね。

altについては過去に記事を書いたので参考にしてください。
→【初心者でもわかる】imgタグのaltの付け方

3.1.5懸念の分離

『HTMLとCSSとjavascriptは分けて書きましょう』的なことが書いてます。

<!-- 非推奨 -->
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML sucks</h1>
<center>I can’t believe there’s no way to control the styling of
  my website without doing everything all over again!</center>

<!-- 推奨 -->
<link rel="stylesheet" href="default.css">

要素（タグ）の構造はHTMLファイルに。見た目のスタイルはCSSファイルに。などそれぞれ役割をはっきりさせ、住み分けさせることでメンテナンス性を上げてくださいねという話のようです。
htmlのタグに直書きでcssは書けますができるだけ書かないように注意しましょう！

3.1.6エンティティ参照

『実体参照する必要のない文字は実体参照で書かないで！』と。

<!-- 非推奨 -->
ユーロはこう書きます。&ldquo;&eur;&rdquo;。
<!-- 推奨 -->
ユーロはこう書きます。"€"。

たとえばユーロ（€）などは実体参照が不要な文字なので、€と検索してそのまま使いましょう。

3.1.7オプションのタグ

『<html>,<head>,<body>等は省略可能です。省略しましょう。』

<!-- 非推奨 -->
<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>

<!-- 推奨 -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

え、省略していいんですね。いや、省略できるのは知っていたけど、毎回律儀に書いてた。。。。
明日から省略して書こうっと。

省略できるタグをまとめているQiitaの記事がありました。
→https://qiita.com/labocho/items/54fd70c73ced35c8ba49

3.1.8 type属性

『外部ファイルを読み込むとき、type属性は省略する』

<!-- 非推奨 -->
<link rel="stylesheet" href="https://www.google.com/css/maia.css" type="text/css">
<!-- 推奨 -->
<link rel="stylesheet" href="https://www.google.com/css/maia.css">

link要素やscript要素のtype="text/css"やtype="text/script"は省略しましょうとのこと。いつもコピペしてたから付けてしまってそう・・・

3.2 HTMLのフォーマットルール

3.2.1一般的なフォーマット

『ulやtableの子要素はちゃんとインデントを取りなさい』

<!-- 非推奨 -->
<ul>
<li>Moe
<li>Larry
<li>Curly
</ul>

<!-- 推奨 -->
<table>
  <thead>
    <tr>
      <th scope="col">Income
      <th scope="col">Taxes
  <tbody>
    <tr>
      <td>$ 5.00
      <td>$ 4.50
</table>

かしこまりました。

3.2.2 HTMLの行折り返し

『htmlのタグが属性が増えてしまい異常に長い時は、途中で改行してもいいよ』

<!-- 推奨 -->
<md-progress-circular
    md-mode="indeterminate"
    class="md-accent"
    ng-show="ctrl.loading"
    md-diameter="35">
</md-progress-circular>

見やすさ重視でタグの途中でも改行していいよってgoogle先生が言ってくれている、ありがとうgoogle先生！！！

3.2.3 HTML引用符

『属性を書く時はダブルクォーテーション（"）でくくりなさい。』

<!-- 非推奨 -->
<a class='maia-button maia-button-secondary'>Sign in</a>
<!-- 推奨 -->
<a class="maia-button maia-button-secondary">Sign in</a>

class=""やalt=""などの属性はシングルクォーテーション（'）ではなくダブルクォーテーション（"）を使いましょう。

基礎・HTML編はここまで！
CSS編はこちらから！

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-10T21:57:38+09:00

シンプルな申し込みフォームを作った

HTMLやCSSを勉強として、シンプルな申し込みフォームを作りました。
どんなフォームをどのように作ったかを簡潔にまとめました。

成果物

スクリーンショット 2020-08-10 21.37.42.png

作ったものはこんな感じ。
会員制サイトにありそうなシンプルな申し込みフォームを作りました。

HTML

<div class="content">
   <h1>入会申し込み</h1>
   <p>入会するには、次のフォームに必要事項をご記入ください。</p>
   <div class="controll">
      <label for="myemail">メールアドレス <span class="required">必須</span></label>
      <input id="myemail" type="email" name="email">
   </div>
   <div class="controll">
      <label for="mypassword">パスワード <span class="required">必須</span></label>
      <input id="mypassword" type="password" name="password">
   </div>
   <div class="controll">
      <button type="submit">登録する</button>
   </div>
</div>

フォームのタイトルはh1タグで、タイトル直下の注釈をpタグで出力。
フォームの送信項目であるメールアドレスとパスワードはinputで出力して、
buttonタグがクリックされた時に、inputタグの入力値が送信される想定。

でもフォームって言うからにはformタグを使った方が良かったなぁ・・・
formタグで書き換えたやつがこんな感じ↓↓

<form class="content">
   <h1>入会申し込み</h1>
   <p>入会するには、次のフォームに必要事項をご記入ください。</p>
   <div class="controll">
      <label for="myemail">メールアドレス <span class="required">必須</span></label>
      <input id="myemail" type="email" name="email">
   </div>
   <div class="controll">
      <label for="mypassword">パスワード <span class="required">必須</span></label>
      <input id="mypassword" type="password" name="password">
   </div>
   <div class="controll">
      <input class="submit" type="submit" value="登録する">
   </div>
</form>

全体を囲っていたdivタグがformタグになって、「登録する」ボタンのタグがinputタグになる感じですね。
本来であればformタグには送信先等を定義してあげます。

CSS

個人的にcssは苦手です。
まだお洒落なアニメーションを作るなんてことはできませんが、とにかくシンプルな見た目にすること意識しました。

.submit {
    width:100%;
    background-color: #2096f3;
    color:#fff;
    padding:15px;
    border: 0;
    border-radius:5px;
    box-shadow: 0 0 8px rgba(0,0,0,.4);

}

.required {
    color:#f33;
    font-size: .9em;
    padding: 3px;
    background-color: #fee;
    font-weight: bold;
}

要点だけ。

「.submit」では「登録する」ボタンのデザインを当てています。
色とか枠はいいとして、box-shadowの各設定値は注意です。
x軸、y軸、影の濃さ、影の色（r,g,b,不透明度）をそれぞれ設定します。

まとめ

今回は簡単な申し込みフォームを作りました。
cssの色付けで原色は使わない方が良さそうですね。
色使いなんかはこれから色々と作っていく中で学んでいきます。

応用としてフォームの送信先を作成して、DBに送信内容を登録して、、、なんてところまで作れるようになると良さそう。

参考

[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-10T21:17:53+09:00

liタグで作成したリンクの下線がtext-decorationで消せない

はじめに

前提条件
railsでのアプリケーション作成

エラー？

下記のように確かにliタグに対してtext-decorationを設定しているのに適用されない

application.html.erb
<ul class="lists">
 <li class="list"><%= link_to "エクササイズ", "#" %></li>
</ul>
application.scss
.lists {
  display: flex;
  align-items: center;
  list-style: none;
}

.list {
  padding: 1px 20px;
  border-right: 1px solid black;
  text-decoration: none;
  color: #433f3f;
}

解決方法

liタグではなくlink_toメソッドにclassを設定

application.html.erb
<ul class="lists">
 <li><%= link_to "エクササイズ", "#", class: "list" %></li>
</ul>

scssは特に変更する必要なし

これでliタグ内のリンクの下線を消せるようになると思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-10T21:04:22+09:00

引数に最小値（min）最大値(max)を入れるとランダムな整数を返してくれる関数

ランダムな整数が欲しい！

そんなときはこの処理を使おう！
自分がよく使っている関数です。

const rand = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

なんのこっちゃない処理ですが
ブラウザゲーム作成時によく使います。

rand(1, 10) //1〜１０までのランダムな整数を返してくれます

いろいろと応用が効くので使いやすい。
DOM操作時でも、例えばランダムに画面外からやってくる感じを演出するときにも使えます。

element.style.transform = `translate(${rand(-100, 100)}%, ${rand(-100, 100)}%)`

とかってしてやると
縦軸、横軸ランダムな位置に配置することができるので、
css animationと組み合わせてやると
ランダムな位置に発生して所定の位置へ移動してくる動きを要素に与えることができます。

const els = document.querySelectorAll('[class^=devicon-]')
      els.forEach(el => {
        el.style.transform = `translate(${rand(-100, 100)}%, ${rand(-100, 100)}%)`
        el.classList.add('icon-move')
        setInterval(() => {
          el.style.zIndex = this.rand(-1, 1)
        }, this.rand(4000, 8000))
      })

4秒から８秒のうちランダムな秒数後にz-indexを上げ下げすることで表示、非表示をコントロールしています。
実際に私のポートフォリオの「study」ページにて使用していますので
ぜひ動きをみてにきてください。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-10T21:03:18+09:00

自分的tailwindcss導入時スタイルガイド

この記事の目的

個人的な開発をするときのcssのルール。考え方とかもまとめるのでcss設計を考える際の実例として読んでもらえると。

条件

  • tailwindcss導入
  • rails6
  • railsのviewを利用

基本方針

  • SMACSSをベースに
  • できるだけ保守性を上げたいので抽象度を上げて使い回しできるようにしたい
  • オリジナルのカスタマイズもできるようにしたい

ルール

  • SMACSSのルールを踏襲し、下記に分ける
    • ベース
    • レイアウト
    • モジュール
    • ステート
    • テーマ
  • レイアウト
    • class名にl-をつける
    • コンテンツの横幅調整はtailwindcssのcontainerで行う
  • 単語は_で区切る
  • モジュール：部品をここで定義していく
    • btn
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-10T20:24:27+09:00

Qiitaを始める。

今日から学習したことはQiitaで書いていこうと思う。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-10T16:09:12+09:00

【ただの自己満】VueCLIで使いやすいCSS画像アニメーション３１選

スクリーンショット 2020-08-10 16.07.33.png

こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)

Web制作で使えるかは保証できません。自己判断で修正するなりして参考程度に使ってください。

Webデザイナーに興味のある方はこちらも合わせてどうぞ↓
スクリーンショット 2020-08-08 16.41.27.png

【回転×サイズ拡大/縮小】CSS画像アニメーション３選『解説付』

動きは下の画像のような感じになります

１. hoverで回転×拡大する画像アニメーション

image-animation-size-rotate1 (1).png

２. hover前後でサイズが拡大・縮小×回転する画像アニメーション

image-animation-size-rotate2 (1).png

３. 回転×拡大でギャラリーのように一覧表示される画像アニメーション

image-animation-size-rotate3 (1).png

:point_down:コードを確認する

スクリーンショット 2020-08-10 15.50.19.png

【rotate×scale】画像が回転・拡大するCSSアニメーション３選(解説あり)

動きは下の画像のような感じになります

１. rotate×box-shadowでリアルすぎる画像回転アニメーション

images-rotate-animation-3picks1 (1).png

２. rotate×scale(拡大)で失敗しない画像回転アニメーション

images-rotate-animation-3picks2 (1).png

３. rotate×scale(拡大)×filterで想像を上回る画像回転アニメーション

images-rotate-animation-3picks3 (1).png

:point_down:コードを確認する

スクリーンショット 2020-07-31 0.13.11.png

【transform rotate(360deg)×flexbox】画像が回転+伸縮するCSSアニメーション３選

動きは下の画像のような感じになります

１. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション

transform-rotate-flexbox-animation1-228x300 (1).png

２. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション

transform-rotate-flexbox-animation2-265x300 (1).png

３. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション

transform-rotate-flexbox-animation3-275x300 (1).png

:point_down:コードを確認する

スクリーンショット 2020-07-31 0.16.43.png

【徹底解説】flexを応用して画像が伸縮するCSSアニメーション３選

動きは下の画像のような感じになります

１. flexで２つの画像が伸縮する画像アニメーション

flex-bigger-images-animation1-265x300 (1).png

２. flexでhoverした画像が100％拡大する画像アニメーション

flex-bigger-images-animation2-266x300 (1).png

３. filterでエフェクト＋flexで３つの画像が伸縮する画像アニメーション

flex-bigger-images-animation3-300x249 (1).png

:point_down:コードを確認する

スクリーンショット 2020-07-31 0.20.11.png

【flexboxのjustify−content：center４選】CSS画像アニメーションを画面中央に配置

動きは下の画像のような感じになります

１. 半分の背景が左右から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

flexbox-justify−content-animation-image1-300x74 (1).png

２. 背景が両斜めから現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

flexbox-justify−content-animation-image2-300x76 (1).png

３. 背景が上下から現れる自動ドアのようなCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

flexbox-justify−content-animation-image3-300x77 (1).png

４. 半分の背景が上下から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

flexbox-justify−content-animation-image4-300x77 (1).png

:point_down:コードを確認する

スクリーンショット 2020-07-31 0.22.35.png

【Web制作に最適】背景を重ねるCSS画像アニメーション４選

動きは下の画像のような感じになります

１. 半分の背景が左右から現れるCSS画像アニメーション

4picks-images-background-animation1-300x298.png

２. 背景が両斜めから現れるCSS画像アニメーション

4picks-images-background-animation2-287x300.png

３. 背景が上下から現れる自動ドアのようなCSS画像アニメーション

4picks-images-background-animation3-282x300.png

４. 半分の背景が上下から現れるCSS画像アニメーション

4picks-images-background-animation4-300x293.png

:point_down:コードを確認する

スクリーンショット 2020-07-31 0.26.30.png

【絶対使える！】hoverで背景がなめらかに動くCSS画像アニメーション４選

動きは下の画像のような感じになります

１. 右端から２つの背景が現れて文字が浮き出るCSS画像アニメーション

four-good-image-animation1-271x300.png

２. 右端から背景がスーッと表示されるCSS画像アニメーション

four-good-image-animation2-264x300.png

３. 下から２つの背景がボンっボンと画像全体を覆うCSS画像アニメーション

four-good-image-animation3-273x300.png

４. 下から背景がスーッと現れるCSS画像アニメーション

four-good-image-animation4-300x298.png

:point_down:コードを確認する

スクリーンショット 2020-07-31 0.29.02.png

マウスオーバーで画像背景が切り替わるCSS【trasition】アニメーション ４選

動きは下の画像のような感じになります

１. マウスオーバーで二つの背景が左端から現れる画像transitionアニメーション

hover-image-background-change1-279x300.png

２. マウスオーバーで背景が左端から現れるシンプルな画像transitionアニメーション

hover-image-background-change2-268x300.png

３. マウスオーバーで２つの背景が上部から落ちてくる画像transitionアニメーション

hover-image-background-change3-262x300.png

４. マウスオーバーで背景が上部から落ちてくるシンプルな画像transitionアニメーション

hover-image-background-change4-295x300.png

:point_down:コードを確認する

スクリーンショット 2020-07-31 0.32.42.png

transitionでCSS画像背景アニメーション３選(画像を横並びに配置)

動きは下の画像のような感じになります

１. transitionの速度調整で画像背景が階段のように現れるアニメーション

transition-animation-images-background1-280x300.png

２. transitionの速度調整で画像背景が上から落ちて現れるアニメーション

transition-animation-images-background2-260x300.png

３. 画像背景がクルクルと手裏剣のように表示されるアニメーション

transition-animation-images-background3-282x300.png

:point_down:コードを確認する

スクリーンショット 2020-07-31 0.37.22.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-10T16:09:12+09:00

【ただの自己満】初心者向けの使えそうなCSS画像アニメーション３１選

スクリーンショット 2020-08-10 16.07.33.png

こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)

Web制作で使えるかは保証できません。自己判断で修正するなりして参考程度に使ってください。

Webデザイナーに興味のある方はこちらも合わせてどうぞ↓
スクリーンショット 2020-08-08 16.41.27.png

【回転×サイズ拡大/縮小】CSS画像アニメーション３選『解説付』

動きは下の画像のような感じになります

１. hoverで回転×拡大する画像アニメーション

image-animation-size-rotate1 (1).png

２. hover前後でサイズが拡大・縮小×回転する画像アニメーション

image-animation-size-rotate2 (1).png

３. 回転×拡大でギャラリーのように一覧表示される画像アニメーション

image-animation-size-rotate3 (1).png

:point_down:コードを確認する

スクリーンショット 2020-08-10 15.50.19.png

【rotate×scale】画像が回転・拡大するCSSアニメーション３選(解説あり)

動きは下の画像のような感じになります

１. rotate×box-shadowでリアルすぎる画像回転アニメーション

images-rotate-animation-3picks1 (1).png

２. rotate×scale(拡大)で失敗しない画像回転アニメーション

images-rotate-animation-3picks2 (1).png

３. rotate×scale(拡大)×filterで想像を上回る画像回転アニメーション

images-rotate-animation-3picks3 (1).png

:point_down:コードを確認する

スクリーンショット 2020-07-31 0.13.11.png

【transform rotate(360deg)×flexbox】画像が回転+伸縮するCSSアニメーション３選

動きは下の画像のような感じになります

１. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション

transform-rotate-flexbox-animation1-228x300 (1).png

２. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション

transform-rotate-flexbox-animation2-265x300 (1).png

３. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション

transform-rotate-flexbox-animation3-275x300 (1).png

:point_down:コードを確認する

スクリーンショット 2020-07-31 0.16.43.png

【徹底解説】flexを応用して画像が伸縮するCSSアニメーション３選

動きは下の画像のような感じになります

１. flexで２つの画像が伸縮する画像アニメーション

flex-bigger-images-animation1-265x300 (1).png

２. flexでhoverした画像が100％拡大する画像アニメーション

flex-bigger-images-animation2-266x300 (1).png

３. filterでエフェクト＋flexで３つの画像が伸縮する画像アニメーション

flex-bigger-images-animation3-300x249 (1).png

:point_down:コードを確認する

スクリーンショット 2020-07-31 0.20.11.png

【flexboxのjustify−content：center４選】CSS画像アニメーションを画面中央に配置

動きは下の画像のような感じになります

１. 半分の背景が左右から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

flexbox-justify−content-animation-image1-300x74 (1).png

２. 背景が両斜めから現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

flexbox-justify−content-animation-image2-300x76 (1).png

３. 背景が上下から現れる自動ドアのようなCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

flexbox-justify−content-animation-image3-300x77 (1).png

４. 半分の背景が上下から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置

flexbox-justify−content-animation-image4-300x77 (1).png

:point_down:コードを確認する

スクリーンショット 2020-07-31 0.22.35.png

【Web制作に最適】背景を重ねるCSS画像アニメーション４選

動きは下の画像のような感じになります

１. 半分の背景が左右から現れるCSS画像アニメーション

4picks-images-background-animation1-300x298.png

２. 背景が両斜めから現れるCSS画像アニメーション

4picks-images-background-animation2-287x300.png

３. 背景が上下から現れる自動ドアのようなCSS画像アニメーション

4picks-images-background-animation3-282x300.png

４. 半分の背景が上下から現れるCSS画像アニメーション

4picks-images-background-animation4-300x293.png

:point_down:コードを確認する

スクリーンショット 2020-07-31 0.26.30.png

【絶対使える！】hoverで背景がなめらかに動くCSS画像アニメーション４選

動きは下の画像のような感じになります

１. 右端から２つの背景が現れて文字が浮き出るCSS画像アニメーション

four-good-image-animation1-271x300.png

２. 右端から背景がスーッと表示されるCSS画像アニメーション

four-good-image-animation2-264x300.png

３. 下から２つの背景がボンっボンと画像全体を覆うCSS画像アニメーション

four-good-image-animation3-273x300.png

４. 下から背景がスーッと現れるCSS画像アニメーション

four-good-image-animation4-300x298.png

:point_down:コードを確認する

スクリーンショット 2020-07-31 0.29.02.png

マウスオーバーで画像背景が切り替わるCSS【trasition】アニメーション ４選

動きは下の画像のような感じになります

１. マウスオーバーで二つの背景が左端から現れる画像transitionアニメーション

hover-image-background-change1-279x300.png

２. マウスオーバーで背景が左端から現れるシンプルな画像transitionアニメーション

hover-image-background-change2-268x300.png

３. マウスオーバーで２つの背景が上部から落ちてくる画像transitionアニメーション

hover-image-background-change3-262x300.png

４. マウスオーバーで背景が上部から落ちてくるシンプルな画像transitionアニメーション

hover-image-background-change4-295x300.png

:point_down:コードを確認する

スクリーンショット 2020-07-31 0.32.42.png

transitionでCSS画像背景アニメーション３選(画像を横並びに配置)

動きは下の画像のような感じになります

１. transitionの速度調整で画像背景が階段のように現れるアニメーション

transition-animation-images-background1-280x300.png

２. transitionの速度調整で画像背景が上から落ちて現れるアニメーション

transition-animation-images-background2-260x300.png

３. 画像背景がクルクルと手裏剣のように表示されるアニメーション

transition-animation-images-background3-282x300.png

:point_down:コードを確認する

スクリーンショット 2020-07-31 0.37.22.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-10T15:07:19+09:00

Flexbox入門

Flexboxを使うとfloatで実現していたような縦並びや横並びのレイアウト、または折り返しのレイアウトを簡単に組むことができます。

横並びにする display: flex

display: flexは指定した要素の子要素を横並びにします。

使い方

横並びにしたい要素の親要素にdisplay: flexを指定します。

index.html
<ul class="flex-list">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>
style.css
.flex-list {
  display: flex;
}

子要素の幅を親要素に合わせて伸縮させる flex: auto

flex: autoは指定した要素の幅を親要素に合わせて伸縮させることができます。

index.html
<ul class="flex-list">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>
style.css
.flex-list {
  display: flex;
}

.flex-list li {
  flex: auto; /* 調整したい要素に適用する */
}

子要素のサイズに応じて折り返す flex-wrap: wrap

flex-wrap: wrapを指定すると、子要素のサイズに応じて折り返すことができます。
PC、タブレット、スマホで一列の表示個数を変えたいというのがよくあるユースケースだと思うので、
メディアクエリと合わせて使いましょう。

使い方

折り返したい要素の親要素にflex-wrap: wrapを指定します。
折り返したい要素自身には列数に応じたwidthを指定します。

index.html
<ul class="flex-list">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>
style.css
.flex-list {
  display: flex;
  flex-wrap: wrap;
}

.flex-list li {
  flex: auto;
  width: 50%; /* 一列に2つ表示する */
}

子要素を上から下に並べる flex-direction: column

flex-direction: columnは子要素を上から下へ並べます。

使い方

縦に並べたい要素の親要素にflex-direction: columnを指定します。

index.html
<ul class="flex-list">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>
style.css
.flex-list {
  flex-direction: column;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-08-10T14:38:55+09:00

子要素が全てfloatでも、親要素が子要素を含む高さを持つように設定する

親要素の高さは子要素を包む高さとなりますが、
子要素が全てfloatの時、親要素の高さは0となってしまいます。
これは、floatが「浮いている」という意味で、親要素から見るとfloatの子要素は存在しないように見えるためです。

floatの解除

子要素が全てfloatでも、親要素が高さを持つように設定してみます。
floatはclear: left;で「浮いている」状態を解除できます。
clear: left;を適用するためだけの空のタグを用意します。
空タグとclearでfloatを解除するのはよく使うテクニックらしいです。

index.html
<div>
  <div class="float">
    ...
  </div>
  <div class="float">
    ...
  </div>
  <div class="clear"></div> <!-- `clear: left;`を設定するための空タグ -->
</div>
style.css
.float {
  float: left;
}

.clear {
    clear: left;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧