HTML + Chromeで名刺を作ってみよう
名刺のオンデマンド印刷に使うPDFデータをHTMLとChromeで作ってみたので、その際の備忘録です。 基本的なツール Google Chrome -- レンダリングの確認、PDFへの変換に利用する 技術的なポイント ページサイズは CSS の @media print { @page { size: 97mm 61mm; } } により指定する。...
View ArticleKotlin（JavaScript ）で地図アプリ（ゴミ拾いアプリ）。（14日目）
今日やった事 MySQLにある位置情報をすべてWEB上の地図に表示していたのを、日付を選択して表示できるように変更。 使用言語： HTML、CSS、JavaScript、jQuery、PHP 完成画面 BootStrapを使う予定でしたが、HTML+CSSを自分で書いて作成しました。...
View Article【CSS】エンジニアなら知っているSassの世界
「Sass」皆さんはご存じでしょうか？ Web開発をされているエンジニアの方々はよくご存じかと思います。（私は最近知りました...） 結論から言うとこのSassですが、覚えることでcssのコーディング速度が格段に向上します！ 仕事は捗り、残業は減り、余暇を楽しめ、人生が好転し始めるでしょう... そしてなによりコーディングが楽しくなります！ これはもう導入せざるを得ませんね...早速ご紹介します。...
View ArticleHTML要素をドーナツ状に切り抜いて、その他の部分はクリック不能にさせる(clip-path)
はじめに ユーザーに特定の箇所以外操作してほしくない時ってありますよね？ 素のcssとjavascriptだけで実装できる方法があるので健忘録としてまとめます。 実装例 仕組みとしては単純で、画面を覆う要素(ここではcoverとしています)を作成し、clip-pathスタイルで指定箇所を切り抜くだけです。 See the Pen Untitled by rahhi555 (@rahhi555) on...
View Articleチャットルーム作成
今回は、チャットルーム作成デース チャットアプリを作っています 発生している問題・エラー ありません 例） NameError (uninitialized constant World) または、問題・エラーが起きている画像をここにドラッグアンドドロップ 該当するソースコード <!DOCTYPE html><html><meta...
View Article自動答え表示機能付き問題作成しよう
今回は、答え合わせボタンを、押すと、自動的に答えを点数を表示してくれる、WEBアプリを、作ってみたいと、思います!!!!! 下記のソースコードは、本当に動くものです 参考にしていただければ幸いです。 答え合わせボタンを、押された時の答え <html> <head> <title>例題４</title> <script...
View Articleform input type="file"のCSSを変える方法
目的 form、type="file"の デフォルトのCSSを変更する 手順 新しいlabelを用意する デフォルトのボタンをdiplay:noneで削除 新しいlabelのCSSを変更する 新しいlabelを用意する <label for="file-upload" class="custom-file-upload"> Custom Upload </label>...
View Articleパスワード入力欄を、作成しよう
ファイルに、パスワードを入れたい時があるので、 パスワードをつけたいなぁと、思いました なので、パスワード認証画面を、投稿させていただきましたぁ 背景の設定 <!doctype html> <html> <head> <meta charset="utf-8"> <title>パスワード認証画面-パスワードを入力</title>...
View Article[SCSS] selectorのinner ruleは1階層までが良い（親要素参照の `＆`）
概要 すごいざっくりですが、下記のようなHTMLがあったとします（タグは全てdivに統一しました）。 <div class="root"> <div class="icon">icon</div> <div class="caption">caption</div> </div>...
View ArticleKotlin（+Chart.js）で地図アプリ（ゴミ拾いアプリ）。（15日目）
今日やったこと ・Korlinで音を鳴らす（送信成功 or 失敗時に効果音を再生） ・設定画面に、効果音に関する項目を作成 ・WEBにChart.jsを使ってグラフを作成 効果音を付けた理由...
View Article【最終回】コロナ禍だから何かできることをー 自宅療養者連絡ツール ー
まえがき 2022年1月。 新年早々に第６波が発生しそうな予感がします。 前回の第５波のように自宅待機者がたくさん出てくるのでは？ そして、担当者の方々が緊急事態となり、労基法の適用外になるほど働くことになるのではないか 心配でなりません。 そこで、前回から作成していたLINEを使った自宅療養者管理ツールを紹介します。 前回までの目次は一番下にあります イメージ動画 自分にできること...
View ArticleBootstrapのnav barでレスポンシブ対応のドロップダウンメニューを作る方法
Bootstrapを利用してヘッダーを作成しました。しかし、公式のドキュメントを参考にドロップダウンメニューを実装したところ、スマホでは綺麗に表示されず、、、レスポンシブ対応にする方法を見つけたのでメモしておきます。 Navbar (ナビゲーションバー)の実装 ナビゲーションバーのHTMLは以下のようにしました。 sample <div> <nav class="navbar...
View ArticleVue.jsでメッセージを一時的にフェードインとアウトで出す方法
やりたいこと Vue.jsをやり始めたばかりで、間違っている点あればご教授お願いします。 更新や適応をした際に、画面の上や下に一時的にメッセージが表示される物を作成します。 例えば、メッセージを送信したら「送信完了」などのように表示されるようにします。 今回はボタンを押した後、メッセージを２秒間表示するようにしています。 コード...
View ArticleVuetifyの便利なCSSのクラス集
Vuetifyではルールに従ったクラス名を設定するとCSSを書かなくてもスタイルが適用されることを知りました。 そんな便利なCSSのクラスを書き溜めていきます。 文字 スタイル クラス名の書き方 例 参考リンク 文字色 {色名}--text red--text カラーネーム一覧 濃さ text--{lighten｜darken}-{n} text--lighten-1 マテリアルカラーパレット —...
View Article📷カメラ機能を作成しよう ＊フロントカメラ編
カメラ機能が、パソコンに入ってなかった人優先でカメラ機能を 作ってみました 有線カメラを、パソコンに付けると監視カメラにもなりますね それとピクチャインピクチャを利用するといつでも見れますね それじゃ作ってみよう <li><a href="#area-1">WEBカメラの映像を表示</a></li> <li><a...
View Article📷カメラ機能を作成してみよう ＊リアカメラ編
今回はリアカメラ編を作成しようと思います リアカメラとは、キーボードがある方向のカメラです じゃ作ってみるでー <li><a href="#area-1">WEBカメラの映像を表示</a></li> <li><a href="#area-2">リアカメラでの、撮影</a></li>...
View Articleアクセシビリティを意識したの作り方
概要 HTMLのTABLEタグでテーブルを作るとき、いろんなタグが使うことができる。 <table>からはじまり、<thead>、<tbody>、<tr>、<th>、<rd>など、 Tableを作るのにたくさんタグが使うことができ、複雑でややこしい。 この記事では、テーブルで使うことができるタグの役割を会せる、...
View Article空のインラインブロックのベースラインは、マージン領域辺の下端
タイトルのとおりなのですが、うっかりしそうな内容だったので記事にします。 インラインブロックの下マージンがずれる きっかけは teratail のこの質問でした。 「インラインブロックの下マージンがずれる」という問題で、なかなか理由がわからなかったのです。 <div class="empty"></div> <br>...
View Article【ZOOM】毎日のZOOM生活をちょっとだけ快適にしたい
毎日のオンライン会議・授業でちょっとだけ楽できるアプリをつくりました こんにちは．kakekakemiyaと申します． 現在は東京大学工学部電子情報工学科というところに所属しております． 今回は，私の作ったアプリの紹介をさせていただきたく投稿させていただきました．...
View Article📷カメラ機能を作ってみよう ＊フロントカメラ編
📷機能を作ろう <li><a href="#area-1">WEBカメラの映像を表示</a></li> <li><a href="#area-2">リアカメラでの、撮影</a></li> <li><a...
View Article