CSS備忘録
はじめに CSSを実装するにあたって学んだ知識やレシピを記述する 日々更新 左右中央揃え 左右中央揃えには margin: 0 auto;、text-arign: center;がある 2つは使えるシチュエーションが異なる インライン要素とブロック要素 左右中央寄せの説明の前にインライン要素とブロック要素の違いについて触れる インライン要素 要素の幅 = 要素の中身 要素が横に並ぶ...
View Articleニューモーフィズムでむにゅっとしたボタンを実装する
webデザインについて調べていると、「ニューモーフィズム（Neumorphism）」というデザイン手法に出会ったので、cssで実装してみました。 ニューモーフィズム（Neumorphism）とは ニューモーフィズム（Neumorphism）とは、ベース（背景）から要素が押し出されていたり、窪んでいたりするようなスタイルのデザイン手法です。...
View ArticleCSS3(Sass)でよくみるUIの作り方 - ハンバーガーメニュー編
はじめに CSS3でよくみるレイアウトを作り、アウトプットしていく。 参考 ハンバーガーメニュー実装 1. 3本の線を作る <button class="menu"> <span></span> <span></span> <span></span> </button> body { .menu {...
View ArticleHTML/CSS/javascriptに関して覚書
大前提 可読性の高いコードを書こう 学生の頃はこんなこと1mmも教わらなかったけど本当に大事だな～と42tokyo在籍時に感じた。 HTML BEMでの命名について ・-first等枝番や-small等形容詞的な命名はNG せっかくメンテナンスしやすいようにBEMを採用してるのに、仕様変更で変わる可能性のある枝番や形容詞的なクラス名は意味がない。 javascript ・$(function() {...
View ArticleJavaScriptで簡単なダークモード切替機能を作る
概要・目的 こんにちは、プログラミング初心者です。 今回はHTML＆CSSとJavaScriptのDOM操作だけで簡単に実装できる、夜目に優しいダークモードを搭載する方法を紹介したいと思います。 ダークモードって？ 一般的なWebサイトは、背景が白、文字色が黒を基調とした配色になっています。今ご覧になってるQiitaもそうですね。...
View Article【備忘録】CSSとJavaScriptライブラリで3Dのフリップカードを作った
はじめに 初投稿です。現在フロントエンジニアを目指して学習中です。アウトプット及び備忘録としてQiita始めました。 本記事の目的は自分が忘れないように記録しておくためです。間違っている箇所等ありましたら、ご指摘頂けると助かります。 流れ CSS で 3D アニメーションを実装し、Swiper.jsを使って 3D のフリップカードを実装する。 Swiper.js とはスライダーが作れる...
View Article【第六回】コロナ禍だから何かできることをー 自宅療養者連絡ツール ー
前回までのあらすじ 【第五回】コロナ禍だから何かできることを 実装イメージ図 LINEを利用して保健所の担当者の負担を軽減するとともに、自宅療養者はいつでもつながっている安心感を持たせるためのツールイメージです。 ユーザー登録の仕組みを作ろう 今回はLIFFで表示する画面の開発部分です 初期表示の処理 １．LINE IDを渡して、データベースに存在するかチェックをする。...
View ArticleHTMLとCSSの基本記述
HTMLとCSSの基本記述 { ・CSSはクラスに記述する { エレメントやタグではなくクラスに指定する。 HTMLエレメントにCSSをかくと打ち消しのためのCSSが増える 制限されたCSSをかくと再利用性が下がる クラス名をわかりやすくする } ・CSSプロパティはアルファベット順 ・ HTMLタグとCSSのインデントは半角スペース2 ・CSSのプロパティをまとめる...
View Article【React】スタイルの扱い方
はじめに Reactのスタイルの扱い方についてまとめてみました。私のプロジェクトではCSS Modulesを使うことが多いです。CSS Modulesは、今までのCSSの書き方と同じように書くことができます。 Inline Style...
View ArticleCSSの新しい単位pwとph コンテナベースの相対単位って？
pwとphってどんな単位？ コンテナ単位と言われている「pw」と「ph」は、コンテナのサイズをベースにする相対単位です。 下記の図のようにコンテナの幅を起点としたサイズでfontやmarginなどを指定することができます。 CSS Container Query Unitsより vwやvhは非常に便利でしたが、ビューポートサイズに相対するため意図しない表示になってしまうこともあったと思います。...
View Article多言語化対応で中国語（簡体字）フォントを指定する場合
先日の多言語化対応の「baserCMS サブサイトの多言語設定は、 なかなかにカオス。」記事で、中国語（簡体字）対応ページでフォントファミリーを指定したい場合、当該ページ用のレイアウトファイル内で、以下の様にlang="zh-cmn-Hans"指定し、CSS側で各要素にlang擬似クラス指定をして反映させています。 <html dir="ltr" lang="zh-cmn-Hans">...
View Article[flexbox]ブラウザのサイズやデバイスの違いを柔軟に表示する 固定 可変
flexboxでリキッドレイアウト（固定 + 可変）にする方法 ・リキッドレイアウトとは可変カラムと固定カラムのこと。 ブラウザのサイズやデバイスの違いを柔軟に表示する概念 例) 「サイドメニューが、固定幅で、メインコンテンツが可変幅」など。 ・flexboxのリキッドレイアウトが使えるケース ・レスポンシブデザインに最適 ・固定、可変する要素があるとき ・フォームのラベルと入力要素が並ぶ時...
View Articleスマホサイトで「:hover」疑似クラスを無効にする
Web制作でよく使われる:hover擬似クラスですが、レスポンシブ対応させたWebページで タップ操作しかないスマホブラウザでは:hoverのスタイル変化を無効にしたいという場合の実装法です。 めちゃくちゃシンプルですが、 @media screen and (min-width: 600px) { a:hover{ } } のようにメディアクエリの(min-width:...
View Article【第七回】コロナ禍だから何かできることをー 自宅療養者連絡ツール ー
前回までのあらすじ 【第六回】コロナ禍だから何かできることを 実装イメージ図 LINEを利用して保健所の担当者の負担を軽減するとともに、自宅療養者はいつでもつながっている安心感を持たせるためのツールイメージです。 前回までで一通りの流れを説明したので、今回からはシステムについて大きく説明していきたいと思います。 まずは、データベースの構造から。 データベースの構造 地区情報...
View Article【HTML】戻るボタンの実装方法
はじめに 戻るボタンを実装する機会はかなり多いと思うのですが、そのときのための備忘録として残しておきます。 戻るボタンの実装 aタグでの実装 HTML <a href="javascript:history.back();">戻る</a> buttonタグでの実装 HTML <button type="button"...
View Articleローカル環境へWP構築手順
はじめに プログラミング学習の一番最初は、HTML/CSSを学ぶ方が多いと思います。 そこから、バックエンド(PHP/Ruby etc...)を学んでWeb開発の道に進んだり、 ローコード(WordPress)やノーコード(bubble、STUDIO)を使って、Web制作の道に 進んだりとあらゆるロードマップが広がっていくと思います。 特にがっつりとバックエンドを学ばずにWeb制作を始める場合は、...
View ArticleNuxtでスマホアプリのようにsplash screenを表示させる方法
こんな感じ はじめに Nuxtで作ったwebアプリで、スマホアプリのsplash screen（👇のような起動時に表示される画像）を表示させたいと思いました。 よくあるローディング画面とは違って、必ず指定した秒数だけ表示させるようにしたかったので色々と調べた結果をここに記録します！！ splash screen用の画面 最初の画面が表示される前に、ふんわりとロゴが表示されます。...
View Article【CSS】htmlやbodyにoverflow: hidden;をするとスクロールできなくなる
overflowとは overflowとはCSSのプロパティの１つで「要素のボックスからはみ出た部分をどう扱うか」を指定します。 cssでよく使うやつですね。 styles.css .box { /* 初期値。はみ出た部分はそのまま表示される。 */ overflow: visible; /* はみ出た部分が非表示。 */ overflow: hidden; /*...
View ArticleCSSの拡張言語『SCSS』について
『SCSS』とは？ CSSを見やすく、書きやすくする拡張言語の『SASS』の1つ。 直訳すると『文法的に素晴らしいスタイルシート』。 実際にCSSとして使用するためにはSCSSファイルをCSSファイルにコンパイル（変換）する必要がある。 『SASS』と『SCSS』の違い SASS・・・インデントを使う記法でCSSとはかなり相違がある。通常のCSSルールで記述するとエラーがでる...
View ArticleWP化を進めていく上でまず初めに対応すべきこと
はじめに 今回の記事は、前回の【ローカル環境へWP構築手順について】の続きとなります。 本記事の流れを先に記載しますので、Local by Flywheelのインストールがまだの方は、 前回の記事を参考にしてみてください。 1.自身で作成したHTML/CSS フォルダはどこに配置するのか 2.フォルダ配置後にまず、やるべきことについて...
View Article