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

4/3日報_Qiita投稿#2

今日の学び

-Progate

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

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

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

-転職先模索

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

　 Tweet
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);

　 Tweet
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)

　 Tweet
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を使い慣れてる人にはおすすめです。

　 Tweet
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>

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

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);

色々と思い出せない。

　 Tweet
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>

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

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の実装が楽になる。

　 Tweet
Qiitaで続きを読む

投稿日：2021-04-03T20:14:28+09:00

HTMLで絵を書く

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

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);

　 Tweet
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;
}
▼太文字にする
style.css
p span {
  font-weight: bold;
}
▼文字色を変える
style.css
p span {
  color: #f00;
}
▼文字を大きくする
style.css
p span {
  font-size: 1.5em;
}
▼マーカーを引く
style.css
p span {
  background:linear-gradient(transparent 60%, #ff6 60%);
}
▼打ち消し線を引く
style.css
p span {
  text-decoration: line-through;
}
▼余白をとる
style.css
.yohaku {
   margin: 50px 0;
}
まとめ

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

例１）「マーカーを引く」 + 「太文字にする」
style.css
p span {
  font-weight: bold;
  background:linear-gradient(transparent 60%, #ff6 60%);
}
例2）「打ち消し線を引く」 + 「文字色を変える」 + 「文字を大きくする」
style.css
p span.a {
  text-decoration: line-through;
}
p span.b {
  color: #f00;
  font-size: 1.5em;
}
いろいろな方法があるので、見せたいものはなにか、逆にあまり目立たせたくないものはなにかをしっかり切り分けてCSSを当ててあげることで、見やすいサイトに一歩近づくのかなと思います。

おそまつ！

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

　 Tweet
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枚の画像で表示範囲を埋め尽くすように画像の大きさが拡大縮小する。

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

　 Tweet
Qiitaで続きを読む

投稿日：2021-04-03T14:29:58+09:00

【WebIOPi】スマホでサーボモーターを制御！

スマホでサーボモーターを制御

今回はRaspberry Piを使用して、スマホからサーボモーターを制御します。
WebIOPiというライブラリを使用します。インストールは、こちらの記事を参考にしてください。

今回作成するのはこんなイメージです。

Webページ上のスライダを動かすと、サーボモーターが動作します！

これから作成していくのは、

スライダを表示するHTML
スライダの値を取得するJavaScript
サーボモーターを動作させるPythonスクリプト

です。WebIOPiは、スライダの値を取得するJavaScriptとサーボモータを動作させるPythonの橋渡しのような役割を果たします。

それでは作成していきましょう！

HTML作成

HTMLファイルを作成していきます。今回は、サーボを2つ使用するため、スライダも2つ用意します。
WebIOPiを使用する際は、headタグ内に

<script type="text/javascript" src="webiopi.js"></script>

が必要です。忘れないようにしてください。
以下、スクリプトです。inputタグでtype=rangeとすることで、スライドバーが挿入されます。

controller.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Servo Controller</title>
    <script type="text/javascript" src="webiopi.js"></script>
  </head>
  <body>
    <div align="center">
        <tr>
          <td>
            <table>
              <tbody>
                <tr>
                  <!--SERVO 1-->
                  <td id="name1">SERVO 1</td>                  
                  <td class="SS1">                  
                    <div class="slidecontainer1">
                      <input type="range" min="1000" max="2500" value="2000" step="10" class="slider" id="myRange1" oninput="func1()">
                    </div>  
                  </td>
                  <td id="out1"></td>
                  <!--SERVO 2-->
                  <td id="name2">SERVO 2</td>
                  <td class="SS2">                  
                    <div class="slidecontainer2"> 
                      <input type="range" min="1000" max="2500" value="2000" step="10" class="slider" id="myRange2" oninput="func2()">                                             
                    </div>  
                  </td>              
                  <td id="out2"></td>    
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
    </div>
  </body>
</html>

現状のコードをブラウザで確認すると、こんな感じだと思います。

ただし、ブラウザの種類(Safari, Chrome, IEなどなど)によって、スライダの形は変わります。

後ほど、JavaScriptの実装を行うと、<td id="out1"></td>部分にスライダの値が表示されます。

CSS作成

現状のままのスライドバーだと、どこか味気ないのでアレンジしていきます。

CSSスクリプトを作成することで、HTMLをデコレーションすることができます。

今回はこんなスライドバーを作成したいと思います。

デフォルトのスライドバーよりも、スライド部分が長く、取手も大きくなっています。

それでは作成していきます。

まず、どのブラウザでも同じようなスライダが表示されるよう設定します。
SafariやChrome, FireFoxでは同様のスライダが表示されると思います。他のブラウザはわかりません...

controller.css

#myRange1, #myRange2{
    -webkit-appearance:none;
    background:#182005;
    height:10px;
    width: 30%;
    border-radius:8px;
}
input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;
    background:hsl(182, 90%, 61%);
    height:50px;
    width:20px;
    border-radius:40%;
    border: 1px solid rgb(66, 32, 129);
}
input[type=range]::-ms-tooltip{
    display:none;
}
input[type=range]::-moz-range-track{
    height:0;
}
input[type=range]::-moz-range-thumb{
    background:hsl(182, 90%, 61%);
    height:50px;
    width:20px;
    border-radius:40%;
    border: 1px solid rgb(66, 32, 129);
}

次に、スライダのサイズ、位置を調整していきます。

#myRange1{
    position:absolute;
    top:20%;
    transform:scale(2,2);
    right:50%;
}
#out1{
    transform:scale(2,2);
    position:absolute;
    top:20%;
    right:20%;
}

#myRange2{
    position:absolute;
    top:50%;
    right:50%;
    transform:scale(2,2);
    overscroll-behavior-y :none;
}
#out2{
    transform:scale(2,2);
    position:absolute;
    top:50%;
    right:20%;
}

HTMLでCSSを読み込む

HTMLから作成したCSSファイルを読み込むよう、記述します。

HTMLとCSSを同じディレクトリに置き、HTMLのheadタグ内に以下を記述します。

controller.html

<head>
...

<link rel="stylesheet" type="text/css" href="controller.css">
</head>

全体

これまでのHTML/CSS全体は次のようになります。

controller.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Servo Controller</title>
    <script type="text/javascript" src="webiopi.js"></script>
    <link rel="stylesheet" type="text/css" href="controller.css">
  </head>
  <body>
    <div align="center">
        <tr>
          <td>
            <table>
              <tbody>
                <tr>
                  <!--SERVO 1-->
                  <td id="name1">SERVO 1</td>                  
                  <td class="SS1">                  
                    <div class="slidecontainer1">
                      <input type="range" min="1000" max="2500" value="2000" step="10" class="slider" id="myRange1" oninput="func1()">
                    </div>  
                  </td>
                  <td id="out1"></td>
                  <!--SERVO 2-->
                  <td id="name2">SERVO 2</td>
                  <td class="SS2">                  
                    <div class="slidecontainer2"> 
                      <input type="range" min="1000" max="2500" value="2000" step="10" class="slider" id="myRange2" oninput="func2()">                                             
                    </div>  
                  </td>              
                  <td id="out2"></td>    
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
    </div>
  </body>
</html>

controller.css

body{
    margin:0;
    overscroll-behavior-y: none;
}

#myRange1, #myRange2{
    -webkit-appearance:none;
    background:#182005;
    height:10px;
    width: 30%;
    border-radius:8px;
}
input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;
    background:hsl(182, 90%, 61%);
    height:50px;
    width:20px;
    border-radius:40%;
    border: 1px solid rgb(66, 32, 129);
}
input[type=range]::-ms-tooltip{
    display:none;
}
input[type=range]::-moz-range-track{
    height:0;
}
input[type=range]::-moz-range-thumb{
    background:hsl(182, 90%, 61%);
    height:50px;
    width:20px;
    border-radius:40%;
    border: 1px solid rgb(66, 32, 129);
}

#myRange1{
    position:absolute;
    top:20%;
    transform:scale(2,2);
    right:50%;
}
#out1{
    transform:scale(2,2);
    position:absolute;
    top:20%;
    right:20%;
}

#myRange2{
    position:absolute;
    top:50%;
    right:50%;
    transform:scale(2,2);
    overscroll-behavior-y :none;
}
#out2{
    transform:scale(2,2);
    position:absolute;
    top:50%;
    right:20%;
}

最後に

今回は、WebIOPiでサーボを動作させるためのHTML/CSSファイルを作成しました。

次回は、JavaScriptを実装していきます。

　 Tweet
Qiitaで続きを読む

投稿日：2021-04-03T14:07:31+09:00

human_attribute_name(:カラム名)を使う　Rails

初めに

railsのviewで度々見かけるが見かける度に毎回調べていたので、メモがわり。

概要
html.slim
Task.human_attribute_name(:name)
/#=> 名称
上記の形で参考書で使われていた。

前提
ja.yml
    models:
      task: タスク
    attributes:
      task:
        name: 名称
config/locales/ja.ymlにおいて、このように記述がされている。

解説
html.slim
Task.human_attribute_name(:カラム名)
ja.ymlファイルの中でカラム名に対応する文字列が引っ張り出される。
ここでは'名称'がブラウザで表示されることになる。

　 Tweet
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を始めた方の参考になれば幸いです。

　 Tweet
Qiitaで続きを読む

投稿日：2021-04-03T06:44:09+09:00

4/3朝報_Qiita投稿＃1

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

　 Tweet
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 を適用するとに, アクティブな状態を示します。
<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　を返す。

　 Tweet
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のコーディングには必須だなと思いました。

　 Tweet
Qiitaで続きを読む

20210403のHTMLに関する記事は15件です。

4/3日報_Qiita投稿#2

今日の学び

-Progate

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

-転職先模索

leaflet.jsで地図に円を描画

leaflet.jsで地図にmarkerを置く

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

はじめに

方法

さいごに

leaflet.jsで地図を描画

leaflet.jsでOpenStreetMapを描画

HTMLで絵を書く

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

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

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

▼下線を引く

▼太文字にする

▼文字色を変える

▼文字を大きくする

▼マーカーを引く

▼打ち消し線を引く

▼余白をとる

まとめ

おそまつ！

学習記録

【WebIOPi】スマホでサーボモーターを制御！

スマホでサーボモーターを制御

HTML作成

CSS作成

HTMLでCSSを読み込む

全体

最後に

human_attribute_name(:カラム名)を使う Rails

初めに

概要

前提

解説

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

そもそもMENTAとは

3ヶ月間やってみた結果

依頼いただくために

4/3朝報_Qiita投稿＃1

bootstrapのactive

bootstrapとは

Active items

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

日付別

タグ一覧

human_attribute_name(:カラム名)を使う　Rails