どんな画面幅でも同じ比率で拡大・縮小するサイトを作る【scss】
はじめに どんな画面幅でも同じ比率で拡大・縮小するサイトをHTMLとSCSSを使って作ります もちろん画像で作るパワープレイではないです まずは完成品イメージ 作り方 上記のようなサイトを作るにはvwを単位として使うのですが 画面幅に対しての値なのでfont-size: 3.73333vw;というような指定が必要となり、可読性が悪く扱いにくいです。...
View Article[Rails] またまたCSSだけが本番環境に反映されない
はじめに 前にも同じようなことがあって、一応応急的な処置で対処したのですが、それすら通用しなくなって途方に暮れていました。 またまた、応急処置的な対処ですが、解決しましたので記事で残しておきます。 アプリの構造やインフラ周りも私の場合で書いてますので、コマンドやファイルの違いなどがあると思いますがご容赦いただけたらと思います。 前に書いた記事はこちら↓...
View ArticleCSS実践(7) 「リンクで使用する擬似クラス」「フォント・ウェブフォントの指定」
本記事は筆者の独学のメモ書きのようなものなので、 読者の皆様は参考にしないで下さい。 あくまで、筆者の復習用です。 目次 1.はじめに 2.リンクで使用する擬似クラス 3.フォントの指定 4.ウェブフォントの指定 5.ウェブフォントまとめ 6.おわりに 1. はじめに 本記事では、CSSの「リンクで使用する擬似クラス」「フォント・ウェブフォントの指定」について記載する。 2....
View Articlecssで要素を下から上に表示させる
cssで要素を下から上に表示させる方法になります。 各記述した内容の、解説もしております！ 記述を変えれば、表示させる開始時間など変えられます。 例)コード 太郎を下から上に表示させます。 こちらは ・最初は表示されていない ・1秒後にアニメーション開始 ・下から上に0.5秒で表示させる HTML <p class="name">太郎<p> css .name {...
View ArticleCSSアニメーションでPC-98の文字点滅を再現する
社内の面倒くさいことを処理するシステムをちょこちょこ書いているとき、なぜか「ここは点滅したほうがいいな」などとレトロなことを考えたりするものである。...
View ArticleCSS実践(8) 「利用頻度の高いテキストスタイル設定」
本記事は筆者の独学のメモ書きのようなものなので、 読者の皆様は参考にしないで下さい。 あくまで、筆者の復習用です。 目次 1.はじめに 2.color 3.font-size 4.font-weight 5.text-align 6.text-decoration 7.おわりに 1. はじめに 本記事では、CSSの「利用頻度の高いテキストスタイル設定」について記載する。...
View ArticleDocker開発環境でコンパイルが遅い問題を解決
https://qiita.com/MoguraStore/items/ca80c99c5542898ec3b5 https://qiita.com/masarashi/items/6b437596c81a2c6347a4 https://github.com/rails/webpacker/blob/5-x-stable/docs/docker.md...
View ArticlePreprosで「Write any browsers query (for instance, 'defaults') before 'not...
環境 Prepros 7.3.48 エラーの内容 一番上に「Failed to Process (file path)」、その下に「Write any browsers query (for instance, 'defaults') before 'not dead'」と書かれています。 対処法 このようなエラーが表示される場合、Autoprefixerの設定でTarget...
View ArticlebootStrap で使われる言葉の説明(編集中)
最初に来る短縮文字の候補 省略名 正式名(推測) 説明 使用例 d- display d-flex g[ ]- gutter ガター(カラムの左右の空白) g-1 h- height 高さ h-25 m[ ]- margin マージン m-1 p[ ]- padding パディング p-1 w- width 幅 w-25 bg- back ground 背景カラー bg-primary fs-...
View Articlefont-sizeの単位(px, %, em, rem, vw)
はじめに font-sizeの指定にいくつか単位があるので、それぞれの役割・使うタイミングを簡単ではありますがまとめました。 font-sizeの単位 px 絶対的な値を指定。 どんな画面サイズでも設定したfont-sizeとなる。 数値が大きくなればなるほど文字は大きくなる。 ％ 親要素に対して相対的な値を指定。 オブジェクトのレイアウトなどにも使用される。 em 親要素に対して相対的な値を指定。...
View Article【CSS】ホバー時のアンダーラインアニメーションサンプル
Webデザインでよく使うアンダーライン（下線）アニメーションのサンプルです。 ナビゲーションなどによく使われている使用頻度の高いもの３パターンになります。 左からフェードインする下線 hoverすると左から右へアンダーラインが引かれます。カーソルを離すと左へ戻ります。 See the Pen 左からフェードインする下線 by m-akagi (@kanna999-) on CodePen....
View ArticleしまぶーのIT大学 聖杯レイアウトのコーディング実践講座 の授業ノート
さすがに、bootstrap4だけでは、限界があるわ。 cssを勉強しても使わないのですぐに忘れるので、記事に残しておく。 聖杯レイアウトのコーディング <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport"...
View Article【CSS】Linkがうまく機能しない時
概要 HTMLでLinkタグを使用した際に、カーソルを合わせても矢印がポインターにならず、クリックもできない。 原因 Linkバーと画像を横並びに配置させるために、各要素にposition:fixed, absoluteを適用したことで Link要素の上に画像要素が重なり、クリックできなくなっていた。 対処法 CSSで各要素にz-index（Link要素に"2",...
View ArticleHTML canvasをCSS Flex, Grid Layoutに組み込む方法
基本形 index.html <div class="wrapper"> <canvas class="canvas"></canvas> </div> style.css .wrapper { position: relative; width: 100%; height: 100%; } .canvas { position: absolute;...
View Articlecanvasを使わずdiv要素で強引に線を引く
任意の始点座標・終点座標を結ぶ直線を引きます。 JavaScriptでのグラフィカルな表現はcanvasを使うのが普通ですが、あえてdiv要素を使ってみました。 直線1本ごとに1つの要素を使いますので、大量に線を引く用途には向かないと思います。 動作デモ <!DOCTYPE html> <html lang='ja'> <head> <meta...
View Article【CSS】背景画像にかぶせるパターンを簡単につくれる Patternify を使ってみた
こんにちはデザイナーの@kannaです。 前からずっと気になっていた 背景画像や動画にパターンを被せる方法 を学ぶ機会があったので学習メモとして残しておきます。 どこにパターンをかけるのか Webサイトのファーストビュー 作成の流れ ツールを使ってパターンを作成する 生成されるコードをコピー cssの該当ヶ所にコピーしたコードをペースト cssにパターンを表示するコードを追記する 使用するツール...
View ArticleはじめてのHTML5・CSS
この記事の目的 一度使ったHTML5・CSSの書き方をメモに残す。 後で同じことしたいときに見返す。 言語化して頭を整理する。 私が「こんなのが最初に読めたらよかったな」という説明記事をめざして書く。記述ルールは「可能な限り手順と説明を省略しない」「応用が利くように一般化する」「余計な（説明のない）情報は書かない」。 やりたいこと...
View Articleheadlessui の Modal Dialog で画面が右にずれる
tailwindcssを使っているとheadlessuiやtailwinduiなどのComponentテンプレートを使うと思う。Modalを表示した時に元の画面が裏でスクロールするのを防ぐため下記のCSSが<html>タグに付与される。 overflow: hidden; padding-right: 15px;...
View Article【CSS】よく使うセレクターをまとめてみた
はじめに 開発現場でよく使うCSSのセレクターをまとめてみました。随時追加していく予定です。 タイプセレクター html <div>こちらはdivタグです。</div> css div { color: red; } カンマ区切りでも使える css div, p { color: red; } classによるセレクター html <p...
View Article【stylus】コメントの書き方（1行コメント/複数行コメント）
stylusにおけるコメントの書き方について stylus公式サイト --> Comments - Stylus 1行コメント（出力されない） コメントの先頭に//をつける stylus // 1行コメント（出力されない） css 複数行コメント compressオプションの有効/無効に依存する複数行コメント コメントを/*と*/で挟む compressオプションが有効の場合（出力されない）...
View Article