2022年– date –

最近、下記のようなモバイル表示に特化したwebサイトをよく見かけます。 【参考】らんま1/2 | フェリシモ https://www.felissimo.co.jp/ranma/ 基本モバイルのデザインのみで、PCで表示してもモバイルのレイアウトがはめ込まれ、 余ったスペースはシンプル...

FVに写真を置いてる時読み込まれないと困りますね。 写真のサイズが大きいとどうしても読み込むのが遅くなってしまいます、、 どうにかして早く読み込ませる方法を確認しましょう！ 方法1.rel="preload"を使った画像の先行読み込み rel="preload" を使い、...

スライダーのドットはスライドが何枚あるかが分かり、見せたい側も見たい側も便利な要素です。 最近はただのドットではなく、サムネイルで内容が見られたり、あとどのくらいで切り替わるか分かったり、デザインも機能も多彩になったように思います。 今回...

[outline] まず最初に用意するもの ・Visual studio code（以下VSコード） ・Live server（VSコードのプラグイン） ・実機 Live serverとは？ VSコードのプラグインです。 拡張機能からインストールしておきましょう。 PCとSP、同じWi-Fiに接続する 必ず同...

画像の背景が足りない時、背景を簡単に伸ばす方法を紹介します。 【1.「コンテンツに応じる」で簡単に引き伸ばす】 切り抜きツールで拡大する時、上のコンテンツに応じるにチェックを入れたら、足りない部分を塗ってくれます! 特徴： 1.背景とコンテンツは...

WEBサイトで多く見るグラデーションのあしらいを、簡単作成できるサイトを紹介します。サクッと作成でき、サイト内で簡単に画像保存もできます。 【NOISE & GRADIENT の使用方法】 まずはこちらのURLから飛んで画面を見てみましょう NOISE & GRADI...

【ハイパスフィルターとは】 下の比較画像のように、写真をシャープに加工する際に使うフィルターで、 画像の輪郭を検出して、輪郭以外のところはグレー、輪郭の近辺は明度の差を強調するものです。 【ハイパスフィルター使い方】 まずはPhotoshopで加工し...

APIキーを取得 Googleアカウントの準備 下記より流れに沿って登録を進めます。 Google Cloud APIの有効化 「プロジェクトを選択」をクリックし、「新しいプロジェクト」をたちあげます。 次に、ダッシュボードから「APIとサービスの有効化」をクリックしま...

2022年にFont Awesomeは5から6へアップデートされました。（5.xのものがつかえなくなったということはありません） 主に有料版で使えるアイコンが増えたようです 【有料】7,864→19,287（すごくふえてる！！） 【無料】1,608→2,016 無料版で使えるアイコン...

Wordpressのカスタム投稿でタクソノミーを作成しても、管理画面の投稿一覧に絞りこみドロップダウンは自動で追加されません。 特に記事が大量に投稿される場合やタクソノミーが複数存在するときを想定すると、 実装してあげたい機能ですが…案外簡単に追加...

ユーザーデータを使ってSSHログインユーザを追加する方法 を紹介します。 前提として、使用するOSはAmazon Linux 2です。 ユーザーデータはroot権限で実行するので、何かトラブルが起こってSSHできるユーザーがいないときなどに役立つと思います。 という...

Amazon VPC（Virtual Private Cloud）のサブネットについて、AWSによる予約IPアドレスについて紹介します。 VPCとは、AWSが提供する仮想ネットワークです。サブネットは、そのVPCをIPアドレスで論理的に切り分けたものになります。AWS上のリソースは、基本...

webデザインする時に、テーマ配色、イラスト素材、CSSアニメーションとJS効果について、役が立つ参考サイト６つをご紹介していきます。 【1.配色サイト：Adobe Color】 https://color.adobe.com/ja/create/color-wheel Adobe Color は豊富なカラーテーマか...

クラウドサービスを使うにあたって候補に上がる「AWS（Amazon Web Services）」と「GCP（Google Cloud）」について、特徴と違いをまとめてみました。 【AWSとは】 AWSは「Amazon Web Service」の略で、Amazon社が提供しているクラウドサービスです。 公式...

NoSQLとは何か、また、NoSQLとリレーショナルデータベースの違いについてまとめます。 【NoSQLとは】 NoSQLとは、「No Only SQL」の略称で、リレーショナルデータベース(RDB)以外のデータベースの総称を示します。 SQLは、RDBを扱う際に用いられるデータベ...

エンジニアとして仕事をする上で、最低限知っておいた方がよいLinuxコマンドを紹介します。 【ls】 「ls」は、「list segments」の意味で、現在いるディレクトリの情報を表示するコマンドです。 $ ls と入力することで、現在いるディレクトリのフォルダや...

[outline] 今回の記事は下記設定で行っております。 ・独自ドメインは引継ぎ、サーバ移行のみ ・HTMLだけの移行 【最初に】 〇必ず旧サーバにあるHTMLのバックアップをとっておいてください サーバ移行は怖いイメージがありますが、バックアップがあれば復...

WordPressで子カテゴリー、孫カテゴリーなど分岐して記事を作成する場合、カテゴリーの名前部分に親カテゴリ名のみを表示したいときの解決方法です。 【記述とデザイン】 今回はカテゴリー表示の記述部分を抜粋して解説していくので実際使用したい場合はne...

【HTML To Figmaとは】 「HTML To Figma」とはFigmaのプラグインで、webサイトのURLをコピペするだけでデザインがトレースされるという優れものです！ 公式サイト https://www.figma.com/community/plugin/747985167520967365/Figma-to-HTML%2C-CSS%2C-Rea...

デフォルトのpre,codeタグの使い勝手が悪いので エンティティの書き換えや、掲載する手法などをまとめました。 タグについて preタグ 「PRE」とは「preformatted text（整形済みテキスト）」の略で、その名の通りpreで囲んだ整形済みテキストを表示するた...