投稿日：2020-08-20T23:37:45+09:00

WebページのボタンからAWS MediaLiveを起動させる

はじめに

ライブ配信で利用するAWS MediaLiveの起動・停止は
通常、AWSコンソールやCLIから操作することが多いと思います。

ただ、開発者以外の人に操作してもらう場合は、それだとハードルが高いため、
Webページに配置したボタンから起動・停止を操作できるような仕組みを考えてみました。

構成図

S3にHTMLを配置して、CloudFrontで配信します。

Web利用者はHTML上に配置されたボタンを押します。
すると、APIが実行され、Lambdaがキックされて、MediaLiveが起動・停止する仕組みになります。

MediaLive

今回、操作対象とするMediaLiveチャンネルは、1つとします。

IAM

Lambda用のIAM Roleを作成しておきます。
必要なポリシーは下記になります。

AWSLambdaBasicExecutionRole

AWSElementalMediaLiveFullAccess

Lambda

ランタイム：Python3.8
環境変数：「channel_id」で、MediaLiveのチャンネルIDを設定します。

start関数

※すでにチャンネルが起動していた場合、strat処理を実行しないようにしています。
import boto3
import os

channelid = os.environ['channel_id']
medialive = boto3.client('medialive')

def lambda_handler(event, context):

    channels = medialive.describe_channel(ChannelId=channelid)

    if channels['State'] == 'RUNNING':
        ngmsg = ("チャンネルはすでに起動されています")
        return ngmsg
        pass

    else:
        medialive.start_channel(ChannelId=channelid)
        okmsg = ("チャンネルを起動しています")
        return okmsg
stop関数

※start関数と同様、すでにチャンネルが停止していた場合、stop処理を実行しないようにしています。
import boto3
import os

channelid = os.environ['channel_id']
medialive = boto3.client('medialive')

def lambda_handler(event, context):

    channels = medialive.describe_channel(ChannelId=channelid)

    if channels['State'] == 'IDLE':
        ngmsg = ("チャンネルはすでに停止されています")
        return ngmsg
        pass

    else:
        medialive.stop_channel(ChannelId=channelid)
        okmsg = ("チャンネルを停止しています")
        return okmsg
API Gateway

1. APIの作成

2. リソースの作成：startとstopをそれぞれ作成します。

3. メソッドの作成：POSTやPUTなど

4. CORSの有効化

5. メソッドレスポンス：実行結果を日本語で表示させるため、application/json;charset=UTF-8を追記します。

6. APIのデプロイ

すると、下記ようなURLが発行されます。

https://xxxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/[stage名]

（詳しい設定方法は、本ページ最下部の参考文献の記事が参考になりました）

HTML

次にHTMLを作成します。

私はHTMLに詳しくなく、もっといい書き方がある気がしますので、
参考程度に載せておきます。

「 url: 」には、先ほどのAPI Gatewayで発行したURLの最後に、
startやstopのリソース名を加えたURLを記入します。

例：

url:"https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/[stage]/start"
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <title>MediaLive操作Web</title>
</head>
<script>
  $(function(){
    // ボタンを押すと処理を開始する
    $("#btn1").on("click", function() {
    $.ajax({
        type: "POST",
        url: "https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/[stage]/start",
        cache : false,
    })
        .done(function(result) {
            console.log(result);
    })
        .fail(function(result) {
            console.log(result);
    })
            console.log = function (log) {

        // API実行結果と実行日時を表示させる
        var date = new Date();
        document.getElementById('console_log1').innerHTML = log + "<br>" + "（"　+ date.toLocaleString() + "）" + "<br>";
        }
    })
})

   function stop(){
    // ボタンを押下すると確認ダイアログを表示する
    ret = confirm("本当にチャンネル停止してよろしいですか？");
    if (ret == true){
    $.ajax({
        type: "PUT",
        url: "https://xxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/[stage]/stop",
        cache : false,
    })
        .done(function(result) {
            console.log(result);
    })
        .fail(function(result) {
            console.log(result);
    })
            console.log = function (log) {

        // API実行結果と実行日時を表示させる
        var date = new Date();
        document.getElementById('console_log2').innerHTML = log + "<br>" + "（"　+ date.toLocaleString() + "）" + "<br>";
        }
    }
}
</script>
<button type="button" id="btn1" style="width:150px;height:50px">チャンネル起動</button>
<div id="console_log1" div class="disp-area" style="width:400px;height:50px;padding:15px;background-color: #f0f18b2c;"></div>
<br>
<button type="button" onClick="stop()" style="width:150px;height:50px">チャンネル停止</button>
<div id="console_log2" div class="disp-area" style="width:400px;height:50px;padding:15px;background-color: #f0f18b2c;"></div>
</html>
S3とCloudFront

HTMLを置くだけなので、この部分は省略します。

動作確認

トップページ
→ 起動・停止ボタンと実行結果ログを表示する枠を用意しています。

「チャンネル起動」ボタンを押します。
→ メッセージと実行日時が表示されます。

MediaLiveチャンネルが起動されました。

「チャンネル停止」ボタンも同様に動作確認します。

参考文献

AWS API Gateway から Lambda 関数を使って EC2 インスタンスを起動・終了する

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-20T22:55:06+09:00

プログラミング学習記録 Day3

今日の学習時間

1.5h(トータル5.0h)

今日の学習内容

デイトラ初級編DAY7 ゼロからサイトを作ってみよう③

画像の上に文字を載せよう！とのことだったので、まずはレッスン動画を見ずに自力でコーディングし、その後動画を見て答え合わせをしました。
結果、見た目はほぼ同じようにコーディングすることができました！

お手本との相違
* topセクションをdiv.containerで囲んでいなかった
* top-titleにpadding-top、top-subtitleにpadding-bottomをつけていたが、topそのものに上下のpaddingを入れればOKだった

レスポンシブ対応
768pxタブレットのmaxサイズなのでmax-width:767pxがスマホ版となる

float:noneでfloat解除

PC版と、レスポンシブ対応したスマホ版サイトが完成！
明日からは復習としてゼロから自力でコーディングしていきます。

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-20T21:41:31+09:00

IEさえ、、IEさえいなければ・・・こんなに便利な機能が・・・

どうも、7noteです。IE好きの方はみないでください。

（この記事は、IEの影響で安易に使えないCSS3選の記事です。）

ちょうど本日、
「Microsoft 365サービスが「IE 11」サポートを2021年8月終了--旧「Edge」予定も明らかに」
というニュース記事が上がっており、一瞬

「えっ、ついにIE終了か？！」

と思いましたが違いました、残念。

Microsoft 365サービスにおけるIE11のサポートを終了するだけなので、まだまだIEは続くようですね。

はぁ。。。

IEさえいなければ、こんなに使えるCSSがたくさんあるのに。

filter:～～;（画像の色変えれるのに・・・）

画像にぼかしや色変化などのグラフィック効果が可能になる。
filter: blur(5px);      /* ぼかし */
filter: contrast(200%); /* コントラストを強く */
filter: grayscale(80%); /* グレースケールに変更 */
filter: hue-rotate(90deg); /*色相を変更(回転)*/
filter: drop-shadow(16px 16px 20px red) invert(75%); /*影*/
これがあれば、１種類の画像で複数色に対応できたり、
コントラストを調整させたりが可能になるのに・・・

positon: sticky;（スクロール固定できるのに・・・）

スクロールの途中からついてくる要素を作れる
position: sticky;
引用：https://developer.mozilla.org/ja/docs/Web/CSS/position

あと、stickyはSafariだと、display: inline;かdisplay: inline-block;だと効かないとか。
display: block;かdisplay: flex;を指定している要素にstickyを当てるようにしましょう。

（※PolyfillがあればIEでも可能）

object-fit:～～;（画像のトリミング変えれるのに・・・）

object-fit: cover;を使うと、img要素でもbackground-size: cover;のような自動トリミングを使うことができます。
object-fit: cover;
wordpressとかで呼び出した画像のトリミングなどをcssで一発解決できたら楽ちんなのに。。。

（※PolyfillがあればIEでも可能）

まとめ

まだまだフロントエンジニアによるIEとの戦いは続きますが、めげずに技術や情報を駆使していいサイト作りを続けていきましょう！
他にもIEの影響で使えないCSSなどがあれば共有ください！記事に追加させてもらいます！

おそまつ！

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

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-20T21:13:52+09:00

ハロトレ4日目 ~content記入法/header/nav/ブロック要素/~

HTML

contentに何を記入するか

meta name="xxx" content="見出し(h1,h2タグ)のキーワードをそれぞれいれる"
index.html
<header>
  
  <h1>晩秋に想う</h1>
  
  <p>日常生活の何気ない風景を気ままに綴るブログです。</p>
</header>


<h2>駅員さん</h2>

<h2>アベリアの花</h2>

<h2>自然の変化</h2>
index.html
<meta name="description" 
content="日常生活の何気ない風景を気ままに綴るブログ
:晩秋にある駅で、駅員さんの掃除していたアベリアの花の落ち葉の何気ない風景に、
自然の変化を感じました。">
headerタグ

ページのヘッダー部分
index.html
<body>
  <header>
  
  <h1>初めてのプログラミング言語</h1>
  
  <p>このサイトは初めて学習するプログラミング言語の記録のブログです。</p>
  </header>
</body>
footerタグ

ページのフッター部分
index.html
<footer>
  
  <p><small>Copyright &copy;All rights reserved.</small></p>
  </footer>
navタグ

主要なナビゲーションを表す要素
index.html
<nav>
<ul>
 <li><a href = "#">TOP</a></li>
 <li><a href = "#">html/css</a></li>
 <li><a href = "#">javascript/jQuery</a></li>
</ul>
</nav>
navタグを使うと、HTML 5 Outlinerで「Untitled Section」と出るが、気にしなくても大丈夫です。

ブロック要素

hタグやpタグは、縦に並ぶブロック要素になります。
index.html
<div>
　<p>ブロックされてるやんw</p>
　<p>ブロックされてるやんw</p>
　<p>ブロックされてるやんw</p>
　<p>ブロックされてるやんw</p>
</div>
インライン要素

画像や文字列は、横に並ぶインライン要素になります。
index.html
<span style="background:red; color:#fff;">新谷学に任せろ。</span>
<span style="background:green; color:#fff;">新谷学に任せろ。</span>
<span style="background:blue; color:#fff;">新谷学に任せろ。</span>
<span style="background:purple; color:#fff;">新谷学に任せろ。</span>
Photoshop

Webでは解像度「72」が基本です。

Photoshopはビットマップ画像（画像をドット状のピクセル）を扱います。
illustraterはベクトル画像（線が計算でできている）を扱います。地図やロゴ、キャラクターに適しています。

環境設定

環境設定＞ツールで、「スクロールホイールでズーム」の部分にチェックを入れると、画像を大きくしたり小さくしたりするのがラクになります。

Photoshop画面左下の「ファイルxxx」を長押しすると、幅、高さ、解像度などがわかります。

切り抜きツールで、上のオプションバーの数値を設定すると、幅、高さ、解像度を同じ比率で調整できます。

全てのウインドウを分離　並べて表示

結果このように表示されます。

レイヤー角度の補正を実行後、以下のようになります。

「Ctrlキー+Shiftキー+Nキー」で新規ドキュメント「合成.psd」を作り、新規ドキュメントに犬の画像を「移動ツール」で貼れます。

パネルオプション

明るさコントラストとクリッピング機能

スポット修復ブラシツール

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-20T21:13:52+09:00

ハロトレ4日目 ~content記入法~

HTML

contentに何を記入するか

meta name="xxx" content="見出し(h1,h2タグ)のキーワードをそれぞれいれる"
index.html
<header>
  
  <h1>晩秋に想う</h1>
  
  <p>日常生活の何気ない風景を気ままに綴るブログです。</p>
</header>


<h2>駅員さん</h2>

<h2>アベリアの花</h2>

<h2>自然の変化</h2>
index.html
<meta name="description" 
content="日常生活の何気ない風景を気ままに綴るブログ
:晩秋にある駅で、駅員さんの掃除していたアベリアの花の落ち葉の何気ない風景に、
自然の変化を感じました。">
headerタグ

ページのヘッダー部分
index.html
<body>
  <header>
  
  <h1>初めてのプログラミング言語</h1>
  
  <p>このサイトは初めて学習するプログラミング言語の記録のブログです。</p>
  </header>
</body>
footerタグ

ページのフッター部分
index.html
<footer>
  
  <p><small>Copyright &copy;All rights reserved.</small></p>
  </footer>
navタグ

主要なナビゲーションを表す要素
index.html
<nav>
<ul>
 <li><a href = "#">TOP</a></li>
 <li><a href = "#">html/css</a></li>
 <li><a href = "#">javascript/jQuery</a></li>
</ul>
</nav>
navタグを使うと、HTML 5 Outlinerで「Untitled Section」と出るが、気にしなくても大丈夫です。

ブロック要素

hタグやpタグは、縦に並ぶブロック要素になります。
index.html
<div>
　<p>ブロックされてるやんw</p>
　<p>ブロックされてるやんw</p>
　<p>ブロックされてるやんw</p>
　<p>ブロックされてるやんw</p>
</div>
インライン要素

画像や文字列は、横に並ぶインライン要素になります。
index.html
<span style="background:red; color:#fff;">新谷学に任せろ。</span>
<span style="background:green; color:#fff;">新谷学に任せろ。</span>
<span style="background:blue; color:#fff;">新谷学に任せろ。</span>
<span style="background:purple; color:#fff;">新谷学に任せろ。</span>
Photoshop

Webでは解像度「72」が基本です。

Photoshopはビットマップ画像（画像をドット状のピクセル）を扱います。
illustraterはベクトル画像（線が計算でできている）を扱います。地図やロゴ、キャラクターに適しています。

Photoshop画面左下の「ファイルxxx」を長押しすると、幅、高さ、解像度などがわかります。

同じ比率で

全てのウインドウを分離　並べて表示

結果このように表示されます。

レイヤー角度の補正を実行後、以下のようになります。

「Ctrlキー+Shiftキー+Nキー」で新規ドキュメント「合成.psd」を作り、新規ドキュメントに犬の画像を「移動ツール」で貼れます。

パネルオプション

明るさコントラストとクリッピング機能

スポット修復ブラシツール

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-20T20:55:35+09:00

【Nuxt.js】データ描画を実装してみた【勉強１】

はじめに

自分が勉強した内容のまとめなので、正確性は保証しません。

こちらのサイトにcodesandboxを埋め込んでいます。

実際の振る舞いを見ながらコードの確認ができるので非常に便利です。

https://moneyhack.tech/Nuxt.js/04-Nuxt/

シンプルにcodesandboxめちゃくちゃおすすめなので、気になる方使ってみてください。

宣言したデータを画面上に描画する

次のコードが最もシンプルなデータ宣言です。
<template>
  <div id="app">{{ message }}</div>
</template>

<script>
export default {
  data: function() {
    return {
      message: "メッセージ"
    };
  }
};
</script>
{{ message }} と記載されている箇所が、宣言したデータを表示しています。

{{ ここはデータ名と一致させる必要があります }}

データを宣言しているのは data: function()の部分です。

message に"メッセージ"を定義しています。

これがデータ描画の基本的な手法です。ここから実際に使われる様々な手法を紹介します。

宣言したデータを属性に反映させる(v-bind)

文字列の展開に加え、要素の属性を束縛（バインディング）することもできます。

class や id の属性を束縛し、動的に色を変更したりすることも可能となります。
<template>
  <div id="app">
    <div v-bind:class="color">文字色が変化するコード</div>
    <button @click="colorChange">変更</button>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      color: "black"
    };
  },
  methods: {
    colorChange: function() {
      this.color = "red";
    }
  }
};
</script>

<style>
.black {
  color: black;
}
.red {
  color: red;
}
</style>
見慣れない記述も増えていますが、今回注目していただきたいのは次のコードです。
<div v-bind:class="color">文字色が変化するコード</div>
v-bind:class によって属性を束縛していることがわかると思います。

今回のコードではボタン操作イベントによって切り替えを行いましたが、

属性の切り替え方法は無限に存在するので、上手に属性の束縛を使っていきましょう。

要素の有無をデータで切り替える(v-if)

要素の条件分岐を使い、要素の有無を切り替えることもできます。
<template>
  <div id="app">
    <span v-if="seen">Now you see me</span>
    <button @click="seenChange">消去</button>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      seen: true
    };
  },
  methods: {
    seenChange: function() {
      this.seen = false;
    }
  }
};
</script>
今回注目していただきたいのは、次のコードです。
<span v-if="seen">Now you see me</span>
v-if によって、要素に条件を追加しています。

seen が true であれば要素を表示し、false であれば非表示としています。

今回はボタン操作により、表示から非表示への切り替えを行っています。

ループ描画をデータで実現する(v-for)

配列データを使い、ループ処理によって描画を行うこともできます。
<template>
  <div id="app">
    <li v-for="todo in todos">{{ todo.text }}</li>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      todos: [
        { text: "Learn JavaScript" },
        { text: "Learn Vue" },
        { text: "Build something awesome" }
      ]
    };
  }
};
</script>
今回注目していただきたいのは次のコードです。
<li v-for="todo in todos">{{ todo.text }}</li>
描画方法は最初に紹介した{{}}で囲う方法ですが、

todos の配列を呼び出し、ループ処理による描画を行っています。

ユーザー入力を反映する(v-model)

ユーザーの入力をリアルタイムに反映させることもできます。

次の sandbox で入力を弄ってみてください。

表示される文字が入力と同時に変化することがわかります。
<template>
  <div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      message: "Hello Nuxt.js!!"
    };
  }
};
</script>
今回注目していただきたいのは次のコードです。
<input v-model="message">
通常の input タグに v-model が記載されています。

この v-model がユーザーの入力とアプリケーションの状態の双方向バインディングを提供しています。

ユーザー入力によるメソッドの呼び出し

ユーザー操作によりメソッドを呼び出すこともできます。

v-on:click で呼び出すこともできますし、@click でも呼び出すことができます。
<template>
  <div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      message: "Hello Nuxt.js!!"
    };
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message
        .split("")
        .reverse()
        .join("");
    }
  }
};
</script>
今回注目していただきたいのは次のコードです。
<button v-on:click="reverseMessage">Reverse Message</button>
button タグに v-on:click が追加されています。

v-on:click 以降には呼び出したい script のメソッド名を記載しています。

おわり

データ描画、v-bind、v-if、v-for、v-model、v-on:click と表現方法を学びました。

いまいち消化しきれていない方は、実際に手を動かして動作を確認することをおすすめします。

そこまで難しくない表現方法のため、

全て習得してしまい、自身のやりたいことに合わせて使い分けていきましょう。

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-20T19:34:04+09:00

コードの中にメモを取る方法（HTML,CSS,JavaScript）

HTML



CSS

/* サンプル */

JavaScript

（１行の場合）　// サンプル
（複数行の場合） /* サンプル */

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-20T18:57:57+09:00

[PHP]特定のYouTube動画の情報を取得する

特定チャンネルの動画情報だったりプレイリスト一覧を取得したいとき、YouTubeAPIv3を使うと思います。
PHPだと、ComposerとかでGoogle公式ライブラリを使うのもいいですが特定の動画の場合はもっとかんたんに動画情報を取得できます。

具体的にはAPIから動画情報が格納されているJSONを呼び出します。
以上！

JSONのURL構造

https://www.googleapis.com/youtube/v3/videos?id=[動画ID]&key=[APIKey]&part=snippet,contentDetails,statistics,status

[APIKey]にはGoogleAPIから取得したAPIキーを入力してください。
キーの取得方法はネットに溢れかえってるんで自分で調べてください。

サンプルコード

YouTubeAPIv3から特定動画のタイトルを取得してみます。
yt.php
$api_key = APIキーを入力
$video_id = 動画IDを入力
$url = "https://www.googleapis.com/youtube/v3/videos?id=$video_id&key=$api_key&part=snippet,contentDetails,statistics,status";
$json = file_get_contents($url);
$getData = json_decode( $json , true);
foreach((array)$getData['items'] as $key => $gDat){
    $title = $gDat['snippet']['title'];
}
// タイトルをechoする
echo $title;

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-20T14:47:35+09:00

HTMLの説明リストのタグ(dl dt dd)の使い方

プログラミングの勉強日記

2020年8月20日　Progate Lv.226

それぞれのタグの意味

少し前までは、定義リストとしての役割を持っていた。
　dl（definition list）：定義リスト
　dt（definition term）：定義する言葉
　dd（definition description）：定義の説明
<dl>
  <dt>バスケットボール</dt>
  <dd>アメリカ発祥のスポーツ</dd>
</dl>
実行結果

HTML5では、説明リストとしての意味に変わり用途が広がった。
　dl（definition list）：説明リスト
　dt（definition term）：説明する言葉
　dd（definition / description）：定義文 / 説明文
<dl>
  <dt>バスケットボール</dt>
  <dd>アメリカ発祥のスポーツ</dd>
</dl>
実行結果

使い方

　使い方は、まず全体にdlを囲い、dtに説明したいものを書いて、ddにそれに対する説明を書く。dlの中にはdtとddはいくつ書いても大丈夫。
使い方(htmlファイル)
<dl>
  <dt>説明したいこと</dt>
  <dd>それに関する説明</dd>
  <dd>それに関する説明2</dd>

  <dt>説明したいこと2</dt>
  <dd>それ(2)に関する説明</dd>
</dl>
事典的な意味を強調する方法

　HTML5では定義リストと説明リストの2つの役割がある。検索エンジンからはそれぞれ同じタグなので、その内容が定義リストとしてなのか説明リストとしてなのかがわからない。
　定義リストとして、事典的な意味を強調するためにはdfnタグを使う。
<dl>
  <dt><dfn>バスケットボール<dfn></dt>
  <dd>アメリカ発祥のスポーツ</dd>
</dl>
ulのリストとの使い分け

　単純なリストだけではul(ol)を使ったリストでいいが、リストに説明が必要な場合にdlを使う。
ulを使う例
<ul>
  <li>バスケットボール</li>
  <li>サッカー</li>
  <li>相撲</li>
</ul>
dlを使う例
<dl>
  <dt>バスケットボール</dt>
  <dd>アメリカ発祥のスポーツ</dd>
  <dt>サッカー</dt>
  <dd>イングランド発祥のスポーツ</dd>
  <dt>相撲</dt>
  <dd>日本発祥のスポーツ</dd>
</dl>
参考文献

ライバルに差を付けたい！HTMLコーダー必見のdl dt ddタグの基礎～応用
 HTMLの説明リストタグ【dl・dt・dd】の使い方を徹底解説

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-20T13:08:40+09:00

Webデザインが捗るサイト

著作権フリー系

・Pixabay(ピクサベイ)
著作権フリー画像集

イケてるサイト系

・muuuuu.org
クオリティが高い縦に長いサイト集

タッチタイピング練習サイト系

・ひよこタイピング


・コードドリル　文字列一覧


コードチェック系

・HTML 5 Outliner

・The W3C Markup Validation Service
文法チェック

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-20T12:19:09+09:00

縦スクロールバーが2本出てくる&hidden消したら内側に出てきちゃう問題

今のPJにBacklogがないので備忘録

問題

・webサイトの縦に長いページだと縦スクバーが2本出てくる
・参考サイトで出てきた以下記述を消すと、横スクが出てくる＆縦スクがbodyの内側に出てきちゃう
css
html, body {
width: 100%;
overflow-x: hidden;　←消す
}
https://kotori-blog.com/css/scroll-y/

解決方法
css
html, header {
width: 100%;
overflow-x: hidden;
}
bodyをheaderにするだけでした。
これに1時間近くかけてたの工数泥棒としか言えず…。

　 Tweet
Qiitaで続きを読む

投稿日：2020-08-20T10:45:08+09:00

[css]開発でよく使用する便利技

開発でよく使用する便利技をここに残しておきます。
これいいなと思ったものはここに残すつもりなので都度更新するかもしれません。

要素の上下中央寄せ

要素の上下中央寄せの方法はいくつかあります。
その中でも、自分が開発を行う上でよく使うのをいくつか紹介させて頂きます。

完成例

html
<div class="c-box">
  <div class="c-box__inner"></div>
</div>
flex

まずはflexを使った上下中央寄せをご紹介します。
.c-box {
  display: flex;
  align-items: center;
  width: 200px;
  height: 200px;
  border: 1px solid #333;
}
.c-box__inner {
  width: 30px;
  height: 30px;
  background: #333;
}
display: flex;はcssのレイアウト技法の一つです。
align-itemsは垂直方向の揃え方を指定します。(display: flex;を指定しないと使用できません。)
centerプロパティで垂直方向の中央に配置しています。

position + transform

次はpositionとtransformを使ってやってみます。
.c-box {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #333;
}
.c-box__inner {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  background: #333;
  transform: translateY(-50%);
}
こっちのやり方では親のc-boxにposition: relativeを設定。
子のc-box__innerにposition: absolute;とtop: 50%;で上下中央に配置していますが
これだけだと子の要素の高さ(30px)分、下に行ってしまうのでtransform: translateY(-50%);で要素の半分(50%)を上にずらしています。
translateYはY軸の位置を決めます。

calc

次はwidthなどで最近見かけるようになってcalcを使ったやり方を紹介します。
.c-box {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #333;
}
.c-box__inner {
  position: absolute;
  top: calc(50% - 15px);
  width: 30px;
  height: 30px;
  background: #333;
}
こちらも上の例とほぼほぼ同じですが、違う点はtransformを使用していないのと
topプロパティにcalcを使っています。
calcはcssの値の計算に使える関数です。
top: calc(50% - 15px);でtop: 50%から子要素の高さの半分の15pxを引いているので中央に来るようになっています。
calcはwidthなどでも多く使える場面があるので覚えておくといいかもしれません。

要素の左右中央寄せ

次は左右中央寄せの仕方を何パターンかご紹介します。

text-align

これは紹介不要だと思いますが、一応紹介しておきます。
<p>ダミーテキストです。</p>
p {
  text-align: center;
}
これだけです。
主にテキストの位置関係で使用します。
テキストを中央に寄せたい場合、左に寄せたい場合、右に寄せたい場合も使用できますので知らない方は是非調べてみてください。

margin

これもよく使うので紹介するほどでもないですが
<div class="c-box">
  <div class="c-box__inner"></div>
</div>
.c-box {
  width: 200px;
  height: 200px;
  border: 1px solid #333;
}
.c-box__inner {
  width: 30px;
  height: 30px;
  background: #333;
  margin: 0 auto;
}
こんな感じでmargin: 0 auto;を使えば左右中央寄せができます。
また、margin: 0 0 0 auto;などとすると右寄せにもできます。

flex

またflexですが、縦ができるのであればもちろん横もできます。
<div class="c-box">
  <div class="c-box__inner"></div>
</div>
.c-box {
  display: flex;
  justify-content: center;
  width: 200px;
  height: 200px;
  border: 1px solid #333;
}
.c-box__inner {
  width: 30px;
  height: 30px;
  background: #333;
}
このようにコードは上でやった上下中央寄せと同じコードですが一箇所だけ違います。
align-itemsは垂直方向の位置指定でしたが、
justify-contentプロパティを今回は入れています。
justify-contentプロパティは水平方向の位置指定ができるのでcenterの値を入れると左右中央に配置できます。

position + transform

次はpositionとtransformでやってみますが、こちらも上で紹介したこととほぼほぼ同じことをします。
.c-box {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #333;
}
.c-box__inner {
  position: absolute;
  left: 50%;
  width: 30px;
  height: 30px;
  background: #333;
  transform: translateX(-50%);
}
このように変わった部分は子要素のtransform: translateX(-50%);の部分だけです。
(左右中央寄せなのでtop→leftに変わってます。)

flex系

flex

flexは上でも紹介していますが、中でもよく使うものをご紹介します。

justify-content

2つ以上の要素を左右の端に置いたり、均等に並べたい場合によく使用するのが
justify-contentプロパティです。
その他にも要素の横位置の調整だったりでも多く使用します。
<div class="c-box">
  <div class="c-box__inner"></div>
  <div class="c-box__inner c-box__inner--red"></div>
</div>
.c-box {
  display: flex;
  justify-content: space-between;
  width: 200px;
  height: 200px;
  border: 1px solid #333;
}
.c-box__inner {
  width: 30px;
  height: 30px;
  background: #333;
}
.c-box__inner--red {
  background: #ff0000;
}
このように2つの要素を両端に置くことができました。
使う場面は多くあるのですが、短かなところで言うとサイトのheaderなどで左にロゴがあって、右にメニューがあるようなものとかだとイメージしやすいかと思います。

まとめ

こんな感じで自分がよく使うcssを紹介しましたが、皆さんはどうでしょうか？
こんなの便利だよとかあれば是非ご紹介してください。

　 Tweet
Qiitaで続きを読む

20200820のHTMLに関する記事は12件です。

WebページのボタンからAWS MediaLiveを起動させる

はじめに

構成図

MediaLive

IAM

Lambda

API Gateway

HTML

S3とCloudFront

動作確認

参考文献

プログラミング学習記録 Day3

今日の学習時間

今日の学習内容

デイトラ初級編DAY7 ゼロからサイトを作ってみよう③

IEさえ、、IEさえいなければ・・・こんなに便利な機能が・・・

どうも、7noteです。IE好きの方はみないでください。

filter:～～;（画像の色変えれるのに・・・）

positon: sticky;（スクロール固定できるのに・・・）

object-fit:～～;（画像のトリミング変えれるのに・・・）

まとめ

おそまつ！

ハロトレ4日目 ~content記入法/header/nav/ブロック要素/~

HTML

contentに何を記入するか

headerタグ

footerタグ

navタグ

ブロック要素

インライン要素

Photoshop

環境設定

パネルオプション

明るさコントラストとクリッピング機能

スポット修復ブラシツール

ハロトレ4日目 ~content記入法~

HTML

contentに何を記入するか

headerタグ

footerタグ

navタグ

ブロック要素

インライン要素

Photoshop

パネルオプション

明るさコントラストとクリッピング機能

スポット修復ブラシツール

【Nuxt.js】データ描画を実装してみた【勉強１】

はじめに

宣言したデータを画面上に描画する

宣言したデータを属性に反映させる(v-bind)

要素の有無をデータで切り替える(v-if)

ループ描画をデータで実現する(v-for)

ユーザー入力を反映する(v-model)

ユーザー入力によるメソッドの呼び出し

おわり

コードの中にメモを取る方法（HTML,CSS,JavaScript）

HTML

CSS

JavaScript

[PHP]特定のYouTube動画の情報を取得する

JSONのURL構造

サンプルコード

HTMLの説明リストのタグ(dl dt dd)の使い方

プログラミングの勉強日記

それぞれのタグの意味

使い方

事典的な意味を強調する方法

ulのリストとの使い分け

参考文献

Webデザインが捗るサイト

著作権フリー系

イケてるサイト系

タッチタイピング練習サイト系

コードチェック系

縦スクロールバーが2本出てくる&hidden消したら内側に出てきちゃう問題

問題

解決方法

[css]開発でよく使用する便利技