はてなブックマーク

2023年4月12日 CSS CSSをより便利に、効率よく記述できるSass。利用しているWebサイト制作者も多いでしょう。近年はCSSでもSassのような書き方ができるようになってきているので、Sassとの書き方の違いとともに紹介します！ 何度も利用する値を変数として定義し、使いまわせます。よく利用する数値や、色が連想しづらいカラーコードに利用するといいでしょう。 Sassの場合の書き方 $ マークに続いて任意の変数名を書き、コロンで区切って変数の値を記述。この値が呼び出されるようになります。実際に使いたい箇所では $ マークと変数名を書けば、変数を呼び出せます。 $main-gutter: 30px; .box { width: 300px; height: 100px; margin: $main-gutter; } CSSの場合の書き方 公式では「カスケード変数のためのCSSカスタ

2023年3月28日 便利ツール Canvaは、用意された多数のテンプレートから、オンライン上で簡単にグラフィックデザインができるツールです。無料でも利用可能ですよ！そのCanvaにAIであれこれ便利に作れちゃう機能が追加されたと耳にしたので、さっそく使ってみました！ 文章を考えてもらえる！ Canvaのアカウントを作成し、ログインすると、作成したいコンテンツのジャンルを選べるようになっています。文章を作りたいので、「Docs」から「Docs to Decks」を選択しましょう。 こんな感じのデフォルトの文章が用意されています。画面上部のオプションバーから書式の選択ができますし、慣れている人はマークダウン形式でサクサク書き進められますよ。 ひとまず拙著『1冊ですべて身につくJavaScript入門講座』の文章をコピペして挿入してみました。 さて、これでは通常の文書作成機能と変わらないので、

2023年3月22日 Webサイト制作, 便利ツール ChatGPTの話題がつきないですねー！私も日々遊んでみたり、お仕事に導入してみたりと、あれこれ試しています。そんな中見かけたのがChatGPT AI component generatorという、Webサイトのコンポーネント制作に役立ちそうなツールです。 ChatGPT AI component generator とは ChatGPT AI component generatorはChatGPTをベースに、指定したWebサイトのパーツ、コンポーネントのコードを生成してくれるオンラインツールです。 使い方はとっても簡単。1. の入力欄に作りたいパーツの説明を入力。日本語でもOKです。ここでは「送信って書かれたボタン」という超絶ざっくりした説明を書いてみました。2. のセレクトメニューでは生成するコードの出力形式を選択します。ひとまず「

2023年2月14日 Webサイト制作, 便利ツール アメリカのOpenAIが公開した自然な文章を生成する人工知能（AI）、ChatGPT。チャット形式で質問に答えて自然な言葉で返してくれます。みなさんもう使ってみましたか？今回は「AIによる自動Webデザイン」について、ChatGPTにブログ記事を書いてもらいました！ChatGPTを使ってみた中の人の感想は記事の最後に掲載しますね。 ↓ ここからChatGPTの生成した文章です。↓ 近年、人工知能(AI)技術はWebデザインにも影響を与えています。自動Webデザインという手法が開発され、Webサイトのデザインを自動的に行うことが可能になりました。 この自動Webデザインは、ビジネスオーナーやマーケターなどのWebサイトを作成することを求められていない人たちにとって非常に有用です。Webサイトを作成するために必要な専門知識や技術を持っていな

真似するデザインから脱却し、根本的なデザインの「理屈」を学ぼう！というデザイン解説本。とはいえ固いお話ではなく、文字が大きくてサクサク読み進められます。中でも興味深かったのが、各章末にある「〇〇を鍛えるワーク」というお話。思い出しスケッチやコンセプト推理など、現役デザイナーでもぜひ試してもらいたいワークが紹介されています。 『そもそものデザインのりくつ』を購入する 皆さんのおすすめの本もぜひ教えてくださいね！著者、出版社さんからの自薦はお問い合わせフォームからご連絡ください！ シェアする Twitter Facebook はてブ Pocket ニュースレター Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください！もちろん無料です！ :)

2023年1月30日 便利ツール, 色彩 配色ってなかなか思った通りのイメージにならず、難しいと感じる方も多いでしょう。そこで今回は、AIでオリジナルのカラーパレットをつくれるサービスColorMagicを紹介します。キーワードからかんたんに配色を生成してくれますよ！ ColorMagicを使ってみた ColorMagicのWebサイトの「パレットをつくる」ボタンから始めましょう。日本語で利用できるのが嬉しいですね！入力欄に作成したいイメージを入力します。ここではヨガと入力してみました。「生成する」ボタンをクリック。 いい感じに配色が提案されました！「同じワードで再生成」ボタンから別の配色を提案してもらえます。ただしアカウントを作成しない場合は3回まで。色の調整や保存もアカウント登録が必要です。 アカウントを作成すると、毎日10回まで無料で配色の生成できます。ログインするにはGoogleア

2023年1月18日 CSS, JavaScript, Webサイト制作, Webデザイン 最近のWebサイトギャラリー見てたら、懐かしい動きを目にする機会が増えてきました。テキストが右から左に自動スクロールするという、かつての「marquee」タグを彷彿させる動きです。今回はこの自動スクロールテキストに注目してみます。 marquee とは かつては marquee というタグが使われ、このタグで囲んだテキストが自動的に右から左に移動しました。現在でもこのタグはChromeをはじめとするブラウザーで実行できますが、すでに非推奨となっています。 このテキストの自動スクロール、少し前からまたちょこちょこ見かけるようになりました。かつては少ないスペースに多くの情報を表示するために使われていたのかなと思いますが、現代ではどちらかというと装飾目的のようです。一部のコンテンツを動かすことで、画面にア

2023年1月14日 Twitter 人気のつぶやき WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったつぶやきトップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！ 1. デザイン：デザイン素人に贈る、UIディレクション10個のポイント デザイン：デザイン素人に贈る、UIディレクション10個のポイント https://t.co/FIeMmZVPT2 — Webクリエイター ボックス (@webcreatorbox) January 4, 2023 2. Webサイト制作：1ミリ秒でも早く届けたい! HTMLで画像読込を高速化するために取り組んでいること Webサイト制作：1ミリ秒でも早く届けたい! HTML

2022年12月28日 Web関連記事, お知らせ 今年も残りあとわずか！一年間お世話になりました！毎年思いますが早いですね。という事で例年どおり、Webクリエイターボックスが今年1年どんな変貌を遂げたのか、そしてWebクリエイターボックス内でよく読んでもらった記事トップ10などを紹介しようと思います。いくつ覚えていただけてますかね？ :3 2022年ハイライト 今年あった出来事です。Podcastの開始はこれまでのワークスタイルが変わる転換期でしたね！ 3月10日 拙著『ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座』が2021年度CPU大賞 書籍部門1位を受賞 3月23日 拙著『1冊ですべて身につくWordPress入門講座』が発売されました 3月24日 Webクリエイターボックスの商標登録をしました 7月8日 Podcast『ManaのWebクリエイターカフェ

CHAPTER 1　最初に知っておこう！ JavaScriptでできること CHAPTER 2　JavaScriptに触れてみよう！ CHAPTER 3　JavaScriptの基本を学ぼう！ CHAPTER 4　イベントで操作しよう！ CHAPTER 5　複数のデータを使ってみよう！ CHAPTER 6　アニメーションを加えよう！ CHAPTER 7　Webページを作ってみよう！ CHAPTER 8　エラーと解決方法 カバーイラストはこれまでと同様ICHIRAKU STUDIO様に描いていただきました！今回も素敵なイラストをありがとうございます！ 購入する こんな人におすすめ Webサイトに動きをつけてみたい人 HTMLとCSSの基礎を学んだあと、何を勉強しようか考えていた人 一度JavaScriptを勉強したけど挫折した人 最近のJavaScriptの書き方を学びなおしたい人 jQuer

2022年12月19日 フォント 2022年もあとわずか！今年も数多くの素敵フォントがリリースされました！この一年を振り返って、「これは！」と思ったフォントをいくつか紹介します。どれも無料でダウンロードでき、商用利用可能なものです。みなさんのお気に入りが見つかると幸いです。 過去の年末フォント紹介記事 2021年にリリースされた無料フォント40 2020年にリリースされた無料フォント40 2019年にリリースされた無料フォント30 2018年にリリースされた無料フォント40 2017年にリリースされた無料フォント40 2016年にリリースされた無料フォント30 2015年にリリースされた無料フォント35 日本語フォント 瞬きノ明朝 文字がギザギザに揺れているインパクトのあるフォント。収録文字数は文字数は8000字以上！ つなぎゴシック Zen角ゴシックNを角丸・墨だまり処理したフォント。自

2022年11月24日 CSS, アクセシビリティ アニメーションのあるWebページって、見るのも作るのも好きなんですが、みなさんはいかがでしょう？中には動きが苦手で目が疲れてしまう、画面酔いしてしまう…なんていう方もいらっしゃるかと思います。今回はアニメーションが苦手な方のためにWebサイト側でできることを考えてみます。 アニメーションを減らす設定 アニメーションによって画面酔いしてしまったり、動きがつくと内容が理解できなくなるという方は、OS側で視覚効果を減らす設定をしているかと思います。そういった設定をしている場合は、CSSでWebサイトのアニメーションもなくす、あるいは軽減させる指定が可能です。 設定方法 まずはアニメーションを減らすためのOS側の設定方法から紹介します。 Windows 10: 設定 → 簡単操作 → ディスプレイ → アニメーションを表示する macOS: シス

2022年11月10日 CSS, Webサイト制作 以前から個人的にダークモードの対応を推奨しています。基本の書き方は過去記事「Webサイトをダークモードに対応させよう」を読んでもらうとして、今回は画像まわりのダークモード実装方法を中心に紹介します！ 画像の明度や彩度を落とす 明るい背景色の場合、画像は鮮やかで明るい色合いが目に止まりやすいですよね。しかしダークモードでは、まわりが暗くなるので画像だけ派手に眩しく見えてしまいます。そこで、CSSの filter を使って、ダークモードのときは明度や彩度を調整するといいでしょう。 実装するには filter プロパティーに、明度は brightness() 、彩度は saturate() を指定します。カッコの中にパーセントで割合を書けば完了。明度・彩度両方指定するなら以下のように値を続けて書きます。 @media (prefers-colo

2022年10月19日 CSS 画像の中の色や明るさの濃淡を、様々な大きさのドットで表現するハーフトーン。日本語では網点とも言うようです。どこかレトロで、アメコミタッチなこのハーフトーンを、CSSで表現してみます！ グラフィックツールを使わず、CSSだけでひとつの画像をこんな感じに加工してみます。 1. 画像をdivに入れておく まずは下準備。「halftone」というクラス名をつけた div に画像を入れておきます。今回は猫ちゃんの画像を用意しました。 HTML <div class="halftone"> <img src="cat.jpg" alt=""> </div> 2. CSSで水玉模様を作成 「halftone」クラスに ::after で疑似要素を作成。 position を使って猫ちゃん画像の上に重ねます。水玉模様は円形グラデーションで作成します。このとき radial-

2023年2月7日 JavaScript, React 以前よりReactの勉強がてら、1時間を40分で区切った36時間時計というのをモクモクと作っています。その中でReact Hooksの使い方などを学んでいるので、今回はよくあるアナログ時計を作りながら勉強メモとして残しておきます。 こんな感じのアナログ時計作ってみた よくある時計ですね！個人的にはデジタル時計派なのですが、意外と需要があるようなので作ってみることに。ちなみにこれは別にReactを使わなくても、素のJavaScript（Vanilla.js）で作成可能です！が、上記36時間時計を作る中でReactコンポーネントとして必要だったので今回はReactで挑戦しました。 CSSでベースとなるアナログ時計作り アナログ時計自体は空の div にサイズや position の設定をして作成。時計の角度は rotate プロパティーを

2022年8月9日 便利ツール, 海外情報, 英語 DeepL（ディープエル）翻訳は、ドイツの企業が開発している機械翻訳エンジン。自然で高い品質の翻訳文が話題となっています。今回はそのDeepL翻訳を、Webデザインや制作、技術系の分野で活用していく方法を紹介します！ DeepL翻訳の使い方 DeepL翻訳の翻訳精度の高さは一度使ってみると実感できるかと思います。基本的にはDeepLのWebサイトにアクセスして、翻訳したい文章をコピペするだけ。ただ、毎回DeepL翻訳のWebサイトに文章をコピペするのって地味に面倒ですよね…。 そこでおすすめなのがDeepL翻訳のChrome拡張です。インストールしてWebサイト内の文章を選択すると、カーソル付近にDeepLマークが表示され、クリックすれば翻訳されます。 技術系ドキュメント特有の用語やコードを含んでいても、意味のわかる日本語文に変換されてい

2022年7月20日 CSS, Webデザイン, スマートフォン モバイルは幅が狭く、デスクトップは幅が広いので、それぞれのデバイスにあわせてWebサイトの幅も可変させたりしますよね。しかし最近、デスクトップで見てもモバイル幅のまま表示させている国内のWebサイトをちょこちょこ見かけます。今回はそんなモバイル幅のWebサイトを見ていこうと思います。 モバイル幅Webサイトの特徴 デスクトップで見ても狭いコンテンツの幅 よくあるWebサイトでは、コンテンツ部分の枠がデバイスの幅によって変化します。例えばモバイルサイズでは幅が狭くなり、デスクトップサイズでは幅が広がって画面中央に表示されます。このブログでもそうですよね。しかし、昨今見られるようになったレイアウトでは、デスクトップサイズで見てもコンテンツ枠の幅は狭いままで表示されています。画面中央に表示されるものが多いのですが、中には右側に配置

2022年7月3日 書評 Web制作やデザインに関する情報は、インターネット上以外にも書籍を通して体系的に学ぶことができます。今月も様々な本を拝読しました。その中でいいなと思った物、オススメの物をいくつか紹介します。 COLOR by COLOR 配色ひらめきツール

2022年12月24日 JavaScript, React, Wordpress 最近はReactをベースにしたフレームワーク、Next.jsをいじっております。今回はWordPressに登録した投稿をNext.jsで表示させてみようと思います！ ヘッドレスCMSとは？ ヘッドレスCMSはコンテンツの管理のみをするCMS（＝Content Management System）のこと。例えばWordPressではコンテンツの作成から表示までを行えますが、ヘッドレスCMSではコンテンツの表示は別の方法で行います。ここではNext.jsを使ってみます。 ヘッドレスCMSを使うメリット 表示部分を別途用意することになんのメリットがあるのでしょうか？ざっくりと以下の3点が挙げられるかなと思います： 表示速度の改善 セキュリティの向上 管理しやすい 通常のWordPressではアクセスがあるたびにデー

2022年5月24日 Webデザイン, 便利ツール こんにちは、ダークモード推奨派のManaです。以前からダークモードの布教活動を細々としておりますが、まだまだダークモードに対応していないWebサイトもたくさんあります。今回はダークモードに対応していないWebサイトを強制的にダークモードにしちゃう拡張を紹介します。 前々から夜間見えづらいって事は認識していましたが、どうやら光の見え方も多くの方とは違うと最近判明…！みんなこんなシャキーンって感じの光の線は見えないんですかね…？夜景なんて光るウニの集合体ですよw ちなみにスターバースト現象というらしい ←おそらく多くの人が見えるビュー Manaビュー→ pic.twitter.com/bfxZAK7FYE — Mana (@chibimana) September 8, 2020 以前『Webサイトをダークモードに対応させよう』という記事でも

2023年2月7日 JavaScript, React Reactの勉強がてら、高画質な画像を配布しているUnsplashが提供しているUnsplash APIを使って画像検索アプリを作ってみました。その復習に作成手順をまとめてみたので、これからReactを勉強しよう！と思っている方の役に立てれば幸いです！ この記事は動画でも解説しています。動画派の方はぜひご覧ください！ 目次 Unsplashとは こんなアプリを作ってみよう 1. Unsplash APIの開発者登録 2. ViteでReactアプリのベースを作成 3. タイトル部分の作成（Title.jsx） 4. 検索フォームの作成（Form.jsx） 5. Unsplashのデータを取得 6. 検索結果の表示（Results.jsx） 7. 環境変数の作成（.env） 完成！ 白黒画像の検索版も作ってみたよ Unsplashとは

2023年2月7日 HTML これまで「少しのコードで実装可能な10のCSS小技集」シリーズでCSSのちょっとしたTipsを紹介していましたが、今回はHTMLバージョン！知っていると使い勝手がちょっとよくなる小技を集めました！ 目次 セレクトメニューの選択肢をグループ化 type 属性値によって入力欄が変化 スマートフォンでエンターキーのテキストを変える 画像の遅延読み込み テキストの折り返し位置を指定する 番号付きリストの順番を変更する 簡単アコーディオン 任意のテキストを自動翻訳させない リンク先のテキストを指定してスクロールさせる 1. セレクトメニューの選択肢をグループ化 複数の選択肢を用意できるおなじみの select タグ。項目は option タグを利用しますが、さらに optgroup タグで囲むことでグループ化できます。選択肢が多い場合に使うとユーザーも選びやすくなります

2022年3月17日 JavaScript Web Animations APIとは、他のライブラリーを使わずにアニメーションを実装できるJavaScriptの仕様です。CSSアニメーションと違い、様々な関数やイベントと組み合わせてより柔軟に、より豊かな表現が可能となります。今回はそんなWeb Animations APIを使ってみましょう！ Web Animations APIの基本の書き方 基本的な考え方や構造はCSSアニメーションと同じですが、アニメーションの内容やどう動かすかの指定は、配列やオブジェクトで記述していきます。基本形はこんな感じ： JavaScript 動かす要素.animate(動かす内容, 動きの詳細); 動かす内容（キーフレーム） animate() の第一引数には動かす内容、キーフレームを指定します。CSSと同じ形でプロパティーを書きますが、JavaScript

2021年度CPU大賞 書籍部門1位を受賞！拙著『ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座』 2022年3月10日 お知らせ 全国の書店員さんの投票で決定する2021年度CPU大賞「書籍部門」の大賞を、拙著『ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座』が受賞しました！ CPU大賞って？ CPUとはコンピュータ関連の書籍を発行する出版社7社が加盟する「コンピュータ出版販売研究機構」のこと。CPU大賞は2021年1月1日から12月31日に発売された書籍を対象に、全国主要書店158店舗のコンピュータ書籍の担当者による投票で、最も票数が多かった書籍が選定されるそうです。 そんな素敵な賞に1位として選ばれました！前作『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』に続き、二度目の受賞とのことで驚きました！ありがとうございま