f@ctor

今さら聞けないHTML　2021年09月24日

今さら聞けないHTML　2021年09月24日
目次

【個人開発】さんまを焼くだけのアプリを作ってみた

# **はじめに**
さんまが食べたいなぁと思いましたが、なかなかさんまを食べる機会がないなぁと思ったので、さんまを焼けるアプリを作成しました。

名前の通り、さんまを焼くだけのアプリです。
就活の息抜きなので約1日で作成しました。

https://gifted-curran-aecac2.netlify.app/

# 構造
HTML、CSS、JavaScriptのみのお手軽実装。
UIフレームワークとしてはbootstrapを使ってます。

# **デプロイ**

netlify

# **作ってみての感想**
m秒を使ってのストップウォッチは初めてだったので、m秒の部分の実装は結構時間かかりました。

色々UI凝ろうかなと色々いじってみましたが、さんまを焼くだけのアプリなので、simple is bestの境地に辿り着きました。

cssでさんまの焼き具合を進行させているので、始まる前のmodal出現時にすでに焼き始めたりしてしまっていたので、そこの制御も意外と手間取り…。

PC対応なので、レスポンシブデザインも追々やらないとなぁと思ってます。

# **おわりに**

元記事を表示

技術ブログを書いていこうと思う

初めましてMISIMAと申します。

まず初めに簡単な経歴を書いていきます。
専門学校時代は、ゲームプログラミングを学んでいました。
習った言語は、Ｃ言語Ｃ＋＋ JAVASCRIPT アンドロイドアプリ開発、LINX 3Dゲーム開発。
専門学校卒業後は4年間製造業に派遣で勤めてました、仕事しているうちにホームページや他のプログラミングを独学で学び、無職になってwebデザインの職業訓練を現在は受けています。

持っている資格


c言語検定2級

勉強している言語やジャンル


PHP(本、ドットインストール等で勉強中)
SQL(プロゲート、ドットインストール、リファレンス）
HTML、CSS(プロゲート、本、職業訓練)
JAVASCRIPT(本、リファレンス等）

その他
WEBデザイン（デイトラ、本、職業訓練）

これからの記事について


習った事、独学で得た知識を分かりやすく上げていきます。

元記事を表示

font-size: 62.5%;はアクセシビリティを損ねるのか？

## これは何

ルート要素に`font-size: 62.5%;`を指定しつつ、それぞれの要素に`font-size: ○○rem;`と指定するやり方はアクセシビリティを損なうという意見をたまに見るので、それを検証した記事です

## 結論

ここでいう「アクセシビリティ」が「ブラウザのfont-size変更機能が正しく機能する」を意味するなら損ねません。

## 事の発端

「font-size指定をするにはpxが良いかremが良いか」の話題、時折盛り上がりますよね。

いつだったか「`font-size: 62.5%;`はアクセシビリティを損ねる」とツイートされているのを見つけました。
なんでも、ブラウザが持っているfont-size変更機能が上手く働かなくとのことです。

書かれていたのは**記憶が正しければ**[^1]以下のような内容。

– デフォルトのfont-sizeは16px
– 設定変更で32pxにしたとする（2倍に拡大している）
– CSSでの`font-size: 62.5%;`のせいで、200 * 0.625 = 125、つまり125%の拡大率にしかならない

元記事を表示

HTMLを記述する際の細かい要素について！

#結論！

head要素とbody要素には、それぞれ細かい要素があります！

head要素の記述は、ブラウザ上には表示されない!

body要素には、ブラウザ上に表示される情報を記述する!

以上の事が答えだと思います！

では、細かい要素について書いていきたいと思います！

#①.title要素

＊head要素の中に記述します！

ウェブサイトのタイトルを指定する要素です！

title要素内にタイトルを記述してもウェブサイトの画面上には表示されません！

ブラウザのタブに表示するタイトルとして使用されます！

下記が記述例です！

“`php




HTML勉強用ウェブサイト




“`

開始タグ　＝　< >』と、終わりを示す『終了タグ　＝　』で囲みます！

これでタブにタイトル情報が表示されます！

#②.　h１〜h６要素（見出し要素）

＊body

元記事を表示

iPhoneでも全画面表示（iOS15への対応）

# はじめに

>以前の投稿からの iOS15 への対応となりますので、こちらもご参照ください。

https://qiita.com/MARUMOTOSHINICHI/items/151e93e54d367e36d7eb

# やってみるしかない
> サンプルコード

“`html:index.html