TailwindCSS と比べつつ Chakra UI に入門する
背景 さまざまなCSS フレームワークが登場し、最近は Tailwind CSSが注目され話題になっていたのは認識していました。そんな中、一部でChakra UIなるものの名前も見るようになり、さらにTailwind CSSと比較される書き方をされることが多いように感じ気になっていました。 また、React Developer Roadmap2021の...
View Articleie11がお亡くなりになった後に利用可能なcss周辺
先日、コリスで紹介されたcssプロパティのaspect-ratio（ie11以外のモダンブラウザで利用可）に感動して、ie11がお亡くなりになってから利用できる他のcss周辺技術が気になり調査してみた。 aspect-ratio 下記のように記述するだけで、縦横比が16:9のレイアウトが作成可能 width: 100%; aspect-ratio: 16 / 9;...
View Article【CSSメモ】リストの箇条書きの記号を設定したい時
list-style-type: ; list-style-type（リスト・スタイル・タイプ） 種別：プロパティ 役割：HTMLにあるリストの種類を設定。リストの箇条書きの記号を決めることが出来る。 設定できるリストの記号は↓ 記号なし``` 使用例：list-style-type:none; ```disc: ●つまり黒丸がつく``` 使用例：list-style-type:disc;...
View Article【CSS】textareaタグに入力した値を改行
はじめに formタグの中にtextareaタグを作成して文章を投稿したい時に、改行させて入力することもあります。そのままデータベースに保存→データを取得して表示すると、なんと改行が消えてしまっています。 今回はこれを解消しようと思います。 CSSを使った方法 改行は消えてしまっていますが、そこにはちゃんとHTMLエンティティという特殊な文字で改行の情報が保存されています。...
View Article【HTML/CSS/jQuery】iOSとAndroidのプッシュ通知を作ってみた。
初めに 業務で、iOSとAndroidのプッシュ通知をHTML/CSSで作ることになりました。 プッシュ通知をHTML/CSS作っている人がいなかったので、 自分で作ってみました。 Codepenを使用して、作成しています。 画面に埋め込むタイプだと、サイズが小さいので Codepenのサイトで、触ってください。 iOS版 プッシュ通知 Android版 プッシュ通知 最後に...
View ArticleHTML&CSS_02 【RESTART】
HTML＆CSS_02 今回のテーマは「progate」の「HTML＆CSS中級編」を使って作れたものについて ※前回の記事 お役立ちメモ メモ Google Drive からの画像参照方法 https://drive.google.com/file/d/画像ID/view?usp=sharing ⇒...
View Article【Vue.js】 Vuetifyのv-data-tableでスクロールの追従をする
【Vue.js】 Vuetifyのv-data-tableでスクロールの追従をする はじめに Vue.jsのUIフレームワークとしてVuetityを使用します。 マテリアルデザインを踏襲したボタンやダイアログなどを手早く実装できます。 データテーブルについても、v-data-tableというコンポーネントを用いて実装可能です。...
View ArticleBootstrapを使って簡易的なポートフォリオ作る。
はじめに 今回Bootstrapで簡易的なポートフォリオを作成しました。 正直、私はBootstrapは学ばなくても良いかなと思っていました！笑 理由はBootstrap感が出てしまったり、Bootstrapに頼ってしまったら、 CSSを書けなくなってしまうのではと思っていたからです。 確かにBootstrapが用意しているコンポーネントしか使わず、...
View Articlevs codeでautoprefixerを使用する setting.jsonも使用して
vs codeを使用し、autoprefixerを使えるようになりましょう。 autoprefixerは、自動的にベンダープレフィックスを描いてくれるもの。 なので、ieやedge(多分)などの別ブラウザ対応のcssを描いてくれるものだって。便利だねー 使用するにはプラグインをinstallしてから、設定をいじります。 settings.jsonというファイルを開きます。 基本設定 >...
View Articleスマホ周りのフォント表示 ちょっとしたCSSのTIPS
iOSで入力フォームがズームされるのを防ぐ方法 iOSは、入力フォームにフォーカスすると、自動でビューポート(ズーム値)を調整します。（viewport指定でuser-scalable=noにしていなければ） そのため、無駄に画面を拡大してしまい、意図せず画面の水平方向のスクロールが発生してしまうことがあります。 この自動調整を防ぐには、以下のようにフォントサイズを16px以上に設定します。...
View ArticleWordPressのNinja Formsのメール文の入力欄を縦長にする
入力フォームを簡単に設置するWordPressプラグイン「Ninja Forms」のメール文の入力欄が狭いので、縦長に調整したい。 実際の画面 これだと5行くらいしか表示されずに見づらいし、拡大しても画面を切り替えるたびに狭い範囲に戻る。 毎回下のバーを伸ばせば拡大できるが、それすらも手間がかかってしまうのが課題。 プラグインを編集して解決 プラグインのCSSファイルを編集すれば解決。...
View Article【TailwindCSS＋React+Next.js】Next.jsでの画像の表示とアスペクト比の保ち方
はじめに Next.jsのnext/imageを使用した静的ファイルの表示方法と、画像を表示させたさせた際に、画像の比率を維持することに困ったため、その方法を簡単にまとめました。 環境 OS：macOS Big Sur version 11.6 Next.js：11.0.2 Tailwind CSS：2.2.15 React：17.0.2 next/imageについて メリット...
View Article【CSS】object-fitで画像の大きさを揃える
はじめに imgタグを使って画像を表示させたのはいいものの、大きさが合ってなくてガタガタになる・・・なんてことはないでしょうか。 CSSを使って大きさを揃えることができますので備忘録として残していきます。 object-fit object-fitを使うことで画像を指定したサイズにフィットさせることができます。...
View Articlejquery と cssの読み込み順序について (importantも含む)
cssの読み込みをする場合、読み込み順序がバッテングしてどれが反映されているかわからなくなることが合ったため整理してみた。 読み込み → style.css, preindex.js, index.jsの3つ preindex.jsは上に配置、index.js下に配置 cssは上で別ファイルを読み込み、html上で定義しているものもある。 index.html <!DOCTYPE...
View Article新社会人の初開発作業
今年からsier企業に就職し、今日からようやくvscodeを使用した開発作業を始めました。 既存システムのIEからedgeへの移行作業を行ったます。 ITはアウトプットすべきとよく聞くので、業務中に学んだことを気が向いたら書いていこうと思います。
View Article《JavaScript》カード型レイアウトの作成【こまりメモ】
こんにちは。 こまりまゆこです。 自分が学習したことを載せています。 今回はカード型レイアウトの作成です。 作品をあげるのにすごく良いなと思い使用しました。 カード型レイアウト手順 ①カードのHTML部分を入力 ※classは現状高さをつける為に付けているので使用しなくても大丈夫です。 index.html <div class="container"> <div...
View ArticleSafariの表示でフォントサイズが変わってしまう
不具合の概要 HTMLタグの::beforeに対しCSSプロパティでcontentにテキスト、font-sizeに文字サイズを指定。 Google Chromeやその他OSでは意図した通りであったが、Safari版だけフォントサイズの指定が効かず小さく(検索すると大きく表示されるケースもある様子)表示されてしまう。 対処 cssに以下を追記 css -webkit-text-size-adjust:...
View Articleブロックレベル要素の横並びについて！
①.結論！ 親要素にdisplay: flex;を付与すると、直下の子要素が横並びになるということです！ HTMLの構成における「積み木」はブロックレベル要素という要素でした！ ブロックレベル要素は、通常は縦に積み重なるため、横並びにするために工夫が必要です！ ②.displayプロパティ...
View Articleマウスホバー時に画像の上に文字を表示させる【こまりメモ】
こんにちは。 こまりまゆこです。 自分が学習したことを載せています。 画像をマウスホバーした際に文字を表示させる方法です。 HTMLとCSSで完結します。 作品画像の説明に使う予定です。 ↓ 完成形はこちら ↓ See the Pen Untitled by Suzuka Esaki (@komarimayuko) on CodePen. 実際に書いてみよう！ ①HTMLのコードを書く...
View ArticleCSS よく使う操作
# 横に並べたいとき display: flex; # 中のものを中央に置きたい text-align: center； # 中のものを左に置きたい text-align: left； # 中のものを右に置きたい text-align: right； # 上下上下のどれかの外枠をMaxまで、広げたいとき margin-〇〇: auto； # 上下上下のどれかの幅をMaxまで、広げたいとき...
View Article