【Android／iOS】Webブラウザのアドレスバーを非表示にする方法

#はじめに
Android／iOSのWebブラウザのアドレスバーを非表示にする方法です。
ネットで調べて出てくることには出てくるのですが、なかなかたどり着かなかったのでQiitaに投稿しておきます。

#やりたいこと
据え置きのタブレット端末でWebアプリを動作させるときに、アドレスバーを非表示にしたい。
↓
調べたところ、Webブラウザの設定でフルスクリーン（アドレスバー非表示）にするのは無理そう。
（フィッシングサイトによる悪用などを考慮している？）
↓
**Webブラウザの設定変更以外の方法でアドレスバーを非表示にしたい。**←今回やりたいこと

#結論
以下のサイトを参考にしました。
[[HTML5] フルスクリーンの開始と解除](https://blog.katsubemakito.net/html5/fullscreen)

対象ページのheadタグ内に以下のmetaタグを記述します。

“`html

“`

検証ツールでは問題ないのに、スマホのみフッターが下に固定されない

コンテンツが少ない際に、フッターの下に不自然な空白が発生してしまうので下記のサイトを参考に実装してみました
[フッターをページの最下部に固定](https://qiita.com/d0ne1s/items/5c629bc543e70ed2bf98)

“`html

ヘッダー

コンテンツ

“`

“`css
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
main {
flex: 1;
}
“`

すると、PCの検証ツールでスマホ版のサイトを表示したらフッターが一番下に来ますが、
スマホでサイトを開いてみると、一番下にフッターが固定されず、フッターの下に不自然な余白が出来ていました。
AndroidやiPhone、SafariやChrome, Firefoxで試してみても同様の現象が確認できました。

この画像はM1 Macbook Air(C

【Rails】条件に応じて、適用するCSS（セレクタ）を変える（備忘録）

みなさん、こんにちは！
筆者は大学生限定のプログラミングスクール「GeekSalon」でメンターをしています！
興味のある方や話だけでも聞いてみてい方はぜひのぞいてみてください?

https://geek-salon.com/?utm_source=Direct&utm_medium=attract&utm_campaign=3Q&utm_content=Fukuoka_B1_3Q

さっそく今回の本題に入っていきます！
今回は、条件に応じて適用するCSSのセレクタを変えるというものを実装していきます。

筆者は、投稿にカテゴリ（category）のカラムを追加しており、そのカテゴリに応じて投稿の背景色が変わるというものを実装しました！
完成イメージは以下のようになります


##実装環境
ruby 2.7.4p191 (2021-

MicrosoftのWeb開発教材を使ってみた ⑦-1銀行プロジェクト【SPA/template/HTMLフォーム】

## はじめに

**「Web Development For Beginners」**というMicrosoftがGithubに公開している教材についての記事です。

教材の紹介・選んだ理由など

### この教材を選んだ理由

https://github.com/microsoft/Web-Dev-For-Beginners

– HTML/CSS/JavaScriptを触れるいい感じの教材が欲しかった
– そこそこのボリュームがあり、作りながら学べるタイプの教材
– 基礎的なトピックが一通り網羅されている
– 質が高そう
– なにせあのMicrosoftなので、きっと良いものでしょう。
– 題材が**面白そう**
– 軽く調べた感じだとチュートリアルでよくある題材として「TODOアプリ」「クイズアプリ」などがあるみたいですが、どれもどう実装するのか想像がついてしまって、余り興味がわきませんでした。
– しかしこの教材は「テラリウム」「タイピングゲーム」「ブラウザ拡張機能」

Rails index.html.erbとindex.htmlの違いについて

# 1. はじめに

Ruby on Railsで`index.html.erb`の`erb`ってなんだってなりますよね。
`index.html`との違いってなんだろって思ったと思います。
そんなみんなの助けになればな！っと思ってこの記事を書きます。

# 2.index.htmlとindex.html.erbの違いについて

***html.erb***とはなんだろうって思いますよね
***html.erb***ファイルはHTMLなどの文章の中にRubyスクリプトを埋め込むためのライブラリのことです。
これは、***Rubyスクリプトが組み込まれたhtmlファイルのようなもの***と覚えてもらえれば、大丈夫です。

# 3. index.htmlとindex.html.erbの記述の違いについて

index.html.erbファイルには***Rubyスクリプト***で書き込みます。
Rubyスクリプトで記述されていても、パソコンで表示をされるときは、***htmlファイル***に変化されます。

これから違いをコードで表示していきます。

### 1. html.erbファイル

imgタグの位置についてのまとめ

imgの位置に対してのまとめ

最近Progateでhtml,cssを勉強した際に画像を中心に寄せることができたりできなかったりしたので自分なりにまとめます。

link_toにclassを付けるのにハマった話とその対処法

## やりたかったこと
・aタグにclassを設けて、flexboxを使う。
## 前提
・Ruby 3.0.2
・rails 6.1.4.4
・Bootstrap、slim導入済み
※htmlはslimで記述しています。erbの方は、適宜erbに読み替えてください。
今回、controllerとactionを指定して、リンク先を設定してます。
## 先に結論
以下のように記述することで解決できました！

“`slim:
= link_to({ controller: ‘messages’, action: ‘roomshow’, to_user_id: message_user_id }, class: “d-flex flex-row”) do
“`
## 失敗したパターン
######１. classを普通に追記する

“`slim:
= link_to controller: ‘messages’, action: ‘roomshow’, to_user_id: message_user_id, class: “d-flex flex-row” do
“`

“`ht

フォントサイズ変更方法

今回は、フォントサイズ変更方法を簡単に教えます

“`ruby

ここに好きなことを入力

“`
数字の6のところは、文字の大きさの変更を示します
1~7まで数字を変更できます

基本　Aタグページジャンプ機能作成

今回は、ホームページの絶対必要ページジャンプ機能を、作成しましょう???

“`ruby

表示する文字

“`

完成
たったの一行で完成します
プログラム初心者には、必要です覚えてみてください

noindex にすると OGP 画像が表示されない

表題の通りなのですが、ウェブサイトの開発時に OGP を確認したく、[OGP確認](https://rakko.tools/tools/9/)でチェックしたところ、OGP画像が表示されていません。

いろいろ試行錯誤した結果、原因は META 要素の noindex でした。

“`

“`

開発中なのでクローラーに index されないように仕込んでおいたのですが、これを入れると OGP の画像が読み込まれないようです。

ロリポップでWordPressのサイトを復旧した時SVGが表示されない

WordPressを使ったWebサイトをロリポップで、復旧することになりました。
WordPressの引越しとテーマの反映が容易に終わったので、完成と思いました。

ところが、画像が表示されていないのです。
imagesフォルダのパスが相対パスで書かれていたので、今の環境に合わないのか？と思って修正してもダメでした。

ブラウザの検証機能を使って要素を調べたら、SVGファイルだけが表示されていないと分かりました。

ネットで調べて、この記事を見つけました。

https://hira-s.net/blog/svg/

https://hiromode.hatenablog.com/entry/2018/11/13/153026

ロリポップのようにサーバーにSVGの表示ができるように、設定が必要なサーバーがあるようです。
.htaccessに、MIMEタイプの設定をすると解決します。

“`html
AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz
“`
ブログの中には、

“`html
AddType image/