f@ctor

今さら聞けないHTML　2022年07月09日

今さら聞けないHTML　2022年07月09日
目次

MNISTを使ったモデルに自分で書いた数字を認識させてみた

# 概要
今回イチからディープラーニングについて学ぶ事になり、MNISTの学習モデルを作成しました。
ただそれだけだと面白みに欠けるので、HTMLも使って自分で書いた数字を認識させてみたり、その精度を上げる為にデータオーグメンテーション等の試行錯誤を行ってみたので、その過程を記事にしてみました。

# MNISTの学習
ここはあまり本題ではないので、ざっくりになります。
Google Colaboratory上で、kerasを利用してニューラルネットワークを構築し、MNISTデータセットの学習をしました。
その際のモデルの構造と各パラメータは以下の通りです。

“`
model.add(Conv2D(16, kernel_size=(3, 3), activation=’relu’, input_shape=(28, 28, 1)))
model.add(Conv2D(32, (3, 3), activation=’relu’))
model.add(MaxPooling2D(pool_size=(2, 2)))
model.add(Dropout(0.25))
model.add(

元記事を表示

ブラウザのタブをメモ帳化するURL文字列。ファビコンあり。

# Chromeなどのブラウザをメモ帳に

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100646/1d7fa92d-c2e4-c232-091b-75f1ff182bda.png)


こちらの方のtweetでバズっていた、
Chromeなどのブラウザを書き込み可能なメモ帳にするというURL文字列。
“`HTML
data:text/html,
“`
これをブラウザのURL欄に入れると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100646/2b8a79cd-02e5-cddb-69e1-cb0ba271d578.png)
タグの中に自由に書き込めるメモ帳になる。画像

元記事を表示

HTML＆CSSの基礎を学んだ後にしてよかったこと

# 結論：　コピーサイトを作る
「前書き」
私の記事は主に、プログラミング初心者がフロントエンドエンジニアになるために経験していることを書いたものです。
今回が初投稿になります。

勉強開始：3/18/2022

今回はHTMLとCSSの基礎を教科書で学んだ後、
**やってよかった経験**に関して書いていこうと思います。

## 好きなウェブサイトのトップページのコピーを作ってみる
HTMLとCSSの基礎を教科書で学んだ後、学んだことを忘れず「身に着ける」ために
愛用しているウェブサイトの見た目のコピーをトップぺージだけ作ってみることにしました。

勉強のために使用した本のリンク貼っておきます。

**使った教科書：[HTML&CSSの教科書](https://www.shoeisha.co.jp/book/detail/9784798158136)**

**コピー元参考サイト：[airbnb](https://www.airbnb.jp/)**

:::note warn
コピーした時から時間が経ってトップページが変わってしまいました
:::

コピーサイトを作ってみようと思っ

元記事を表示

【備忘録】ヘッダーの上部固定とフッターの下部配置の最適解

## 概要
ヘッダーとフッターをいい感じに表示するための方法を忘れないようにメモっとく。
この記事に書いてある通りに上から順番に設定していけばOK。

## Step0 下準備
パーツを用意する。

“`index.html






Document

HEADER

元記事を表示

HTML

■基本のHTML


DOCTYPE宣言と呼び、HTMLのバージョンを宣言するやつ。

HTMLのテンプレート

“`


　
　　


Title

　
　

　

“`

■ファビコン(サイトのアイコン)を表示する
ファビコンに使用するアイコンの画像を「.ico」で保存する。
(「png」や「jpeg」でもいいが、ブラウザによってはうまく表示されないことがある。)

``タグ
リンク
``

`

  • `タグ
  • リスト1
  • リスト2

    • `

  • `を`
      `要素で囲むとリス

    • 元記事を表示

    Markdownでレポートを書きたい

    # レポートは面倒
    ※ 読み飛ばしOK

    学生のみなさんならヘッドバンギング並みにうなずいてくれると思いますが、レポートは面倒です。
    私のレポート遍歴を簡単に振り返ると、最初は手書きでした。が、文章の追加が難しい、間違ったところを消すのが面倒、表作成が面倒、式を書くのが面倒、ペンを握るのが面倒、と問題だらけでした。
    しばらくしてWordを使い始めたところ、文章の追加や間違ったところの削除が非常に簡単になり感動しました。しかし数式は相変わらず面倒です。ラテン文字なんて膨大な数の中から探さないといけないし、「=」の位置が合わないからいまいち美しくないし・・・。
    そしてLaTeXを使うようになりました。これなら式も表もきれいに表示できるし、何よりキーボードからあまり手を放したくない自分としてはコマンドでラテン文字や分数などを作れるのは魅力的でした。
    が、これも壁にぶつかります。というのも、独特の記法が多くて面倒という壁です。LaTexの長所の一つは文書形式を細かく設定できることです(実際に二段組みやsectionの書式変更、概要や引用の機能を使って前刷りを作ったこともあります)が、正直レポー

    元記事を表示

    [Mac]VScodeで使えるショートカット

    ■サイドバーの操作

    サイドバーの表示/非表示
    `command`+`B`

    サイドバーへカーソルを移動する
    `command`+`0`

    エディタへカーソルを移動する
    `command`+`1`

    ■ワークスペース上のファイルウィンドウ切り替え

    一つ右のウィンドウを開く
    `command`+`option`+`→`

    一つ左のウィンドウを開く
    `command`+`option`+`←`

    ■検索

    ファイル検索
    `command`+`P`

    grep検索
    `command`+`Shift`+`F`

    大文字小文字を区別する(Match case)
    `command`+`option`+`C`

    単語単位で検索(Match Whole word)
    `command`+`option`+`W`

    正規表現を使用(Use Regulation words)
    `command`+`option`+`R`

    シンボルで検索
    `command`+`Shift`+`O`

    ■ジャンプ

    関数の定義先にジャンプする。
    (呼び出された関数を選択し)`F12`を押下

    ■入力補完

    ◎HTML

    タ

    元記事を表示

    ［HTML/JavaScript］fetch を利用してサーバからデータを取得

    ## この記事の内容
    JavaScript の `fetch` を利用してサーバからデータを取得する方法の復習

    ## 開発環境
    |項目|内容|備考|
    |—|—|—|
    |PC|MacBook Air （2020 M1）||
    |ブラウザ|Chrome||
    |エディタ|Visual Studio Code||

    ## 今回開発したもの
    – 郵便番号から住所を検索する Web アプリ

    ## ユースケース
    ### シナリオ
    #### アクター
    郵便番号から住所を検索したいユーザ

    #### 前提条件
    上記ユーザは、Web を利用できる環境にある

    #### 正常シナリオ
    1. ユーザは、ブラウザを利用して Web アプリ 《郵便番号から住所検索》 にアクセスする
    2. システムは、ブラウザにアプリ画面を表示する
    3. ユーザは、アプリの入力欄に郵便番号（７桁）を入力し、［検索］ ボタンをクリックする
    4. システムは、3. で入力された郵便番号に紐づく住所をブラウザに表示する

    #### 異常シナリオ（一部）
    3. a. ユーザは、アプリの入力欄に存在しない郵便番号を入力し、［検

    元記事を表示

    vscodeで補完機能を使用して、HTMLの基本構文を一瞬で記述する方法

    こんばんは、OKONIです！

    今回はタイトルの通り。
    #### “vscodeで補完機能を使用して、HTMLの基本構文を一瞬で記述する方法”
    についてです！

    先にお伝えしておきますが、HTMLの基本構文 ※1 というのは以下のコードのことです。
    ※1 正しい言い方があれば教えて下さい?

    “`





    Document



    “`

    # 具体的な方法について

    早速ですが、結論をお伝えします。

    まずはvscodeで、htmlファイルを準備して下さい。
    それから、!(半角びっくり

    元記事を表示

    プログラミング初心者の私がQiitaで質問したら起きたあるある①

    # Qiitaで質問したら起きたあるある

    私にはこんなことがあります。

    アプリを制作していたら、突然望んでいないバグが生じる。

    何が起きたんだ。

    どうしよう…何とかしようと考える…解決できない…課題が進まない…Qiitaで質問しよう

    すると…なぜか自分自身で解決方法が降りてくる。

    ## 気付いたこと
    Qiitaで質問する際に私が気をつけていることが、そのまま正しいバグ対処方法になっていた。

    ①正解は何か。（目標の明確化）
    ②問題点の把握（目標と現状の比較、入手している情報の整理）
    ③原因の分析(なぜ問題が生じているのか思案)
    ④対処したこと

    質問する前の私は、②で問題点を把握したつもりになって、③を抜かして、④に行くことが多い。

    ## とりあえず思いつくままに記事を書いて見たわけだが
    初心者の私は、バグが生じた際に、”どうしよう”から考える癖があるようだ。
    その結果、①を考えて、④に向かう傾向がある。（②③を考えていないわけではないが、
    結果的に考えていないことと同じである。）

    質問を投稿した後にいただく他のユーザーさんからのコメントの多くが、

    元記事を表示

    [bootstrap][table]bootstrapを使用したTableを印刷すると背景色が表示されない

    # はじめに
    bootstrapとtableを使用して作成した表を印刷した時、
    tableに設定したbackgroundcolorが表示されず苦しめられたので、
    原因と解決策を記載します。

    # 前提
    印刷するのは以下のような表です。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727564/646c217d-4989-a286-001f-b8fa3ab0541c.png)

    印刷すると以下のようにtableに設定したbackgroundcolorが無効になります。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2727564/f0df4170-2086-2fa3-7b48-4dda58a52e62.png)

    環境
    ・CDN:bootstrap4.3.1

    # 原因
    bootstrapの仕様です。
    @media printを使用し、強制的にbackgroundcolorを白に設定し

    元記事を表示

    CSS FlexboxとGridのレイアウト練習問題

    # こちらの記事でFlexboxの練習ができるのでぜひ挑戦してみてください！

    https://qiita.com/T_Takahiro18/items/9a2b16cfc435ec99f96c

    # はじめに

    **div**のサイズは以下のような設定で行なってください。

    :::note info
    インフォメーション
    divのサイズを変える場合があります。
    :::

    “`rb:index.css
    * {
    padding: 0;
    margin: 0;
    }

    div {
    height: 200px;
    width: 25%;
    }

    # background-colorはこちらのカラーになります。
    background-color: aqua;
    background-color: red;
    background-color: blue;
    background-color: green;
    background-color: yellowgreen;
    background-color: salmon;
    “`

    # 1. FlexboxとGapを利用し

    元記事を表示

    土日で見つけた学習教材

    こんにちは。
    長野県のとあるA型事業所でプログラミングをしています。

    土日を使っていくつかプログラミングの学習教材を見つけてみました。
    あ、その前にですが、Twitterのアカウントを作成しました。

    Twitter @toivokitahara

    よろしければ、見てみてください。
    情報と出会うツールとしてはTwitterは優秀ですね。

    ・ぷよぷよプログラミング
    https://puyo.sega.jp/program_2020/

    いつの間にかぷよぷよでプログラミングを学べるようになっていてびっくりしました。
    写経といいますが、ソースコードを気合いで書き写すようなコースもあるようです。
    HTMLやJavaScriptの講座があるみたいです。

    スタバでMacを広げていらっしゃるエンジニアさんのつぶやきで知りました。
    元のつぶやきがどれだったか覚えてないのですが、Twitterで情報収集しました。

    ・Web制作、Web開発の歩き方
    https://baapuro.com/

    こちらもTwitter経由で得た情報でした。
    まだ使い方がよくわかってませんが、有用なサイトのように

    元記事を表示

    HTMLのcanvasでリバーシ（オセロ）ゲームを作る#1

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729479/d43940ee-03b8-668f-6ad9-98bb3035530b.png)

    　Qiita初投稿です。趣味で簡単なゲーム制作をしています。
    　なんか記事を書いてみたいなと思ったので、需要があるかわかりませんが、HTMLのcanvasという要素でリバーシ（オセロ）を制作する方法を記事に残したいと思います。至らぬ点も多いかと思いますが、温かい目でご覧ください。あと、飽き性なので細々とやっていきます。

    # 目次
    – はじめに
    – canvasについて
    – 準備
    – ボードの表示
    – まとめ

    # はじめに
    　HTML5のcanvas要素を使うと、ブラウザ上に図形を自由に描画することができます。今回は、このcanvasを使ってリバーシを作る方法を紹介したいと思います。
    　第一回にあたる今回はcanvasの紹介からボードの表示までを書きたいと思います。

    # canvasについて
    – canvasは以下のようにHTML内に記

    元記事を表示

    GoのWebサービスでhtmlを返す

    今回はhttpリクエストの処理をcontrollerに記述しhtmlを返す方法をメモ。

    # フォルダ構成
    “`
    root/
    　├ routes/
    　├ 　└ web.go/
    　├ controller/
    　│　 └ home_controller.go/
    　└ templates/index.html
    “`
    laravelのような構成で作成。

    # コントローラー
    “`go:controller/home_controller.go
    package controller

    import (
    “helloworld/models”
    “log”
    “net/http”
    )

    // Home画面の構造体を作成
    type Home struct {}

    func (h *Home)Index(w http.ResponseWriter, r *http.Request) {
    　　　// ここに処理を書いていく
    }
    “`

    今回はページ毎にコントローラーを分割しRESTapiを作成したかったので、構造体Homeのメソッドを作成。別のコントローラーにはまた違う構造体のメソッドを作成し

    元記事を表示

    レスポンシブ対応で役立つ実装の仕方

    レスポンシブ対応しようと思っていたけど、いざ実装しようと思ってたら何をすれば良いのか分からない人向けの記事となります。
    いくつか追加で載せていきますが、とりあえず絶対に知っておいた方がよさそうなことを3選まとめておきます。

    1、まずはなんと言っても開発者ツールで携帯の表示を確認すること。
    MacBookでは、ショートカットキーでoption + command + Iを打つと開発者ツールが開きます。
    ![94155508-951D-4ADC-BD47-18BB2EA18CAA.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358181/fe891a5a-2a49-73e3-162e-f449bda55678.jpeg)

    ここの赤いところを押すと携帯での表示画面に切り替わる。

    2、viewportの設定

    とhtmlファイルのheadの中に記述しておく。
    そうす

    元記事を表示

    【Rails】formからハッシュの配列をパラメータとして送信する

    ### 最終的にcontrollerで受け取りたいparamsのイメージ
    Railsのcontrollerで以下のような形式で同じname属性で固められた多次元配列をparamsとして受け取りたい

    “`ruby
    users: [
    {
    id: 10, name: “山田太郎”, email: “test@email.com”, phone_number: ‘024-111-11’, memo: “役職：工場長”,
    action_histoires: [
    {id: 10, action_datetime: “2022-05-13T00:00:00”, description: “外出”},
    {id: 20, action_datetime: “2022-05-13T00:00:00”, description: “直帰”},
    {id: nil, action_datetime: “2022-05-13T00:00:00”, description: “時間休 13:00 – 15:00”},
    ],
    },
    {
    id: 20, name: “山田太郎

    元記事を表示

    Goで静的ファイルを設置

    今回Nuxt.jsを使ったSPAの作成だけではなく、初心に帰りSSGのアプリも作成。staticファイルの使い方をメモ。
    # muxにハンドラーを登録
    “`go:web.go
    package routes

    import (
    “backend/config”
    “backend/controller”
    “net/http”
    )

    var home controller.Home

    func Routes() http.Handler{
    mux := http.NewServeMux()

    // static
    staticFiles := http.FileServer(http.Dir(“public”)) // publicフォルダ
    uploadFiles := http.FileServer(http.Dir(“upload”)) // uploadフォルダ
    mux.Handle(“/static/”, http.StripPrefix(“/static/”, staticFiles))
    mux.Handle(“/media/”, http.StripPrefix

    元記事を表示

    【Chrome】デベロッパーツール 使い方 ちょっとだけ便利に

    普段からお世話になっているGoogleデベロッパーツール。
    普通に使っているだけでも十分ですが、ちょっと便利な機能をまとめてみました。

    基本的な使い方の部分は省略します。

    ## デベロッパーツールの基本機能
    フロントエンド開発では必須のツールかと思います。
    タブの種類は下記項目があり、用途を簡単に書いておきます。

    + Elements / 要素 (要素の調査・編集)
    + Console / コンソール (JSの実行・ログの記録)
    + Sources/ソース (ファイル表示・デバッグ・編集・ワークスペース)
    + Network / ネットワーク (アクティビティログ・リソースの確認)
    + Performance / パフォーマンス (サイトパフォーマンス計測)
    + Memory / メモリ (メモリ使用量の詳細確認)
    + Security / セキュリティ (コンテンツや通信、証明書の安全性の確認)
    + Application / アプリケーション (ストレージやキャッシュ、画像,html…などのリソースを確認)
    + Lighthouse （サイトパフォーマンスの表示・詳細

    元記事を表示

    【HTML 文字を強調するためには？】

    こんにちは。
    新卒入社3年目文系出身のエンジニアです。
    今回はHTMLでどのようにして文字を強調したらよいか？について語っていきます。

    ### そもそもなぜこのテーマにしたのか
    なぜこのテーマにしたのかといいますと、
    案件でちょこちょこありがたいことにコーディングをする機会があるのですが、
    なかなか思うようにいかず、いつもコーディングの時BPさんに絞られています。
    なので、さすがに本腰を入れて勉強しないといけないと思い(遅い。。笑)、
    CODEPREPで今までやってきた開発言語の総復習を行っていました。
    HTML入門 HTML5編を取り組んでいたところ、
    穴埋め式問題で分からない問題に直面しました！
    おそるおそるHINTの内容を見てみると、
    文字を強調させるにはどんなタグを使用すればよいかという内容でした。
    普段の案件でHTMLを少ししか触ったことがなくましてや文字を強調させるタグについての内容は全く知らなかったため、今回知識の定着として投稿してみようと思いました。

    ### 文字を強調したいタグの種類
    文字を強調したいタグの種類は、大まかに分けて4つあります。

    #### mark

    元記事を表示

    OTHERカテゴリの最新記事