What's New Qiita

20210403のCSSに関する記事は17件です。

  • 投稿日：2021-04-03T23:36:31+09:00

4/3日報_Qiita投稿#2

今日の学び

-Progate

HTML & CSS初級編9ページまで終了し、仕組み、タグ、要素等を理解できた。
疑問に感じた点は5～10分を目安に自分で考え、解決できない場合はLINEのオープンチャットで問いを投げるようにしている。
時間を掛けすぎないように、4/6までに初級編fixを目指す。

-ポートフォリオ自己紹介サイト作成

本日はノータッチ。
HTML & CSSの学習コース終了後に取り掛かる。

-転職先模索

じっくり学習した後に年明け就職を考えていたが、現場で学ぶことを優先に考えた結果、6月就職を目指してプログラミング学習に取り組む。

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

leaflet.jsで地図に円を描画

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
    <title>Leaflet</title>
</head>
<body>
    <div id="map"></div>
    <script src="js/leaflet/map.js"></script>
</body>
</html>
css/style.css
#map {
    height: 98vh;
}
js/map.js
/// <reference path="typings/index.d.ts" />
var map = L.map('map').setView([35, 135], 16);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.circle([35, 135], {
    color: 'red',
    fillColor: 'red',
    fillOpacity: 0.5,
    radius: 500
}).addTo(map);

スクリーンショット 2021-04-03 22.31.35.png

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

leaflet.jsで地図にmarkerを置く

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
    <title>Leaflet</title>
</head>
<body>
    <div id="map"></div>
    <script src="js/leaflet/map.js"></script>
</body>
</html>
css/style.css
#map {
    height: 98vh;
}
js/map.js
/// <reference path="typings/index.d.ts" />
var map = L.map('map').setView([35, 135], 16);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([35, 135]).addTo(map)

スクリーンショット 2021-04-03 22.28.35.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-04-03T20:45:38+09:00

jsx,tsxでEmmetを使用する方法

はじめに

ReactでEmmetが使えたら便利だな〜って思って調べたら利用出来たのでご紹介します。
VScodeだと素の状態でもEmmetがインストールされているのでおすすめです。

方法

方法はsetting.jsonを弄るだけ。
command + , (Windows: Ctrl + ,)で設定を開きます。
検索にsetting.jsonと入れてsetting.jsonを編集をクリック

その後setting.jsonに

setting.json
{
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "typescript": "typescriptreact",
    },
}

を入れればtsx,jsxでEmmetが使用できます。

さいごに

Emmetを愛していたのでEmmetが使用できない環境は苦痛でしたが解決しました。
Emmetを使い慣れてる人にはおすすめです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-04-03T20:39:25+09:00

leaflet.jsで地図を描画

R/leafletを使ってたけど、
leaflet.jsを使った方が使えるプラグインも多そうなのでリハビリ。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-widtho, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
    <title>Leaflet</title>
</head>
<body>
    <div id="map" style="height: 98vh;"></div>
    <script>
        var map = L.map('map').setView([35, 135], 16);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
    </script>
</body>
</html>

スクリーンショット 2021-04-03 20.37.39.png

ファイルを分けて書くと下記のような感じ。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-widtho, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
    <title>Leaflet</title>
</head>
<body>
    <div id="map"></div>
    <script src="js/map.js"></script>
</body>
</html>
css/style.css
#map {
    height: 98vh;
}

jsフォルダで下記を実行し、

typings install dt~leaflet --global --save

js/map.jsに/// <reference path="typings/index.d.ts" />を追記するとVisual Studio Codeでのleaflet.jsの実装が楽。

js/map.js
/// <reference path="typings/index.d.ts" />

var map = L.map('map').setView([35, 135], 16);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

色々と思い出せない。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-04-03T20:39:25+09:00

leaflet.jsでOpenStreetMapを描画

R/leafletを使ってたけど、leaflet.jsの方が使えるプラグインも多いので練習。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
    <title>Leaflet</title>
</head>
<body>
    <div id="map"></div>
    <script src="js/map.js"></script>
</body>
</html>

スクリーンショット 2021-04-03 22.24.27.png

ファイルを分けて書くと下記のような感じ。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-widtho, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
    <title>Leaflet</title>
</head>
<body>
    <div id="map"></div>
    <script src="js/map.js"></script>
</body>
</html>
css/style.css
#map {
    height: 98vh;
}
js/map.js
/// <reference path="typings/index.d.ts" />
var map = L.map('map').setView([35, 135], 16);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

map.jsのあるフォルダで下記を実行し、

typings install dt~leaflet --global --save

map.jsに/// <reference path="typings/index.d.ts" />を追記するとVisual Studio Codeでのleaflet.jsの実装が楽になる。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-04-03T20:14:28+09:00

HTMLで絵を書く

Image.png

上の画像のようなものが作れます。

index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <meta charset="utf-8" />
</head>
<body style="background-color:#D0D0D0;">
  <div class="parent">
    <div class="bg">
      <canvas id="SimpleCanvas" width="640" height="640" style="background-color:#FFFFFF;"></canvas>
      <canvas id="SimpleCanvas-layer2" width="120" height="120" style="background-color:rgba(255,0,0,0);;"></canvas>
      <canvas id="SimpleCanvas-layerFont1" width="120" height="120" style="background-color:rgba(0,0,0,0);;"></canvas>
    </div>
  </div>
</body>
<link rel="stylesheet" href="./layout.css" type="text/css">
<script type="text/javascript" src="./draw.js"></script>
</html>
layout.cs
.parent {
    width: 720px;
    height: 0px;
    position: relative; /*relativeに設定*/
    padding: 0em 0em;
    margin:0;
    z-index: 0;
}
.l1 {
    top: 20px;
    left: 0px;
    width: 720px; 
    padding: 0em 0em;
    position: relative; 
    z-index: 2;
}
.bg {
    top: 0px;   /*動的に変更されるので適当*/
    left: 0px;  /*動的に変更されるので適当*/
    width: 400px; /*撮影枠サイズ*/ 
    height: 60px; /*撮影枠サイズ*/
    position: relative; /*absoluteに設定*/
    padding: 0em 0em;
    z-index: 1;
}

.bg canvas {
    position: absolute;
}
draw.js
function draw_1Pattern(step){
  console.log(width,height,pixels.length,width*height*4)
  // ピクセル単位で操作できる
  var cnt = 0
  for (var x = 0; x < width; ++x) {
    for (var y = 0; y < height; ++y) {
      var base = (y * width + x) * 4;
      if((Math.floor(x/step))%2 == 0){
        pixels[base + 0] = 38
        pixels[base + 1] = 31
        pixels[base + 2] = 135
        pixels[base + 3] = 255

      }
      else{
        pixels[base + 0] = 0
        pixels[base + 1] = 133
        pixels[base + 2] = 84
        pixels[base + 3] = 255

      }
    }
  }
}

var canvas = document.getElementById('SimpleCanvas');
canvas.width = screen.width*0.9
canvas.height = screen.height*0.8
var context = canvas.getContext('2d');

// キャンバス全体のピクセル情報を取得
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var width = imageData.width, height = imageData.height;
var pixels = imageData.data;  // ピクセル配列：RGBA4要素で1ピクセル
//console.log(pixels)
var step = 160//ボーダーの横幅ピクセル
draw_1Pattern(step)
//console.log(pixels)
// 変更した内容をキャンバスに書き戻す
context.putImageData(imageData, 0, 0);
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-04-03T19:46:22+09:00

cssで図形のレイアウトを考えよう！！

概要

バックエンドをメインでやっているけどフロントを少し触った時にcssでつまずいて時間を取られる。
Vue.jsやReactの勉強をしていて基礎力はついてきたけど実装してみるとcssでつまずく。
意外とこんな経験をしている人は多いのでしょうか？

cssは極める必要はないと思いますが、ある程度簡単な図形くらいは実装した方が、デザインの幅なども広がってきます。
早速やってみましょう！！

今回の目標物

スクリーンショット 2021-04-01 11.06.40.png

いたってシンプルですが、自分はこれが分からなくて結構苦労しました笑

まず簡単なレイアウト

index.html
<div class="item-list">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
</div>
style.css
.item-list {
  display: flex;
  height: 200px;
  max-width: 1024px;
  margin: 0 auto;
}
.item {
  width: 33%;
}
.item:nth-child(1) {
  background-color: red;
}
.item:nth-child(2) {
  background-color: blue;
}
.item:nth-child(3) {
  background-color: yellow;
}

スクリーンショット 2021-04-01 11.15.42.png

こんな感じだったら簡単に実装できます。
ただ今回やりたいのは右側は三角形でとんがらせたいですよね！
ここではborderを利用して実装していきます！

borderを使いこなす

まずはborderのイメージをつけていきましょう。

index.html
<div class="container"></div>
style.css
.container {
  width: 50px;
  height: 50px;
  border-top: 60px solid yellow;
  border-left: 60px solid pink;
  border-right: 60px solid red;
  border-bottom: 60px solid blue;
}

index.htmlとcssを書き換えていきます。
何をしているかと言うと、まずはcontainerをwidthとheightを50pxに指定します。
これで50pxの正方形ができます。
そしてそれぞれのborderを色を別にして実装しています。
こういった図形が出来上がります。

スクリーンショット 2021-04-01 11.20.54.png

まずはもとの正方形があり、その周りをそれぞれのborderが囲んでいます。

ではこれをcontainerの幅と高さを調整したらどうなるでしょうか？
スクリーンショット 2021-04-01 11.25.58.png

実はこうなるんです。
つまり中心から、三角形でborderが描かれる訳です。
ピンクの部分に注目してください！

右向きに三角形になっているのがわかるかと思います。
これ使えそうですね.

style.css
.container {
  width: 0px;
  height: 0px;
  border-top: 60px solid transparent;
  border-left: 60px solid pink;
  border-right: 60px solid transparent;
  border-bottom: 60px solid transparent;
}

pink以外をtransparentで透明にしていきましょう！！
そうするとピンクの三角系だけになるはずです！！

ではここから実装していきましょう！

実装する

index.html
  <div class="list">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
  </div>

index.htmlをこちらに書き換えていきます。

まずは下準備として
レイアウトを整えていきます。

style.css
.list {
  display: flex;
  max-width: 1094px;
  margin: 0 auto;
}

.item {
  width: 34%;
  position: relative;
  text-align: center;
  height: 160px;
}

こちらで要素を横並びにして
itemの要素の幅と高さを指定しています。
ここでpositionをrelativeにしていることがポイントです。

style.css
.item::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 80px solid transparent;
  border-bottom:80px solid transparent;
  position: absolute;
  right: -60px;
  z-index: 1
}

こちらを追加していきましょう！！
::afterは指定した要素の子要素に擬似要素を追加することができます。

contentの部分に文字を追加すると子要素に文字が入ることになるので、今回はから文字とします。
先ほどの様に三角形を作りたいのでwidthとheightは0を指定していきます。
topとbottomのborderをとり、transparentで透明にします。
ここでposition: absolutemで親要素にしていしたrerativeからの位置を決めていきます。

今回は右に三角形を向けたいので-60pxとします。
最後に要素の重なりを意識してz-indexを設定します。

z-indexはpositionプロパティがないと使えないので、基本positionとセットで使うと覚えておきましょう！

style.css
.list {
  display: flex;
  max-width: 1094px;
  margin: 0 auto;
}

.item {
  width: 34%;
  position: relative;
  text-align: center;
  height: 160px;
}
.item::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 80px solid transparent;
  border-bottom:80px solid transparent;
  position: absolute;
  right: -60px;
  z-index: 1
}
.item:nth-of-type(1) {
  background: #F7F7F7;
}
.item:nth-of-type(1)::after {
  border-left: 60px solid #F7F7F7;
}
.item:nth-of-type(2) {
  background: #DDDDDD;
}

.item:nth-of-type(2)::after {
  border-left: 60px solid #DDDDDD;
}

.item:nth-of-type(3) {
  background: #C3C3C3;
}

.item:nth-of-type(3)::after {
  border-left: 60px solid #C3C3C3;
}

最終的なcssはこちらになります。

まずはそれぞれのitemの背景色を設定します
あとはそれぞれのafterの要素にborder-leftを足すだけです。
right: -60がきいているので右側に三角系が現れます。

事前にafter要素にz-index: 1を指定しているため重なった場合にborder-leftが上にきて図形が完成します！！！

スクリーンショット 2021-04-01 11.06.40.png

cssは極める必要はそこまでないと思いますが、これくらいの図形は実装できる様にしておきましょう！！！
お疲れ様でした！！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-04-03T19:39:39+09:00

【初心者でもわかる】CSS1行で書ける、文字を目立たせるための7つの方法

どうも7noteです。たった1行でできる。目立たせたいテキストをCSSで装飾する方法

読みにくい文章、読みやすい文章。それらにはもちろん言葉的な意味で読みやすいものや読みにくいものがあると思います。ですが、どんなに読みやすい文章でもwebサイトでは装飾次第で読みにくいものになってしまうことも。

適切な表現をあわせてあげることで、webサイトの文章はグッと読みやすいものになります。
テキストを目立たせる7つの方法とを紹介していきたいと思います。

また1行でなく組み合わせ次第で様々な見せ方が可能になります！

テキストを目立たせるための7つのCSS

▼下線を引く

style.css
p span {
  text-decoration: underline;
}

text01.png

▼太文字にする

style.css
p span {
  font-weight: bold;
}

text02.png

▼文字色を変える

style.css
p span {
  color: #f00;
}

text03.png

▼文字を大きくする

style.css
p span {
  font-size: 1.5em;
}

text04.png

▼マーカーを引く

style.css
p span {
  background:linear-gradient(transparent 60%, #ff6 60%);
}

text05.png

▼打ち消し線を引く

style.css
p span {
  text-decoration: line-through;
}

text06.png

▼余白をとる

style.css
.yohaku {
   margin: 50px 0;
}

text07.png

まとめ

7つの方法を紹介してきましたが、これら単体ではデザイン的には少し弱いと思います。
ですがこれらを組み合わせることでしっかり目立たせるようなテキストを作ることができます。

例１）「マーカーを引く」 + 「太文字にする」

style.css
p span {
  font-weight: bold;
  background:linear-gradient(transparent 60%, #ff6 60%);
}

sample01.png

例2）「打ち消し線を引く」 + 「文字色を変える」 + 「文字を大きくする」

sample02.png

style.css
p span.a {
  text-decoration: line-through;
}
p span.b {
  color: #f00;
  font-size: 1.5em;
}

いろいろな方法があるので、見せたいものはなにか、逆にあまり目立たせたくないものはなにかをしっかり切り分けてCSSを当ててあげることで、見やすいサイトに一歩近づくのかなと思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-04-03T19:28:38+09:00

学習記録

こんばんは！taroです！

本日のアウトプットはHTMLとCSSです！
プロゲートにて学習をしました！

HTML
１　要素は１行のテキスト入力を受け取るための要素である。
２　要素は複数行のテキスト入力を受け取るための要素である。

CSS
1 CSSで背景画像を指定するにはbackground-imageプロパティを使用。
background-image: url(画像のURL);のように使います。

2 background-size: cover;を指定すると、1枚の画像で表示範囲を埋め尽くすように画像の大きさが拡大縮小する。

以上で本日のアウトプットを終わります。
ありがとうございました！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-04-03T18:59:30+09:00

ローディング画面実装方法

ページを読み込むときにローディング画面が欲しくなりますね。
ローディング画面実装の備忘録をサンプルコード付きでまとめました。

1.ページ読み込み時にはローディング画面を表示
2.DOM読み込みが終了するとローディング画面を消す

サンプルコード

<html lang="ja" class="is-loading">

<div class="c-loader">
    <div class="c-loader__bg"></div>
    <div class="c-loading__inner">
        <div class="c-loader__icon"></div>
    </div>
</div>

.c-loader {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  text-align: center;
  pointer-events: none;
}

.c-loader__bg {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  background-color: #fff;
}

html.is-loading .c-loader__bg {
  opacity: 1;
}

.c-loader__icon {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  margin: -4% auto 0;
  -webkit-animation: 1s loading linear infinite;
  animation: 1s loading linear infinite;
  border: 1px solid #f5f5f5;
  border-top: 1px solid #000;
  border-radius: 50%;
  opacity: 0;
  -webkit-transition: 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}

html.is-loading .c-loader__icon {
  opacity: 1;
}

@-webkit-keyframes loading {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes loading {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

var isLoading = false;
$(function() {
    setTimeout(function(){
        $('html').removeClass('is-loading');
    },300)
});
$(window).on('load', function() {
    if (isLoading==false) {
        loadingInit();
    }
});
function loadingInit() {
    function loading() {
        $('html').addClass('is-loaded');
    }
    loading();
}

DOMが読み込まれたタイミングで0.3秒後にis-loadingというクラスを解除、すべて読み込みが終わるとis-loadedというクラスがつくようにしています。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-04-03T18:24:05+09:00

可変フォントサイズの指定方法

リキッドさせるみたいなコーディングで悩んだことってありますよね。

デザイナーが1600pxのカンバスサイズで作ったものをそのままのフォントサイズでコーディングするとノートPCなどの小さい端末で見たときにフォントサイズが大きすぎたり、デザインが崩れます・・。

font-sizeをvwで指定するやり方がありますが、ブレイクポイントの調整がめんどくさく効率的ではありません。

remでフォントサイズを指定

rem指定は主流ですよね。remで指定しているサイトが多いかと思います。

remとは「root」+「em」という意味で、
root要素（html要素）に対して相対的にフォントサイズが指定できます。​

html {
 font-size: 62.5%;
}

p {
 font-size: 1.3rem;
}

基準となるサイズを「62.5%」とした場合、「font-size: 1.3rem;」は「font-size: 13px;」に相当します。

解決策

root要素（html要素）に対してvwを指定します。
下記のようなCSSを記述すると、
1600pxまでは画面の幅に合わせてレイアウトがそのままで可変ということが実現できます。

html {
    font-size: 0.625vw;
    @media screen and (min-width: 1601px) {
        font-size: 62.5%;
    }
    @media screen and (max-width: 1000px) {
        font-size: 39.0625%;
    }
    @media screen and (max-width: 750px) {
        font-size: 62.5%;
    }
}

ただそのままvwだと1600px超えてからも大きくなり続けるのでデザインが崩れます。逆に小さい幅だと小さくなり続けるので上記のような指定にするのがベストです。​

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-04-03T10:19:54+09:00

Reactで複数要素に動的にクリック→スクロールする（createRef, useRef）

Reactでクリック→スクロールする方法について

Reactで『クリック→該当部分までスクロール』を行う場合、以下のようにcreateRefを使用することがありました。

App.tsx
const ref = createRef<HTMLDivElement>()

ここで定義したrefをスクロールさせたい箇所に渡して、

App.tsx
const handleJump = useCallback(() => {
  ref!.current!.scrollIntoView({ behavior: "smooth" })
}, [ref])

クリック時にスクロールするよう関数を定義する。すると以下のようにクリック→スクロールができます。

sample.gif

ソースコードは以下を参照いただければ幸いです。
CodeSandbox

ですが、これだとスクロール箇所が増える度に、ユニークなrefを定義していく必要があるので、
複数の要素に動的にスクロールさせることを検討しました。

結論

以下がソースコードです。
CodeSandbox

App.tsx
type Item = {
  title: string;
  background: string;
  service: string;
  otherContent?: boolean;
};

const items: Item[] = [
  { title: "コンテンツ1", background: "skyblue", service: "サービス1" },
  { title: "コンテンツ2", background: "yellow", service: "サービス2" },
  { title: "コンテンツ3", background: "green", service: "サービス3", otherContent: true }
];

↑のような配列のデータがある場合、

App.tsx
  const pageRef = useRef(items.map(() => createRef<HTMLDivElement>()));

  const scrollToView = (id: number) => {
    pageRef.current[id]!.current!.scrollIntoView({ behavior: "smooth" });
  };

↑のコードのように
- mapを使ってrefの配列を作り
- 関数（scrollToView）の引数にはidを受け取る

とすることでrefを何度も定義せずに動的にクリック→スクロールをさせることができました！

wiita.gif

参考

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-04-03T08:56:49+09:00

MENTAに登録して3ヶ月メンターしてみた

そもそもMENTAとは

プログラミングなどのスキルをもった人が教えたい人と、そのスキルについて教えて欲しい人をマッチングするCtoCサービスです。
まだまだこれからのサービスなので登録していない人は是非登録して使ってみてください。
https://menta.work/

今回はMENTAの方の投稿にも同様の記事をかかせていただきました。
https://menta.work/post/detail/25706/MNFLifA3891FEOfMtVi0

3ヶ月間やってみた結果

今年の1月にMENTAに登録してメンター活動を3ヶ月間やってみました。
結果としては12人の方と契約させていただき、報酬として約13万円をいただきました！ありがとうございます！

始めた当初はなかなか契約いただけないなーと思っていたのですが、継続的にメッセージを送り続けてなんとかこれだけの契約をさせていただくことができるようになりました。

月別でいうと以下のようになっています。

1月　　1万円
2月　　3万円
3月　　9万円

このまま頑張り続けると月10万円くらいは安定的に稼ぎ続けれるのではないかなと思います。

依頼いただくために

自分が契約してもらうために意識したポイントだけ簡単にまとめさせていただきます。

それは！即レスです！
基本自分が意識していたポイントはこれだけで、最初は一番重要なポイントかなぁと思っております。
依頼する側ってどのメンターさんがいいかって判断が難しいんですよね。
情報が多すぎて探せない。そのため特徴的なプロフィールを作るか、それが難しい場合はやはりメンター側から動いてメンティさんを探しにいくということがポイントだったかなと思います。

★逆にここを気をつけた方がいいなと思うこと★
・サポート内容を明確にしておく
　時間や日付、期限を明確に、通話はありなのかなしなのかなどを明確にしておかないとずるずる対応してしまいます。

・返金が可能なので相談するだけの場合でもひとまず契約していただく、もしくは相談用のプランを作成する
　相談で結果的に1時間程度時間を使ったけどもお金にならなかったパターンを何回かしたのでそこから得た教訓です。

★今後意識していこうと思っていること★
・○○だったら自分！のような見つけやすいプロフィール作り
　こちらから連絡して契約していただくのには限界があるので、きちんと集客できるようにする。
・依頼の難易度を正確に把握する
　依頼の難易度と対応時間に合う金額をいただくためにも難易度を正確に把握できるようにする。
これができないとお互いが疲弊だけしてしまって誰も幸せになりません。
・環境構築の問題解決はなるべく受けないようにする
　明らかに解決策がすぐわかる問題以外はこちらは手をださないことにしました。唯一1件だけ解決できずに返金対応とさせていただきました。

最近MENTAを始めた方の参考になれば幸いです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-04-03T06:44:09+09:00

4/3朝報_Qiita投稿＃1

・Progate_学習コース HTML & CSS 初級編実施
・ポートフォリオ自己紹介サイト作成
・転職先模索

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-04-03T01:32:33+09:00

bootstrapのactive

bootstrapとは

ウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。bootstrapで用意されたclassを当てはめることで、CSSを記述しなくても簡単に見た目のデザインをすることができます。今回は「Active items」についてまとめます。
引用元：https://getbootstrap.jp/docs/5.0/getting-started/introduction/

Active items

.active と .list-group-item を適用するとに, アクティブな状態を示します。
Image from Gyazo

<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

これを、Rubyの「 if文 」と組み合わせてみる
【 例 】

<span class="<%= 'active' if current_page?(user_path(@user)) %>">

上記は「もし、プロフィールページが現在表示されているならclassが　'active'　になる」というコードである。このように、if文と組み合わせることでプロフィールページを開いているときだけ要素に 'active' を適用させる事ができる。

【 補足 】
current_page?
指定したURLが、現在表示されているかチェックする
表示されていたら　true　を返す。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-04-03T00:49:21+09:00

perfect pixcelというツールに感動した話

最近perfectpixelなるツールをつかってみて感動したのでそのメモ書きです。

そもそも久しぶりにHTMLとCSSを使ったデザインの当て込みをおこなおうとしたのですが、
xdで作られたファイルでデザインを納品してもらったのが初めてでした。
xdのファイルの画像の高さ、幅やサイズを確認してそれをもとにCSSで画像の高さや文字のサイズを設定しようとしたのですが、そもそもxdファイルとCSSのサイズ感が合わない。

このままだと正確な数値がわからないとなやんでいたところに上記のツールですよ。
何ができるかというと、とってもシンプルなのですが画像をブラウザの画面の上に透過させて載せることができるんですよね。

詳細な使い方はこちら
https://www.asobou.co.jp/blog/web/perfectpixel

これがめちゃくちゃよくて納品されたデザインとずれているかどうかが確認できるんですよね。
子供の頃に使った「うつしがみ」の要領ですね。
（みんな使いましたよね？？）

HTML,CSSのコーディングには必須だなと思いました。

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

日付別

タグ一覧