コーディング– category –
-
【Google Font】Noto Color Emoji【絵文字】
【Noto Color Emoji (Google Font)】 Google Font で使えます。 https://fonts.google.com/noto/specimen/Noto+Color+Emoji 以下のようなメリットがあります。 ・デバイスごとの表示を無くすためにNOTO EMOJI 使う ・Google font のため、フォントの商用... -
【CSSのみ】背景にほわっと円グラデーション【アニメーション】
背景にグラデーションをつけたいけど、いつものじゃもの足りない・・・！ そんな時に使用できる背景グラデーションのcssです。 【コードのサンプル】 すぐに使用したい場合はこちらからコード確認ができます。 ※プレビューがこちらのサイトで見るとかなり... -
【Google for Jobs】Googleしごと検索 -構造化データの作り方-
【Googleしごと検索 とは】 webページに「構造化データ」を追加すると、google検索時に求人情報を表示してくれるサービスです。 「会社名 求人」で検索すると出てきます 【Googleしごと検索 のいいところ】 ・無料で掲載できる！！ ・地域など検索する人... -
あしらいやレイアウトCSSの便利ツール
【Flex layout Generator】 https://suiq.jp/flex-layout-generator/ 親要素の指定から子要素の余白指定まで、ジェネレーター上で細かく指定することができます。 レスポンシブ表示切り替えもあるのでflex-box使用時一気にレイアウトを組みことが可能にな... -
【Swiper】サムネ＋プログレスバー付き、スライダー実装！
実務で、メインビジュアルにサムネイルとプログレスバー付きスライダーを実装しましたので、 忘備録も兼ねて共有いたします！ demo http://mtrad-test.net/takemura/slider/index.html 【HTML】 <!DOCTYPE html> <html lang="ja"> &... -
Lottieアニメーションを使ってみよう！
【Lottieとは】 JSONファイル形式のアニメーションライブラリです。 gifよりも小さいファイルサイズで、どんなデバイスでも動作するのが特徴。 扱いやすさや、After Effectsからの連動性など、とても優れたアニメーションライブラリで私もよく活用していま... -
【CSSで作れる】テキストが画面を横切って流れるアニメーション
サイトに画面を横切って流れていくアニメーションがあると、ダイナミックさを感じられて良いですよね！ 最近は大きい英字テキストが流れているデザインをよく見ますね 今回作成してみたので共有します！ 切り替わりがわかりやすいように色を分けているます... -
最近知って便利だったHTML/CSS
【HTML編】 dlの中にdivタグを入れられる HTML5.2からdlタグ直下にdivが入れられるようになりました。 dt、ddをまとめてきれいに見せることができます。 ※ulタグ直下はNGなのは変わらずです aタグの中にhrefを入れなくていい HTML5からaタグのhref属性が必... -
便利すぎる！ジェネレーターの紹介
CSS作成に当たって、簡単にCSSを作れるような便利なジェネレーターを紹介します。 [outline] 総合的なジェネレーター https://www.cssportal.com/css-generators.php ・角丸、シャドウ、ボタン、列、フリップスイッチ、グラデーション、ローダースクロール... -
【CSS】すぐ使えるマテリアルデザイン作成ツール
今回は制作時デザインの引き出しとして、cssで簡単に作成できるマテリアルデザインツールをまとめてみました。 【グラスモーフィズム】 グラスモーフィズムとはすりガラスを通して覗いたような背景のぼかしが特長のデザインです。 iPhoneやmacなどで主に使... -
【コピペOK！】モバイルファーストのwebコーディングアイディア
最近、下記のようなモバイル表示に特化したwebサイトをよく見かけます。 【参考】らんま1/2 | フェリシモ https://www.felissimo.co.jp/ranma/ 基本モバイルのデザインのみで、PCで表示してもモバイルのレイアウトがはめ込まれ、 余ったスペースはシンプル... -
【HTML】ファーストビューが読み込まれない！！対策
FVに写真を置いてる時読み込まれないと困りますね。 写真のサイズが大きいとどうしても読み込むのが遅くなってしまいます、、 どうにかして早く読み込ませる方法を確認しましょう！ 方法1.rel="preload"を使った画像の先行読み込み rel="preload" を使い、... -
Live Serverを使ってリアルタイムで実機確認をしよう！
[outline] まず最初に用意するもの ・Visual studio code（以下VSコード） ・Live server（VSコードのプラグイン） ・実機 Live serverとは？ VSコードのプラグインです。 拡張機能からインストールしておきましょう。 PCとSP、同じWi-Fiに接続する 必ず同... -
【Font Awesome 6】よくつかうアイコンまとめ【使い方】
2022年にFont Awesomeは5から6へアップデートされました。（5.xのものがつかえなくなったということはありません） 主に有料版で使えるアイコンが増えたようです 【有料】7,864→19,287（すごくふえてる！！） 【無料】1,608→2,016 無料版で使えるアイコン... -
ソースコードを綺麗に共有するには
デフォルトのpre,codeタグの使い勝手が悪いので エンティティの書き換えや、掲載する手法などをまとめました。 タグについて preタグ 「PRE」とは「preformatted text（整形済みテキスト）」の略で、その名の通りpreで囲んだ整形済みテキストを表示するた... -
push.jsでPCでもプッシュ通知を実装しよう！
[outline] 【プッシュ通知とは？】 受信操作をしなくても、ユーザに情報を自動表示される表示方法です。 通知を許可したユーザーにWebブラウザ経由でプッシュ通知を行うことができます。 スマートフォンでは当たり前に実装されているプッシュ通知ですが、W... -
After Effects✖️Lottieで、簡単にアニメーション実装！！
javascriptでアニメーションのコードを書くのはハードルが高い、、そんな方でもAfter EffectsとLottieを使えば、 簡単にwebページでアニメーションを実装できます！ 【Lottieとは】 Lottieとは、Airbnbが開発したアニメーションライブラリです。 AfterEffe... -
@importから@useに置き換えよう
2022年10月頃にはSassで@importが使えなくなるようです。 今後の更新予定は公式ブログ内に記載されております。 その期間に向けて今の内に手元のソースを修正しておこうという趣旨です。 移行する先に、「@use」「@foewrd」があげられますが、今回は「@use... -
ScrollHintで横スクロール可能な要素を明確に！
レスポンシブ化をする際、モバイル表示時にリストを画面外に配置たり、テーブルをPCと同様に等倍サイズで掲載する際に、スワイプすることで、隠れているとこが見えると、綺麗に明示するために実装に使いたいのが、ScrollHintです。 横スクロール可能な要素... -
ブラウザ判定が簡単にできる！【Modernizr】
【1.Modernizrとは】 【Modernizr】…JavaScriptライブラリ https://modernizr.com/ 例えばWEBサイト作成時、Webp未対応ブラウザではjpgを表示したい、というときがあります。 Modernizrを使えばWebpに対応しているブラウザで閲覧しているかを判定して、HTM...
