HTML 作ったHTMLをスマホで使いたい人へ。Vercelで無料公開する手順をまとめました
作ったHTMLファイルをスマホで使いたくて、Vercelで公開してみました。Vercelとは何かという説明から、フォルダの作り方、ターミナルでのコマンド、URLが発行されるまでの流れを実際の画面の順番どおりにまとめています。
HTML
HTML 
CSS 【CSS】iPhone Safariで上下に余白ができてしまう問題
HTML・CSS・JavaScriptで制作したサイトを調整していた際、iPhone（iOS Safari）でのみ上下に白い余白が出てしまう現象に遭遇しました。問題の画像↓（ちなみにこのサイトはです！）調べていく中で分かった原因と、実際に効...
CSS 【JavaScript】Chart.jsでラベルを表示させたい！
自分用のメモとして記事を作成しました。ラベル表示で悩んでいる方にもお役に立てたらと思います！今回は下のようなグラフを作成します。別の記事で、Chart.jsが表示されない件についても記事にしているので、お困りの方はご参照ください！書き方HT...
CSS 【JavaScript】Chart.jsが表示されない！｜初期状態非表示にしてませんか？
今回はサイトで円グラフを表示させるために、Chart.jsを使用することにしました。検索していると比較的簡単そうに実装できそうだったため舐めていましたが、落とし穴が！特に、入力した数値を入れて「enter」でグラフを表示させるような動きを書...
HTML パンくずリストメモ
SEO効果JSON-LD、microdata、RDFamicrodata、RDFaという書き方がある。JSON-LD形式は、現在Googleの構造化データのマークアップとして推奨されている。JSON-LD形式を書いても、ページには表示されな...
CSS 【CSS】オシャレな境界線と、白い線を消す
ギザギザ、尖り、丸い境界線が作れるオシャレな境界線を作ることに関しては、別のページでも紹介しています。境界線をつけると、白い線がついてしまう問題境界線をCSSで作ると、白い線ができてしまうことがあります。これを解消する方法をご紹介します。c...
HTML 謎の空白「$#xfeff」
サイト作成をしていた際に、1つのページだけ謎の空白ができていました。そこで、デベロッパーツールで調べてみると、そこの部分に「$#xfeff」というものが入っていることに気づきました。スマホでも確認してみると、余白ではなく、改行がされている様...
HTML ファビコンが表示されない
表示されないことについて調べると、いろんなところで出てくるのがキャッシュを消せと。キャッシュを消しても、ちゃんと載っているかわからない時、調べるサイトがありました。これで確認すると、パスの誤りや、サーバーのアップロード先の誤りなどが見つかり...
HTML 【HTML】Googleマップ載せる方法
① Googleマップで載せたい場所を検索共有ボタンを押すと、下記の表示が出るので、「地図を埋め込む」を押すとHTMLコードが出てくる。② HTMLに記入小サイズにすると、widthは400とHTMLにでてくる。％しておいた方がコントロール...
HTML HTMLのルール（全角スペースを使用しない）
HTMLにはルールがあるようで、初心者の私はわかりませんでした。教えてもらったものをご紹介します。全角スペースは使わないキーボードで入力する全角スペースは推奨されていません。理由は下記のとおりです。・複数人でコードを共有する場合に、ミスなの...
HTML 【HTML】div、p、span タグの使い分けメモ
div タグウェブページのセクションやブロックを定義p タグ段落を定義span タグ文中の一部を囲むときに使う特定のテキストを強調するときなど
HTML 【HTML】「article」の使い方メモ／コンテンツをグループ化
articleサイトの中で記事やコンテンツの独立したセクションを定義articleで囲むことで独立した要素になるページの構造を明確にし、コンテンツをグループ化するための重要なものです。<article class="post-item"> ...