画像の読み込み中にローディングマークを表示させる
#はじめに APIから画像を取得する時、読み込みが遅いと画像がある部分が空欄になる。 そこに画像が表示されることを分かりやすくするため、ローディングマークを表示させる。 #loading.gifを背景に設定 https://www.benricho.org/loading_images/transparent01.html こちらのサイトから透過済みのフリー画像を保存。...
View Article【CSS Battle】世界中のユーザーとCSS・HTMLの力を競い合える！？
CSS Battle とは？ CSS Battle とは、お題の画像と全く同じになるようにCSS、HTMLを書いて、世界中のユーザーと得点を競い合うゲームです。 得点は、記述したCSS、HTMLの文字数が少なければ少ないほど、得点が高くなります。 お題はこんな感じです。 ぱっと見、難しそうなものから簡単なものまで、色々なお題があります。 ドクロ プレゼント モンスターボール 遊び方 1. Sign...
View ArticleIonicでGoogle Fontを使う方法
Google Fontをダウンロード 今回は「Noto Sans Japanese」を例にしていきます。 普通にGoogle Fontのデータをダウンロード おそらく6種類のファイルがダウンロードできたかと思いますが、今回はNotoSansJP-Regular.otfしか使いません プロジェクト内に設置 👇のようにIonicのプロジェクト内の設置します。...
View Articleデベロッパツールを使って色の彩度や明度を変えてみる
はじめまして。 主にweb制作を行っているoimと申します。 web上で色を指定する際、RGBや16進数のカラーコードで指定することが多いと思いますが、 HSLという指定方法をご存じでしょうか。 HSL値とは アルファベットは以下のような頭文字になっています。 H・・・hue（色相） S・・・saturation（彩度） L・・・lightness（明度）...
View Articletext-transform【CSS】要素のテキストを大文字にする
要素 { text-transform: uppercase; } 大文字以外にも以下のような指定が可能。代表的なものを挙げています。 値 仕様 uppercase 全て大文字 lowercase 全て小文字 capitalize 単語の先頭を大文字 none 変換させない 詳細 https://developer.mozilla.org/ja/docs/Web/CSS/text-transform
View ArticleHTML+CSSでタコピーを書いてみたっぴ
つい先日完結した「タコピーの原罪」という漫画に出てくるタコピーという癒しのマスコットキャラクターをHTML+CSSで描いてみました 🐙 See the Pen happy-octopus by tamanugi (@tamanugi) on CodePen. 構成要素はシンプルなので、基本 border-radius で丸を作って組み合わせただけになります box-shadow...
View Articleセレクタを並べて記述【CSS】対象を絞り込む
HTML <p class="item _current">サンプル1</p> <p class="item">サンプル2</p> CSS .item._current { color: red; } .item { font-style: italic; } セレクタを区切り文字・空白なしで記述（結合・連結）すると、対象を絞り込むことができる。...
View Articlebackground-colorをbackgroundで一括指定にしてはいけない理由
background-colorの省略記法に知見がありましたので共有します。 海外の動画ですが、こちらを引用させていただいております。 background-colorは以下のように一括指定記法を用いてbackgroundで省略することができます。 style.css div { background: #fff; } しかし、このような場合はどうでしょうか。 index.html <div...
View Article【CSS】クラス名でハイフン--やアンダースコア__が２つ並んでるのを見かけた。それはBEM記法
きっかけ CSSの学習をしていたら、こんな感じのクラス名が出てきました。 Foo__Bar Foo--Bar 言語ごとにスネークケース・キャメルケースなどの使い分けがあるかと思いますが、 初学者のわたしとしては、CSSのクラス名ってイマイチどう書くのが正解かハッキリしないな〜と感じていました。 そんな中あらわれたハイフン2つ／アンダースコア２つのクラス名。...
View Articleスマホのメニューバーに左右されたくない人に送る記事
はじめに スマホでブラウザを開くとメニューバーがある時にデザインが狂ったりしませんか？ そんな時にこちら Safari15.4で新たに追加されたCSSの単位を利用すればすぐにメニューバーに狂わされることなく実装できます。 100svh, 100svw :メニューバーが表示されていない時の画面が１００になる 100lvh, 100lvw :メニューバーが表示された時の画面が100になる 100dvh,...
View Articlebackground-attachment: fixed;
background-attachment: fixed; だけは使わないようにしよう 描画処理がおもすぎる 背景固定なら position: fixed; させた要素に背景をつければいい それだけ
View ArticleCSS absolute VS relative
Absolute VS Relative positon: relative：もともとその要素があった場所を基準に配置されます positon: absolute：祖要素に対して相対配置されます MDN Reference まずは、実際に動かしていきましょう！ ポジションの変更を加える前 index.html <!-- 祖要素 --> <body>...
View ArticleReact プロジェクトで Google Fonts を使う
React プロジェクトで Google Fonts を使う おしゃれなフォントを見つけたので適用方法をメモ書き 1. importコード生成 まずは、Google Fontsでいい感じのFontを見つけます 見つけたら、+ Select this styleをクリックします すると、右側にナビゲーションが出てきます (出てこない場合は画面上のメニュー内のアイコンをクリック)...
View Article@layerを使ったCSS設計を考えていたら少しだけハマった話
この記事の概要 CSSに@layerが登場したことにより、これまでより柔軟にコードを書けそうです。 まだEdgeが対応できていないため本番適用するのは時期尚早ですが、そう遠くないと思います。 というわけで今のうちから「これからのCSS設計」を考えるか〜と素振りしていたわけですが、少しだけハマった箇所があり記事にしました。 @layerの簡単な説明 使い方や効果は以下のようなイメージです。...
View Article問い合わせなどに使える、ボタンを押すとメールが開いて宛先も入力されている簡単ワンタッチメール
すごく久しぶりの、投稿ですが、今日も頑張ります。 今回は、問い合わせなどに使えるワンタッチメール機能を、作成したいと思います。 <p><a href="mailto:jdvlak@gmail.com">私にメールを送信</a></p> が、ワンタッチメールです。 つぎは、電話です <p><a...
View Article可変幅のボックス（レスポンシブデザインの練習）
レスポンシブデザインの基本 レスポンシブの基礎となる「可変幅のボックス」をいろいろ試す記事です。 CodePenで埋め込んだので、 EDIT ON CODEPENで編集し結果を見比べてみてください！ １カラムの可変レイアウト 基本の1カラム See the Pen Untitled by ゆたか (@yutaka_pg) on CodePen. 最大幅固定の1カラム See the Pen...
View ArticleNuxtにCSSをお作法に則りながら導入
前提 ホームページ制作はCSSゲーであると感じたため、CSSをNuxtに導入しようと思った。 そのとき、結構忘れそうな内容だったため、メモる。 また、ここで初めてSCSSなる非常に革命的なものに出会ったため、その導入方法等も記載する。 SCSS導入方法 なんとNuxt.jsはSCSSをサポートしている npm install sass sass-loader fibers...
View Article【Laravel】Web開発初心者が1週間で入門チュートリアルを実施した記録(9)
以下の続き。 前回、認証機能のうち、会員登録、ログイン機能をつくった。 ・会員登録機能：済 ・ログイン機能：済 ・ログインしたユーザーは自分のフォルダのタスクだけを閲覧できる機能 入門Laravelチュートリアル (9) ToDoアプリの認証機能を作る パート2 ここでは、残りの3つ目を実装していく。 ・ヘッダーの出し分け layout.blade.php <header>...
View Article