HTML、CSS、JavaScriptのファイルをリンクさせる方法
はじめに Webサイトの開発をやっているとHTML、CSS、JavaScriptのファイルを主に扱うのだが、そお三つのファイルをリンクさせて、HTMLに適用する方法を紹介したいと思います。 環境 Mac OS Monterey MacBook Pro M1 VS Code 本編 主にHTMLのファイルにCSS、JavaScriptを適用させる感じです。 HTMLとCSS...
View Article【CSS】メディアクエリ(Media Queries)基礎
メディアクエリを利用したRWD（レスポンシブ・ウェブ・デザイン）の実装 モバイルファースト 小さなビューポートサイズをベースとして、大きなビューポート用のスタイルを上書きしていくスタイル。 上書きするスタイルが少なくなる傾向にある。 flexboxやgridなど、包括する要素が必要になるDOM（HTMLタグ）などを予め想定する必要がある。 /* ベーススタイル */ width: 100%; /*...
View Article疑似セレクタ・疑似要素の活用
擬似クラスを利用すると、マウスホバー状態時など、HTMLのみでは表現できない状態のスタイルを設定できます。 擬似要素はHTML上に直接指定できない要素にスタイルをあてたり、存在しない追加のコンテンツを挿入したりできます。 サンプルのNEWSは、マウスオーバーやドラッグで選択した時のスタイル設定、 2つめ以降の要素にのみマージンを設定したり、CSSだけでNEWの表記を追加しています。 See the...
View Articlehoverで変化するsns共有ボタン
Fontawesomeを使ったiconは便利ですよね、ただシンプルなので味気ない気もします。 今回はちょっとアレンジしたいと思います！ 前提 HTML CSS Fontawesome（CDN） Bootstrap (CDN) だけで実装可能です！ 動作はこちらで確認してください 実装 まずはHTMLファイルのheadに以下のコードを追加してください index.css <link...
View ArticleWeb APIを使って、特定の音声に対して返答するWebアプリの作成
背景 ひとり暮らししていると 家に帰って「ただいま」 といっても返答がない 悲しい… そんなことありますよね。 この悲しさを少しでも緩和してくれるアプリを作成しました。 制作物 このCodepenを参考にしました。 こちらのCodePenでは音声の認識と出力が別になっています。 今回は、 Web APIを使用し、特定の入力音声に応じて音声が出力されるように作成しました。 <!DOCTYPE...
View Article【C#】WebアプリケーションのレイアウトはCSS Grid Layoutで決まり！
はじめに この記事ではC#+WPF開発者向けにCSS Grid Layoutを紹介します。C#開発者以外のみなさんごめんなさい。 Webアプリケーションのレイアウト、どうするの？ 今までデスクトップアプリケーション開発しかしてこなかったC#erのみなさんがある日突然Webアプリケーションを開発することになったときにぶつかる問題、それがレイアウト。 WPFならできるんじゃ～俺にWPFを返せ！...
View ArticleJavascript カレンダー作成
はじめに 本稿では下記動画にあるソースコードを解説します。 動画にあるカレンダーは、他のライブラリに依存しない実装になっています。 簡単なカレンダーが表示できれば十分、かつ、依存ライブラリを増やしたくない場合などで使えると思います。 ソースコード https://github.com/lashaNoz/Calendar カレンダー作成に必要な変数 // 今日の日付 EX) 2021/11/24...
View Articleメッセージを送信後、画面最下部まで自動でスクロールする（React）
何をやるのか LINEのように、チャット画面で新規メッセージを送信後、画面最下部まで自動でスクロールする機能の実装方法について解説します。 Reactで作ったSPAが前提の方法です。 1. チャット画面を実装 まずはサンプルとなるチャット画面を実装。 ChatScreen.jsx import React, { useState } from 'react'; import...
View ArticleHTMLの画面サイズの扱い
これは何？ ツールなどをちゃちゃっと作って公開するときにモバイル対応してないとちょっと残念。その対策のメモです。 簡単に言うと、viewportをJavaScriptで制御する、またはCSSでなんとかする方法です。 実装 CSSで何とかする div.contentをスクリーンのサイズで動的に変えるのがポイント。 <!DOCTYPE html> <head> <meta...
View ArticleYellowfinの表からチェックボックスでカラムの表示非表示を切り替える
はじめに ドリルスルー先のレポート上で、予め決めたカラムの表示非表示をチェックボックスで切り替えたいというご要望があったため、実現できるか試してみた記録です。 結論からいうとGifで動いている通り実現できましたが、レポートを保存するたびに要素のクラス名が変更になるのでなかなか面倒くさい感じです。...
View ArticleTypeScriptでHTMLElementのstyleプロパティの型を指定する方法
結論 DOMのstyleを動的に変えたい時に let someElementStyle:Partial<CSSStyleDeclaration>; と指定することで、エディタによる補完や型チェックの恩恵を得ることができる。
View Articleflex grow, shrink, basis
flex-grow 子要素全ての幅を足しても親要素の幅100%にならない時、その余白を各子要素間でどの程度負担するかを表す。 デフォルト0。余白があってもほったらかし。負担しない = 伸びない 前提 子1にwidth 30% 子2にwidth 30% => 余白は40%。 子要素間の合計が1以上のケース 子1にflexGrow1, 子2にflexGrow3を設定すると、余白を1:3...
View Articleスマホで見るとレスポンシブが効かない。viewport入れてもダメな時は？
viewportを入れてるのに スマホで見るとレスポンシブデザインが効かない。 だけど パソコンで横幅をスマホサイズに小さくすると しっかりレスポンシブデザインが効いている。 こういうケースがあります。 わたしはこの問題にぶつかったのですが、 viewportのタグを入れてからしばらく時間を置いたら 問題が解決しました。 １viewportを入れてる...
View Articlestyled-componentsで条件付きmixinをする方法
はじめに styled-componentsで条件付きレンダリングをする場合、以下のように、項目ごとに場合分けをする例をよく見ます 基本はこれで問題ないのですが、場合分けの種類が増えて来ると、管理が面倒になります。 この場合、場合分けの条件ごとにclassのようにスタイリングをまとめたいと思うのが自然だと思います。...
View Article2画面折りたたみデバイスに対応したCSSメディアクエリ
Galaxy foldシリーズやSurface Duoシリーズなどが登場し、今後2画面折りたたみデバイス向けにWebサイト、Webアプリの対応が求められるようになるかもしれません。 ブラウザの対応も少しずつ進んでいるようなので、調べたことをまとめます。 2画面デバイスを検出するための CSS メディアクエリ 最新のMicrosoft...
View Article