サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
www.webcreatorbox.com
2023年2月7日 CSS, アクセシビリティ アニメーションのあるWebページって、見るのも作るのも好きなんですが、みなさんはいかがでしょう?中には動きが苦手で目が疲れてしまう、画面酔いしてしまう…なんていう方もいらっしゃるかと思います。今回はアニメーションが苦手な方のためにWebサイト側でできることを考えてみます。 ↑私が10年以上利用している会計ソフト! アニメーションを減らす設定 アニメーションによって画面酔いしてしまったり、動きがつくと内容が理解できなくなるという方は、OS側で視覚効果を減らす設定をしているかと思います。そういった設定をしている場合は、CSSでWebサイトのアニメーションもなくす、あるいは軽減させる指定が可能です。 設定方法 まずはアニメーションを減らすためのOS側の設定方法から紹介します。 Windows 10: 設定 → 簡単操作 → ディスプレイ → アニメ
2023年2月7日 CSS, Webサイト制作 以前から個人的にダークモードの対応を推奨しています。基本の書き方は過去記事「Webサイトをダークモードに対応させよう」を読んでもらうとして、今回は画像まわりのダークモード実装方法を中心に紹介します! ↑私が10年以上利用している会計ソフト! 画像の明度や彩度を落とす 明るい背景色の場合、画像は鮮やかで明るい色合いが目に止まりやすいですよね。しかしダークモードでは、まわりが暗くなるので画像だけ派手に眩しく見えてしまいます。そこで、CSSの filter を使って、ダークモードのときは明度や彩度を調整するといいでしょう。 実装するには filter プロパティーに、明度は brightness() 、彩度は saturate() を指定します。カッコの中にパーセントで割合を書けば完了。明度・彩度両方指定するなら以下のように値を続けて書きます。 @
2022年10月19日 CSS 画像の中の色や明るさの濃淡を、様々な大きさのドットで表現するハーフトーン。日本語では網点とも言うようです。どこかレトロで、アメコミタッチなこのハーフトーンを、CSSで表現してみます! ↑私が10年以上利用している会計ソフト! グラフィックツールを使わず、CSSだけでひとつの画像をこんな感じに加工してみます。 1. 画像をdivに入れておく まずは下準備。「halftone」というクラス名をつけた div に画像を入れておきます。今回は猫ちゃんの画像を用意しました。 HTML <div class="halftone"> <img src="cat.jpg" alt=""> </div> 2. CSSで水玉模様を作成 「halftone」クラスに ::after で疑似要素を作成。 position を使って猫ちゃん画像の上に重ねます。水玉模様は円形グラデーシ
2023年2月7日 JavaScript, React 以前よりReactの勉強がてら、1時間を40分で区切った36時間時計というのをモクモクと作っています。その中でReact Hooksの使い方などを学んでいるので、今回はよくあるアナログ時計を作りながら勉強メモとして残しておきます。 ↑私が10年以上利用している会計ソフト! こんな感じのアナログ時計作ってみた よくある時計ですね!個人的にはデジタル時計派なのですが、意外と需要があるようなので作ってみることに。ちなみにこれは別にReactを使わなくても、素のJavaScript(Vanilla.js)で作成可能です!が、上記36時間時計を作る中でReactコンポーネントとして必要だったので今回はReactで挑戦しました。 CSSでベースとなるアナログ時計作り アナログ時計自体は空の div にサイズや position の設定をして作成。
2023年2月7日 便利ツール, 海外情報, 英語 DeepL(ディープエル)翻訳は、ドイツの企業が開発している機械翻訳エンジン。自然で高い品質の翻訳文が話題となっています。今回はそのDeepL翻訳を、Webデザインや制作、技術系の分野で活用していく方法を紹介します! ↑私が10年以上利用している会計ソフト! DeepL翻訳の使い方 DeepL翻訳の翻訳精度の高さは一度使ってみると実感できるかと思います。基本的にはDeepLのWebサイトにアクセスして、翻訳したい文章をコピペするだけ。ただ、毎回DeepL翻訳のWebサイトに文章をコピペするのって地味に面倒ですよね…。 そこでおすすめなのがDeepL翻訳のChrome拡張です。インストールしてWebサイト内の文章を選択すると、カーソル付近にDeepLマークが表示され、クリックすれば翻訳されます。 技術系ドキュメント特有の用語やコードを含んで
2022年7月20日 CSS, Webデザイン, スマートフォン モバイルは幅が狭く、デスクトップは幅が広いので、それぞれのデバイスにあわせてWebサイトの幅も可変させたりしますよね。しかし最近、デスクトップで見てもモバイル幅のまま表示させている国内のWebサイトをちょこちょこ見かけます。今回はそんなモバイル幅のWebサイトを見ていこうと思います。 ↑私が10年以上利用している会計ソフト! モバイル幅Webサイトの特徴 デスクトップで見ても狭いコンテンツの幅 よくあるWebサイトでは、コンテンツ部分の枠がデバイスの幅によって変化します。例えばモバイルサイズでは幅が狭くなり、デスクトップサイズでは幅が広がって画面中央に表示されます。このブログでもそうですよね。しかし、昨今見られるようになったレイアウトでは、デスクトップサイズで見てもコンテンツ枠の幅は狭いままで表示されています。画面中央に表示
2022年7月3日 書評 Web制作やデザインに関する情報は、インターネット上以外にも書籍を通して体系的に学ぶことができます。今月も様々な本を拝読しました。その中でいいなと思った物、オススメの物をいくつか紹介します。 ↑私が10年以上利用している会計ソフト! COLOR by COLOR 配色ひらめきツール
2022年6月29日 Webサイト制作, フリーランス Webデザイナーやフロントエンドデベロッパーを目指す方から、よく勉強方法を聞かれることがあります。彼らなりに調べて、あれこれ学習を続けているようなのですが、「このやり方でいいのか?」と不安に感じるときもあるようですね。ということで今回は私の経験をもとに勉強するときのコツをまとめてみます。具体的な学習内容については各々の目的によって異なると思いますし、「ロードマップ」なるものが巷で出回っているので今回は割愛。 ↑私が10年以上利用している会計ソフト! いろんなWebサイトを見る 初学者と経験者では見てきたWebサイトの数が圧倒的に違います。いろんなジャンルのWebサイトを見る習慣をつけるといいでしょう。ただ眺めるだけではもったいない!いいなと思ったところや改善できそうなところを探っていくと、自分の引き出しが増えていくはず。コーディング面
2022年12月24日 JavaScript, React, Wordpress 最近はReactをベースにしたフレームワーク、Next.jsをいじっております。今回はWordPressに登録した投稿をNext.jsで表示させてみようと思います! ↑私が10年以上利用している会計ソフト! ヘッドレスCMSとは? ヘッドレスCMSはコンテンツの管理のみをするCMS(=Content Management System)のこと。例えばWordPressではコンテンツの作成から表示までを行えますが、ヘッドレスCMSではコンテンツの表示は別の方法で行います。ここではNext.jsを使ってみます。 ヘッドレスCMSを使うメリット 表示部分を別途用意することになんのメリットがあるのでしょうか?ざっくりと以下の3点が挙げられるかなと思います: 表示速度の改善 セキュリティの向上 管理しやすい 通常のWo
2022年6月1日 Webデザイン スイーツって商品自体もかわいくて、パッケージやWebサイトもおしゃれなデザインが多いですよね。今回はそんなスイーツを紹介したかわいいWebサイトを紹介します。どれも食べたくなってしまう…! ↑私が10年以上利用している会計ソフト! かわいいデザインのポイント 淡い色合い 明度の高い、淡い色あいを使ってキュートで親しみのあるデザインに。 鮮やかな黄色が印象的なねこねこチーズケーキ。淡い水色とあわせて商品を目立たせています。 豆乳アイスのアレンジレシピを掲載しているサイト。利用している色数が多いのですが、全体の明度が高いので目がチカチカしたりうるさい雰囲気にはなりません。 やわらかい形 円や楕円、流体シェイプなど、丸っこい形を利用して柔らかく優しい雰囲気を演出できます。 絶え間なくふわふわと形を変えてゆったり動くシェイプが特徴的なLilionte(リリオンテ
2022年5月24日 Webデザイン, 便利ツール こんにちは、ダークモード推奨派のManaです。以前からダークモードの布教活動を細々としておりますが、まだまだダークモードに対応していないWebサイトもたくさんあります。今回はダークモードに対応していないWebサイトを強制的にダークモードにしちゃう拡張を紹介します。 ↑私が10年以上利用している会計ソフト! 前々から夜間見えづらいって事は認識していましたが、どうやら光の見え方も多くの方とは違うと最近判明…!みんなこんなシャキーンって感じの光の線は見えないんですかね…?夜景なんて光るウニの集合体ですよw ちなみにスターバースト現象というらしい ←おそらく多くの人が見えるビュー Manaビュー→ pic.twitter.com/bfxZAK7FYE — Mana (@chibimana) September 8, 2020 以前『Webサイトを
2023年2月7日 JavaScript, React Reactの勉強がてら、高画質な画像を配布しているUnsplashが提供しているUnsplash APIを使って画像検索アプリを作ってみました。その復習に作成手順をまとめてみたので、これからReactを勉強しよう!と思っている方の役に立てれば幸いです! ↑私が10年以上利用している会計ソフト! この記事は動画でも解説しています。動画派の方はぜひご覧ください! 目次 Unsplashとは こんなアプリを作ってみよう 1. Unsplash APIの開発者登録 2. ViteでReactアプリのベースを作成 3. タイトル部分の作成(Title.jsx) 4. 検索フォームの作成(Form.jsx) 5. Unsplashのデータを取得 6. 検索結果の表示(Results.jsx) 7. 環境変数の作成(.env) 完成! 白黒画像の検
2023年2月7日 HTML これまで「少しのコードで実装可能な10のCSS小技集」シリーズでCSSのちょっとしたTipsを紹介していましたが、今回はHTMLバージョン!知っていると使い勝手がちょっとよくなる小技を集めました! ↑私が10年以上利用している会計ソフト! 目次 セレクトメニューの選択肢をグループ化 type 属性値によって入力欄が変化 スマートフォンでエンターキーのテキストを変える 画像の遅延読み込み テキストの折り返し位置を指定する 番号付きリストの順番を変更する 簡単アコーディオン 任意のテキストを自動翻訳させない リンク先のテキストを指定してスクロールさせる 1. セレクトメニューの選択肢をグループ化 複数の選択肢を用意できるおなじみの select タグ。項目は option タグを利用しますが、さらに optgroup タグで囲むことでグループ化できます。選択肢が多
2022年3月24日 Web関連記事, 便利ツール 商標とは自分や自社が扱っているサービスや商品が、他のものとは違うよー!オリジナルだよー!と識別するためのもの。今回はそんな商標をToreruというサービスで取得したお話です。 ↑私が10年以上利用している会計ソフト! そうだ、商標登録をしよう。 以前とあるYouTubeのチャンネル名が第三者によって商標登録出願されたということがありました。個人が運営している媒体でもそんなことが起こるなら、10年以上運営しているこのブログ名もきちんと管理した方がいいかなぁと思い始めていたときに、「Webクリエイターボックス」や「webcreatorbox」とよく似たアカウント名でサービス登録している人の存在に気づきました。それどころかその似たアカウント名の保有者がやらかした事への問い合わせが私宛にくることもあったので、きちんと商標登録しよう!と、登録方法な
2022年3月17日 JavaScript Web Animations APIとは、他のライブラリーを使わずにアニメーションを実装できるJavaScriptの仕様です。CSSアニメーションと違い、様々な関数やイベントと組み合わせてより柔軟に、より豊かな表現が可能となります。今回はそんなWeb Animations APIを使ってみましょう! ↑私が10年以上利用している会計ソフト! Web Animations APIの基本の書き方 基本的な考え方や構造はCSSアニメーションと同じですが、アニメーションの内容やどう動かすかの指定は、配列やオブジェクトで記述していきます。基本形はこんな感じ: JavaScript 動かす要素.animate(動かす内容, 動きの詳細); 動かす内容(キーフレーム) animate() の第一引数には動かす内容、キーフレームを指定します。CSSと同じ形でプロ
2021年度CPU大賞 書籍部門1位を受賞!拙著『ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座』 2022年3月10日 お知らせ 全国の書店員さんの投票で決定する2021年度CPU大賞「書籍部門」の大賞を、拙著『ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座』が受賞しました! ↑私が10年以上利用している会計ソフト! CPU大賞って? CPUとはコンピュータ関連の書籍を発行する出版社7社が加盟する「コンピュータ出版販売研究機構」のこと。CPU大賞は2021年1月1日から12月31日に発売された書籍を対象に、全国主要書店158店舗のコンピュータ書籍の担当者による投票で、最も票数が多かった書籍が選定されるそうです。 そんな素敵な賞に1位として選ばれました!前作『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』に続き、二度目の受
2022年2月15日 JavaScript, Webサイト制作 手書きのものってどこか温かみがあって親近感がわきますよね。今回はそんな手書き風のUIを実装できるJavaScriptライブラリーを紹介します! ↑私が10年以上利用している会計ソフト! Rough Notation Webサイト|GitHub テキストの一部を強調したり、注釈を入れたいところに手書き風マーカーを追加できます。まさに今書いてます!というようなアニメーションも面白いですね。 導入方法 JavaScriptファイルで import { annotate } from 'https://unpkg.com/rough-notation?module'; または npm でインストールします。 npm install --save rough-notation 実装方法 基本的には実装したい要素を指定して、装飾を指定し、
2022年1月25日 JavaScript, jsjs 3Dアニメーションが手軽に実装できるVanta.jsというJavaScriptのライブラリがあります。Webサイト上で色や表示方法をカスタマイズして、コピペするだけで完成です。今回はこのJavaScriptライブラリを紹介します! ↑私が10年以上利用している会計ソフト! この記事は動画でも紹介しています。動画派の方はこちらをどうぞ! 鳥をふわふわ動かしてみよう Vanta.jsのサイトに行くと、デモとして鳥がふよふよ飛んでるような背景が表示されています。この画面右側に、カスタマイズするためのパネルが用意されているので、好みのデザインに変えてみましょう。「Birds」の場合は色や鳥の数、鳥のサイズ、スペース、スピードなどが調整できます。 <div id="bird"></div> <script src="three.r119.min
2022年5月1日 JavaScript, React Viteは2020年に発表されたフロントエンドのビルドツールです。最初「ヴァイト」と読んでたんですが、「ヴィート」と読むみたいですね。フランス語で「速い」という意味だそうです。絶賛Reactのお勉強中なので、ViteでReactの環境を作る流れを備忘録的にまとめておきます! ↑私が10年以上利用している会計ソフト! この記事は動画でも解説しています。動画派の方はぜひご覧ください! Viteとは? Viteを使えばベースのプログラムを予め準備しておいてくれているので、開発をすぐに始められるようになります。スターターキットとか、テンプレートみたいなものですね。他にも複数のファイルをひとつにまとめたり、SassをCSSに変換するなどの作業を爆速でできるようになります。 また、ファイルを保存すると同時に、確認画面も自動的に更新されます。ホット
2022年2月1日 CSS メッシュグラデーションとは、複数のポイントで色を指定したグラデーションのことです。あえて統一感をなくすことで、遊び心のあるふわふわした印象となります。このメッシュグラデーションをCSSで作成してみましょう! ↑私が10年以上利用している会計ソフト! 基本の円形グラデーション まずは基本的な円形グラデーションの指定方法です。background-image プロパティーで radial-gradient() のカッコ内に開始色と終了色をカンマで区切って指定します。 background-image: radial-gradient(開始色, 終了色); この時、色を transparent とすると、透明色が指定でき、後述する複数の色を重ねる時に利用できます。ついでに background-attachment: fixed; を合わせて指定すれば要素いっぱいに色
2021年12月20日 フォント 2021年もあとわずか!今年も数多くの素敵フォントがリリースされました!この一年を振り返って、「これは!」と思ったフォントをいくつか紹介します。どれも無料でダウンロードでき、商用利用可能なものです。みなさんのお気に入りが見つかると幸いです。 ↑私が10年以上利用している会計ソフト! 過去の年末フォント紹介記事 2020年にリリースされた無料フォント40 2019年にリリースされた無料フォント30 2018年にリリースされた無料フォント40 2017年にリリースされた無料フォント40 2016年にリリースされた無料フォント30 2015年にリリースされた無料フォント35 日本語フォント 清明かな 滑らかな曲線が美しく、伸びやかな切れ味の中に優しさ・優美さを包含した不思議な書体。 天浜線フォント 静岡県西部のローカル線「天竜浜名湖鉄道(通称:天浜線)」の駅名看
2022年2月8日 インスピレーション, 色彩 毎年恒例、PANTONEによる「来年の色」が発表されました!2022年は「Very Peri」です。これまでは既存の色から選ばれてきましたが、今年は初めて新たな色が作られました!そんな「Very Peri」に注目してみたいと思います。 ↑私が10年以上利用している会計ソフト! 「Very Peri」ってどんな色? 青の持つ誠実さと不変性、赤の持つエネルギーと興奮を融合させた、温かみのある紫色。この新しい色は、感染症の影響でこれまでとは異なる生き方や働き方への移行期にあることを表しているそうです。どこか落ち着くような、また、新しいことへの期待を感じる色ですね! 色の具体的な数値は以下の通り: PANTONE:17-3938 Very Peri カラーコード:#6667AB RGB:R102, G103, B171 グッズも販売されています 「V
2021年12月7日 Wordpress WordPressでは2018年から「ブロック」と呼ばれる要素のかたまりを組み合わせてコンテンツを作っていくブロックエディターが利用できるようになりました。今回はテンプレートファイルはいじらず、WordPressの管理画面(ダッシュボード)でブロックを組み合わせるだけでWebサイトを作成できるフルサイト編集機能にフォーカスします! ↑私が10年以上利用している会計ソフト! フルサイト編集とは? フルサイト編集(FSE=Full Site Editingとも呼ばれます)は、投稿やページだけでなく、ヘッダーやフッター、サイドバー、ナビゲーションメニューなど、Webサイト内のあらゆる部分にブロックを使って構成できる機能です。つまり、これまでは投稿やページのコンテンツ部分のみブロックに対応していましたが、フルサイト編集機能のついたテーマであれば、Webサイ
2021年11月18日 JavaScript いつも何気なく使っていたコードをふと調べ直してみると、知らないうちに「Deprecated(非推奨)」と書かれている…なんてこともありますよね。今回はJavaScriptを書いていて出くわした非推奨となったものをいくつか紹介します。 document.write 画面にテキストを表示する document.write 。JavaScriptの勉強を始めて最初に書いたコードがこれだったという方もいるのではないでしょうか?これはブラウザーのレンダリングに悪影響が出たり、DOMへの影響などを考慮して「強く非推奨」とされています。 これまでの記述例: document.write('やっほーい'); 解決策1:textContent や innerHTML を使う 代わりに文字列を書き換える textContent や、HTMLも含めた文字列を挿入でき
2023年2月7日 JavaScript 新しいMacbook Proが発売され、特設ページが公開されています。そのページの中で私の目に止まったのは、Macbook Proのスペックではなく、スクロールに合わせて動くグラデーションカラーのテキストでした。今回はこれをJavaScriptの Intersection Observer を使って実装した例を紹介します。 この記事は動画でも紹介しています。動画派の方はこちらを御覧ください! このテキストを実装したい! Macbook Proの紹介ページにあるグラデーションカラーのテキストです。スクロールするとグラデーションの位置も変わるのがわかりますね! Intersection Observerとは? 従来、スクロールに合わせて要素を操るには scroll というイベントを利用していました。ただ、それだと画面サイズが変わったら再計算しないといけ
2021年10月21日 Webサイト制作, 便利ツール Webサイトの制作中には、とりあえずで入れておく「ダミー」を使用する事が多々あるかと思います。日本ではアタリ・アテなどとも呼ばれますね。そんなダミー画像を便利に生成してくれるジェネレーターをいくつか紹介します。かつて「制作途中にお世話になる、ダミーテキスト・ダミー画像のジェネレーターいろいろ」という記事で紹介したこともあったのですが、SSLに対応していないものも多かったので、httpsに対応した画像URLが生成できるもののみに絞りました! ↑私が10年以上利用している会計ソフト! Placeholder.com Placeholder.comは昔からあるダミー画像を提供しているサービス。とにかくシンプル!以前の名前はPlacehold.itでした。その頃からずっとお世話になっています! 基本的な使い方は、画像のソース部分に https
2021年10月5日 Webサイト制作, 便利ツール WebサイトにInstagramを掲載したい!と思ったときに、意外とその方法が見当たらなかったりしませんか?各Instagramの投稿をブログ記事などに埋め込む方法は公式でありますが、投稿一覧を掲載するには今回紹介する「LightWidget」というサービスを使うと便利ですよ! ↑私が10年以上利用している会計ソフト! この記事は動画でも解説しています。動画派の方はこちらをどうぞ!↑ LightWidgetとは? LightWidgetを使えばお好みのレイアウトでWebサイトにInstagramの投稿一覧を掲載できます。掲載する投稿数や表示方法、カーソルをあわせた時の動きなど、細かくカスタマイズできますよ。難しいプログラミング知識は一切不要です。基本は無料で利用でき、広告などもつきません。素晴らしい! こんな感じで表示されます Ligh
2021年9月14日 CSS, SVG, Webサイト制作 上下に並んだセクションの間に、斜めのラインや模様を取り入れると一気に印象が変わります。複雑な図形もSVGを使って実装できますが、一からコーディングするとなるとなかなか手間がかかります。そこで予めいろんな模様が用意されているWebサイトを使って手軽に挿入してみましょう! ↑私が10年以上利用している会計ソフト! SVG Shape Dividers Generator Tool SVG Shape Dividers Generator Tool 画面右側にカーソルをあわせるとパネルが表示され、模様が選択できます。左側のパネルから表示位置や色、模様の大きさなどが調整可能。「Animate」をオンにすると、キーフレームアニメーションで動くコードが生成されますよ。「COPY CODE」をクリックでCSSコードをコピーできます。 個性的な模
2021年8月24日 Wordpress WordPress 5.8が公開され、ウィジェットの扱いが大きく変わって早1ヶ月。皆さんうまくウィジェットとお付き合いできていますか?レイアウトが崩れたりHTMLの構造がおかしくなっちゃったりの不具合をどうにかする方法や、そもそも元のウィジェットに戻したい!という方向けに記事にしてみます。 ↑私が10年以上利用している会計ソフト! ブロックベースのウィジェットだとHTML構造がおかしくなる WordPress 5.8のウィジェット使ってみたら出力HTMLがこんなことになるんだなー。クライアントが操作したらどうなっちゃうんだろなー。機能制限するしかないかなー。。。 pic.twitter.com/kJZrUYwNAC — Mana (@chibimana) July 28, 2021 見出しやテキストなどのブロックを単純に並べただけだと、HTMLの構
次のページ
このページを最初にブックマークしてみませんか?
『Webクリエイターボックス』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く