aspect-ratioでアスペクト比を固定する
環境 Windows10 Chrome93 Chromeでは88から、Firefoxでは89から、Safariは未対応のようです。 追記:Safari15からaspect-ratioに対応するようです。リリースが待ち遠しいです。 aspect-ratio 今回は16:9にします <div class="container"></div> .container {...
View Articleclass・idの複数指定
See the Pen qiita by tomoe (@paripi) on CodePen. 同じタグにidを複数指定は、、 エラーにはならない（表示されないとかにはならない） 文法的には誤り CSSが思い通りに適用されない 【参考】 HTMLで同じタグに複数のid属性を指定することはできる？
View ArticleJSやCSSにクエリストリングを与えてファイル更新時にブラウザ側のキャッシュクリアを行わせる
はじめに タイトルの内容で記事を書いた理由は、「キャッシュクリアの為にファイル名の後ろに数字をつけるアレ」と曖昧な覚え方をしていたからです。 曖昧な覚え方だとググることすらもできなかったので、備忘録として記事にしました。 Cache Busting...
View Articleあなたのプロジェクトを煌やかにするアニメーションライブラリ18選
Original article: https://dev.to/kerthin/18-amazing-github-repositories-that-will-help-you-make-a-beautiful-project-3pgo 以下はRoden( Twitter / GitHub / Webサイト )によるアニメーションライブラリ紹介記事、18 amazing 🤩 GitHub...
View Article高速道路整備の変遷をMapbox GL JSで表示してみました
はじめに 国土数値情報の高速道路時系列データを用いて、高速道路整備の変遷（1962～2020年）をMapbox GL JS（v2）のタイムスライダー機能で表示してみました。 高速道路時系列データは以下の国土数値情報の提供サイトよりgeojsonファイル（令和2年）をダウンロードして使用しています。...
View ArticleiPhoneでも全画面表示させたい、んだ。
はじめに Fullscreen API に対応していない iPhoneで、どうしても全画面で表示させたい時がある。 特に landscape時の上部バーは、普通のサイトではスクロールすると隠れてくれるので邪魔に感じることはない。しかし、パノラマやVR等のコンテンツを表示する場合は邪魔に感じてしまいます、よね。...
View Article【rails】stylesheets直下の全てのCSSが読み込まれる原因
railsのCSSの読み込みについて railsでCSSはstylesheets/application.scssに記述するが、 上記以外のstylesheets直下のCSSファイルが自動で、 読み込まれていることがあり疑問に思った 原因 stylesheets/application.scss *= require_tree . *= require_self...
View ArticleGoogleフォームをカスタマイズしてHPに埋め込む【こまりメモ】
こんにちは。 こまりまゆこです。 自分が学習したことを載せています。 「Googleフォームを自分でカスタマイズしてHPに埋め込もう」 【主な内容】 ・Googleフォームをとは？ ・土台となるフォームの作り方 ・カスタムに必要な数字とURL ・完成形 Googleフォームとは？ 一言でいうと、アンケートや問い合わせフォームを簡単に作れるGoogleのサービス。...
View ArticleBotUIを使ってチャットボットを開発してみた
はじめに はじめまして！ t_powerです。 本記事では、社内FAQをBotUIでチャットボット化した話を扱います。 プログラミング知識があまりない・・・ チャットボットを作ってみたいけど難しそう・・・ と思っている人にはぴったりのツールだと思うので、是非ご覧ください！ 今回作成する上で下記のサイトを参考にさせていただきました。...
View ArticleSpringBootでCSSを使用する方法
CSSフォルダの配置場所 resourcesフォルダ>staticフォルダの配下にCSS等のフォルダを作成し、その中に配置する。 Thymeleafから参照する方法 <head> <!--中略--> <link th:href="@{/css/hoge.css}" rel="stylesheet" type="text/css">...
View Article日本の旅客鉄道の変遷をMapbox GL JSで表示してみました
はじめに 国土数値情報の鉄道時系列データを用いて、日本の旅客鉄道の変遷（1950～2020年）をMapbox GL JS（v2）のタイムスライダー機能で表示してみました。 鉄道時系列データは以下の国土数値情報の提供サイトよりgeojsonファイル（令和2年）をダウンロードして使用しています。...
View Articleライブラリなしでおしゃれなカラーピッカーを実装する【React】
はじめに <input type="color" />を使うことでカラーピッカー（ユーザーに色を選択させるUI）を簡単に実装できますが．見た目があまりかわいくない… そう思い，色々試してデザインする方法を編み出したので残しておきます． 結論 inputタグにopacity: 0;を設定することで透明にし，divタグで囲ってデザインする． 実装例...
View Article【HTML/CSS】画像の表示位置（上下左右中央）を完璧に制御する
概要 画像の表示位置をコントロールするCSSの実装について、雑に記載します。 （今後の自分の備忘録も兼ねて。） HTML/CSS <div class="contents"> <img class="image" width="128" height="128" src="image.png" /> </div> .contents { width: 100%;...
View ArticleGoogleフォーム送信後のサンクスページ【こまりメモ】
こんにちは。 こまりまゆこです。 自分が学習したことを載せています。 今回は前回の続きになります 「Googleフォーム送信後のサンクスページを作ろう」 【主な内容】 ・formのコードを変更と追加 ・form後に新しいコード追加 前回の記事を見ていない方はこちら formにコードを追加 ①前回のコードの1行目の...
View ArticleVueのタグが見えないようにローディング画面を付ける
Vueの規模が大きくなってくると、Vueのロードが完了するまでの間、{{ xxxx }}のようなタグが目立ってくるようになります。 Vueのコンポーネントを使えばうまく回避できるのかもしれませんが、Vueインスタンスと双方向データバインディングだけで満足している私にとっては、少々悩ましいです。...
View Article【初心者向け】初めての模写コーディングで役立つ豆知識・学習メモ（9/16）
学習内容 HTML/CSSコーディング練習 Railsアプリ開発2周目突入（rails new） 学んだこと HTML/CSSコーディング練習 flex関連 flex, flex-wrap, justify-content, aligin-itemsは親要素に付ける 複数の要素を横並びにしたいときは親要素にdisplay: flex;を指定する 要素の間隔を広げたい場合はgap:...
View ArticleCSS入門(よく目にする、使用するプロパティ)
概要 「あのプロパティは、こういう用途の時に使うはず..」となった時の忘備録として概要的な一覧を作成。 プロパティ一覧 汎用的、FlexBox、メディアクエリ...等ざっくりと分類ごとに一覧化しています。 随時、更新します。 汎用的 プロパティ 概要 備考 margin 要素の周りに追加の領域を作成 inline要素には、上下のmarginが効かない ※家はそのままで土地だけ広げるみたいな...
View ArticleCSS remとemの単位 レスポンシブ
理解しておく利点 親要素と子要素の比率の関係を変更したくない場合に実装が簡潔になる em 「現在指定されているフォントサイズ」に対して相対的な大きさを指定 子要素のフォントサイズを指定しない場合 親要素のサイズが適用される。 例えば 親要素がfont-size: 40px;のとき、 中の子要素は、font-size: 40px;の大きさに。 子要素のフォントサイズを2emなどにした場合...
View Articlehtmlで丸付き数字を文字化けせずに表示させる方法
htmlで丸付き数字を入力すると文字化けした「？」になるのを防ぐ方法です。 対応するコードを入力すれば、丸付き数字を表示させることができます。 表示→コード （白大） ①→ ① ⑪→ ⑪ ②→ ② ⑫→ ⑫ ③→ ③ ⑬→ ⑬ ④→ ④ ⑭→...
View Article文字をhoverすると画像が表示されるようにする
index.vue <template> <div> <p> <a href="#" class="Art__viewer">Test <span><img src="~@/assets/images/Main/****.jpg" alt=""></span> </a> </p>...
View Article