スマホを横向きにした時の右余白を消したい！

#症状
iPhoneなどのスマホを横向きにした時に、
右側に余白が出来ることがあります。

「そんな余白を消したい！！」

という時の対処法です。

##対処法
1.画面右側からはみ出ている要素がないか確認する。はみ出ていれば修正する。
2.`viewport`の指定を確認する
3.htmlタグ、bodyタグに`width: 100%;`が指定されているかを調べる。されていなかったら指定する。
4.bodyタグに`min-width: 100%;`を指定する。

###手順1
1の方法で問題なければバンザイです。
2へ進む必要はありません。

###手順2
2については、最低限下記を指定します。

“`

“`

`initial-scale=1`や`minimum-scale=1`の記述が抜けていることがあるので、
抜けていたら追加してください。

###手順3、4
2を完了したあと、手順3、4を確認します。

Flexboxを使い要素を横並びにする

## 初めに
webページを作成にあたって要素を横並びにする方法が定着しないので記事に残します。
## 要素を横並びにする方法
今回はFlexboxを記事にします。flortもありますがFlexboxの方が応用が効くと思うのでFlexboxを使用します。

前提として、Flexboxとはブロック要素の配置を変えることができます。
ブロック要素とインライン要素については以下を見てください。
[ブロック要素とインライン要素について](http://www.htmq.com/htmlkihon/005.shtml)

## displayプロパティについて
displayプロパティとは要素の種類を変更することができるプロパティです。displayプロパティの種類を何個か書いておきます。

| 種類 　　　　 | 説明　　　　 　　　　　　　　　|
|:—————– |————————–:|
| display:block | 指定した要素をブロックレベル要素へ|
| display:inline

下線アニメをbackground-sizeのanimationで実装したらIE11で動かなかったけど切り捨てた

# はじめに

「元々リンクテキストに下線が引いてあって、マウスホバーするとその下線が左から右へアニメーションする。」

そんなあるある要件を満たすためにいろいろと試してみました、が、悪しからず、**完璧なIE11対応はできなかったので諦めました**、という残念な記事です。

ぜひ、ナレッジがある方はお知恵を拝借できれば幸いです。

# 実際にやってみた

ベースとなるHTMLは以下の通りです。

“`html:HTML
リンクテキスト
2行目です
“`

## まずは`scale()`で実装

widthを使ったりいろいろ実装方法はあると思いますが、まず私は`transform: scaleX()`で実装しました。
`transform-origin`を変えればアニメーションの起点を簡単に真ん中にしたり右端にしたり変えられると考えたからです。

“`css:Mark.I（疑似要素で実現）
a {
position: relative;
display: inline-block;
text-decoration: none;
}
a::after

cssでの優先度〜class属性、id属性〜

#①class属性
クラスとは、簡単に言うと学校のクラス学級のようなもので、何年何組みたいなものです。
またこのclass名は1ページで何度でも使うことができます。
こちらは、要素に対しての指定として使われます。
例えば、ヘッダーとしての要素があるとします。その際class=”header”と使われます?

#②id属性
反対にid属性は１ページで1回のみ使うことができます。
こちらは
固有の名前を付ける場合に使われます?
class属性とは違いこちらは、出席番号のようなものです。
同じクラスの同じ人が何人もいるわけにいきませんよね(・・;)　

またこれらは、cssを適用する場合にも影響があります。

cssでは、class属性よりもid属性が強い関係にあります。

では、cssでの優先度について考えてみましょう。

cssには記述方法が3つほどあります。

#①HTMLタグ
こちらはHTMLタグの中に書く方法です。

“`index.html

マイメロディ

“`
外部に書くのが基本なのであまり使われませんが、このような書き方も

CSS~!important~

CSSには優先度というものがあります。
上から書いたものが、下に向かって反映されていきます。

例えば、このように記入したとしましょう。

“`index.html

今日は何をしていましたか？？

“`

“`style.css
h1 {
color: red;
}

h1 {
color:blue;
}
“`

この場合、優先的に反映されるのは一番最後に記入されたcssになります。

こうなりますね。
赤色を反映したいとしましょう。
ここで使うのが、『!important』です。
では先程のcssに付け加えていきます。

“`style.css
h1 {
color: red !important;
}

h1 {
color:blue;
}
“`
と

ベーシック認証の付け方【初心者】

【初心者向け】ベーシック認証作業忘れないように、備忘録_φ(･－･

－－－－－－－－－－－－－－－－－

①.htaccessファイルを作成し、以下を追記（既にあれば追記）

“`php
AuthType Basic
AuthName “Please enter your ID and password”
AuthUserFile “フルパス\.htpasswd”
require valid-user
//←改行一行入れる
“`

②.htpasswdファイルを作成
▼ココでID/PWを作成(オススメ)
https://www.en-pc.jp/tech/htpasswd.php#htpasswd
※パスワードは8文字以内がオススメ（長すぎると通らない可能性大）
※暗号化方式を「MD5」に（それ以外は通らない可能性大）

③生成されたパスを.htpasswdファイルに追記

④シークレットウィンドウで確認する

◎リリース時は.htaccessから、追記した行を消すのを忘れない！！

－－－－－－－－－－－－－－－－－

いつもベーシック認証の仕方忘れて鳥頭になるので、私的備忘

動画下の余白を消したい！

#症状
videoタグで動画を表示する時に、
動画の下に余白が生まれることがあります。

「そんな余白を消したい！！」

という時の対処法です。

##対処法
1. videoタグの親要素に`line-height: 100%;`を指定
2. videoタグの親要素に`display:flex;`、`align-items: end;`を指定

1の方法は下記の記事から引用させていただきました。
・[動画に謎の余白やマージン！削除する方法（HTML / CSS）](https://daryoshi.com/blog_post_0000178.html)
こちらの方法で問題なければバンザイです。
2へ進む必要はありません。

ただ、私の場合、
こちらの方法でも多少余白が少なくなったのですが、
少しだけ余白が残ってしまいました。

そこで、2の方法を試してみました。
すると、余白がきれいに無くなりました。

よかった。

備忘録なので簡単にしか説明していませんが、お困りのかたのお力になれれば！
以上です。

HTMLによる動画のダウンロード禁止について

# 最初に
WEBサーバで動画を配信したいが、ダウンロードはさせたくないという要件
を満たすには。

HTML5のvideoタグによる制御とapacheの設定で実現できたので共有。

調べれば個別に検索に引っ掛りますが、まとまったのがなかったので

### HTMLによる制御

videoタグに下記オプションを追加する。

“`
oncontextmenu=”return false;　※右クリックからのダウンロードを禁止
controlsList=”nodownload”　※ダウンロードオプションを非表示
“`

例

“`

“`

### apacheの設定
直接アクセスを禁止させたいフォルダのパスを記述
これでHTMLによる制御と、直接アクセスによるダウンロードを阻止する。

“

【Webフォント】日本語Webフォントがすぐに表示されない場合の対処法

# はじめに
私たちが普段見ている様々なサイトでデザイン性を高めるために**「Webフォント」**が使用されています。
Webフォントを使用するメリットはたくさんあり、**「どのブラウザで見ても同じ表示になる」**や**「文字を画像で表示しないためSEOの効果を維持できる」**などがあげられます。
しかし、メリットの反面デメリットもあります。WEBフォントの読み込みが遅く、最悪の場合**「サイトが表示されてから数秒の間文字が表示されない」**なんていう事象が発生する可能性があるのです。
特に日本語は漢字・ひらがな・カタカナと英語圏のアルファベットに比べると桁違いに文字が多いため、フォントデータのサイズも大きくなってしまいます。
今回はWebフォントのメリットを享受しつつデメリットを打ち消す方法を紹介します。
※一般的な方法なので「そんなの当たり前じゃん」と思う方もいると思いますがご了承ください。

# 確認方法
「目視だとわからない・・・。」という方はGoogleのPageSpeed Insight(ページスピードイン)等のパフォーマンス測定サイトで確認してください。
※PageSpe

cypress で期待通りに自動テストが動かなかったときの対策集


前回の「[cypress を使って自動テストを簡単に導入する方法](https://qiita.com/Takakiri/items/8eba48a7537a4a250afe)」の続きです。

## テストコードとブラウザーが非同期で動いていることに対応する機能とその限界

cypress など、ブラウザーを使って自動テストをする場合、
テストコードは、ブラウザーとタイミングを合わせながら非同期で動くのですが、
それが原因でテストコードが期待通りに動かないケースがよくあります。


たとえば

HTMLで円周率計算を可視化（モンテカルロ法）

今日は3月14日、πの日ということで円周率の計算をするプログラムを作ろう、という趣旨の記事です。

#使ったもの
HTMLとタイトルにありますが、HTMLの記述は数行でほとんどがJavaScriptです。HTMLのcanvas要素をJavaScriptでゴリゴリいじって描画します。
canvasについては、[このサイト](https://developer.mozilla.org/ja/docs/Web/HTML/Element/canvas)を参考にしました。

#計算方法
数値計算ではなく、確率（乱数）を用いる[モンテカルロ法](https://ja.wikipedia.org/wiki/%E3%83%A2%E3%83%B3%E3%83%86%E3%82%AB%E3%83%AB%E3%83%AD%E6%B3%95)で円周率を求めます。

こ

express Form作成

###Package.json のdependencies

“`
“dependencies”: {
“cookie-parser”: “~1.4.4”,
“debug”: “~2.6.9”,
“ejs”: “~2.6.1”,
“express”: “~4.16.1”,
“http-errors”: “~1.6.3”,
“morgan”: “~1.9.1”
}
“`

####expressのForm作成について
expressで入力フォームを（ログイン、新規登録）作成する際にform入力を利用しました。
expressを用いたフォーム作成の忘備録を残します。
参考サイト：
[Node.js + Express で 登録画面 を作る](https://garafu.blogspot.com/2017/04/nodejs-express-regist.html)
[Node.js+Expressでpostを使う！]
(https://tmykndr.hatenablog.com/entry/2018/05/03/025221

【Rails】CSSにbackground-imageで設定した背景画像が表示されない

現在作成している自作のアプリケーションで、
上のように背景に画像を設定したく、
CSSでbackground-image プロパティを使えば良いことが分かり、
以下のように記述しました。

“`css
.sample-contents {
width: 100vw;
height: 350px;
background-image: image-url(‘sample-top.JPG’);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
“`

これで画像が出るはず！だったんですが、画像が表示されなかったので、
解決するために試したこと等を記録します。

## 解決したかったこと
CSSでba

グーグルフォントの使い方

## グーグルフォントとは？
Googleが提供しているフォントサービスのこと。約１０００種類以上も無料で使えるフォントがあるそうです。ただ、日本語のフォントは少ないので注意が必要です。
今回WEBページ作成で初めて使用したので書き残しておきます。
## フォントを選ぶ
[グーグルフォント](https://fonts.google.com/)
使いたいフォントを選びクリックする。


クリックしたら使いたい太さ選び、以下の画像のボタンをクリック
右側に以下のLINKコードが出てくるのでそれをHTMLファイルに貼り付けます。
cccファイルにも適用したいクラスにfont-family:’Cavet’,cursive;を貼り付け適用させます。

【初心者でもわかる】jQueryで作る「再生停止ボタン付き自動スクロール機能」

#どうも7noteです。再生停止ボタン付き画面の自動スクロール機能の実装方法

jQueryを使った、画面の自動スクロールを作っていきます。
シンプルな機能ですが、再生停止を操作できるような作りなので、サイトをみた人が自分で自動スクロールさせるかどうかを決めることができます。

## 画面自動スクロールの作り方

“`index.html

難読化とMinifyについて

## はじめに（調べるに至った経緯）
ども！ワンピースの光月おでんがカッコよすぎて日々アニメを漁りながら自宅待機中の光月ギノキンです。

（・・・ではでは）

さっそく調べるに至った経緯ですが、近頃はフロント業務をやらせてもらっていて、Sentry（監視ツール）に届いたエラーをchromeのdevツールで検証しているのですが、devツール上で`main.js`の中身を見てみるとソースコードの記述とは違う乱数があり、

> なんだこれ。。エラー追えないやん。。。

ってなったので調べてみると、「難読化」、「Minify」を行っているらしかったので調べるに至りました。

## 難読化とは

> プログラマーがソースコードなどを意図的に読みにくく記述することで、可読性を著しく下げたり、解析し辛くする技術を「難読化」と呼びます。プログラムやアルゴリズムを隠したり不明瞭にすることにより、攻撃者にソフトウェアプログラムをリバースエンジニアリングされることを防止できます。
> 参照元：[「難読化」でリバースエンジニアリングを阻止しよう！](https://note.com/toast_nhnjp/n

Elixir側で実装したHTMLを描画する例

“`shared_view.ex

def url(:twitter) do
“Twitter”
end
“`

`helper`に記載された`url(:twitter)`を`html.eex`で下記のように呼び出す。

“`eex
<%= raw url(:twitter) %>
“`

【初心者は気を付けて】Chromeの検証ツールはあくまで検証用、必ずデバイスで確認！

#どうも7noteです。検証ツールは便利ですが知らないと罠にハマってしまいます。

検証ツールは便利で多機能なのでついつい便りガチですが、頼りすぎずに節度ある距離感で付き合っていきたいものです。

まだまだWEB開発者初心者の方向けに検証ツールで注意すべき点をまとめました。

## 注意点①：フォントはデバイスに依存する

WEBフォントを入れていれば大丈夫ですが、デフォルト規定のフォントの場合PCとスマホではフォントが違うことが多いです。

フォントによって、幅や文字の大きさが違うので思っていた改行にならなかったり。
改行具合を綺麗に見せたいのであれば、あらかじめ余裕をもったところで改行させるか、実際にスマホでチェックするようにしましょう！

## 注意点②：検証ツールでピッタリだと、実機では1文字ズレることがある。

これは体験談なのですが、**検証ツール上で375pxのデバイスで見ていても、実際に375pxのデバイスで見ると1文字分ズレていたりします。**

(例：検証ツールでは↓)
![image.png](https://qiita-image-store.s3.ap-nor

埋め込んだYou Tube動画の上部メニューを非表示にできなかった

# 概要と結論
##概要
埋め込んだYou Tube動画の再生前、停止中に表示される上部メニューを非表示にしたかった
だが実現できなかったのでその内容をまとめる

↓赤枠が非表示にしたかったメニュー部分

[動画元：Me at the zoo](https://www.youtube.com/watch?v=jNQXAC9IVRw)
（youtubeに投稿された最初の動画らしい）

## 結論
以下の方法を試みたがいずれも適用することができなかった

– youtubeの該当パラメータを指定
– パラメータは存在したがサポートが終了していて利用できなかった
– cssで該当要素に`display: none;`を適用
– jsでiframeをロード後にスタイルを適用
– 上記2つは「同一オリジンポリシー」によ

CSSで絵書いてみた

ちょっと暇つぶしとしてCSSで絵を書いてみました。

# モンスターボール

“`html:index.html