はてなブックマーク

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

2022年3月24日 Web関連記事, 便利ツール 商標とは自分や自社が扱っているサービスや商品が、他のものとは違うよー！オリジナルだよー！と識別するためのもの。今回はそんな商標をToreruというサービスで取得したお話です。 ↓私が10年以上利用している会計ソフト！ そうだ、商標登録をしよう。 以前とあるYouTubeのチャンネル名が第三者によって商標登録出願されたということがありました。個人が運営している媒体でもそんなことが起こるなら、10年以上運営しているこのブログ名もきちんと管理した方がいいかなぁと思い始めていたときに、「Webクリエイターボックス」や「webcreatorbox」とよく似たアカウント名でサービス登録している人の存在に気づきました。それどころかその似たアカウント名の保有者がやらかした事への問い合わせが私宛にくることもあったので、きちんと商標登録しよう！と、登録方法な

2022年3月18日 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月16日 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年1月18日 JavaScript, React Viteは2020年に発表されたフロントエンドのビルドツールです。最初「ヴァイト」と読んでたんですが、「ヴィート」と読むみたいですね。フランス語で「速い」という意味だそうです。絶賛Reactのお勉強中なので、ViteでReactの環境を作る流れを備忘録的にまとめておきます！ ↓私が10年以上利用している会計ソフト！ この記事は動画でも解説しています。動画派の方はぜひご覧ください！ Viteとは？ Viteを使えばベースのプログラムを予め準備しておいてくれているので、開発をすぐに始められるようになります。スターターキットとか、テンプレートみたいなものですね。他にも複数のファイルをひとつにまとめたり、SassをCSSに変換するなどの作業を爆速でできるようになります。 また、ファイルを保存すると同時に、確認画面も自動的に更新されます。ホッ

2022年1月5日 CSS メッシュグラデーションとは、複数のポイントで色を指定したグラデーションのことです。あえて統一感をなくすことで、遊び心のあるふわふわした印象となります。このメッシュグラデーションをCSSで作成してみましょう！ ↓私が10年以上利用している会計ソフト！ 基本の円形グラデーション まずは基本的な円形グラデーションの指定方法です。background-image プロパティーで radial-gradient() のカッコ内に開始色と終了色をカンマで区切って指定します。 background-image: radial-gradient(開始色, 終了色); この時、色を transparent とすると、透明色が指定でき、後述する複数の色を重ねる時に利用できます。ついでに background-attachment: fixed; を合わせて指定すれば要素いっぱいに色

2021年12月21日 フォント 2021年もあとわずか！今年も数多くの素敵フォントがリリースされました！この一年を振り返って、「これは！」と思ったフォントをいくつか紹介します。どれも無料でダウンロードでき、商用利用可能なものです。みなさんのお気に入りが見つかると幸いです。 ↓私が10年以上利用している会計ソフト！ 過去の年末フォント紹介記事 2020年にリリースされた無料フォント40 2019年にリリースされた無料フォント30 2018年にリリースされた無料フォント40 2017年にリリースされた無料フォント40 2016年にリリースされた無料フォント30 2015年にリリースされた無料フォント35 日本語フォント 清明かな 滑らかな曲線が美しく、伸びやかな切れ味の中に優しさ・優美さを包含した不思議な書体。 天浜線フォント 静岡県西部のローカル線「天竜浜名湖鉄道（通称：天浜線）」の駅名看

2021年12月14日 インスピレーション, 色彩 毎年恒例、PANTONEによる「来年の色」が発表されました！2022年は「Very Peri」です。これまでは既存の色から選ばれてきましたが、今年は初めて新たな色が作られました！そんな「Very Peri」に注目してみたいと思います。 ↓私が10年以上利用している会計ソフト！ 「Very Peri」ってどんな色？ 青の持つ誠実さと不変性、赤の持つエネルギーと興奮を融合させた、温かみのある紫色。この新しい色は、感染症の影響でこれまでとは異なる生き方や働き方への移行期にあることを表しているそうです。どこか落ち着くような、また、新しいことへの期待を感じる色ですね！ 色の具体的な数値は以下の通り： PANTONE：17-3938 Very Peri カラーコード：#6667AB RGB：R102, G103, B171 グッズも販売されています

2021年12月8日 Wordpress WordPressでは2018年から「ブロック」と呼ばれる要素のかたまりを組み合わせてコンテンツを作っていくブロックエディターが利用できるようになりました。今回はテンプレートファイルはいじらず、WordPressの管理画面（ダッシュボード）でブロックを組み合わせるだけでWebサイトを作成できるフルサイト編集機能にフォーカスします！ ↓私が10年以上利用している会計ソフト！ フルサイト編集とは？ フルサイト編集（FSE＝Full Site Editingとも呼ばれます）は、投稿やページだけでなく、ヘッダーやフッター、サイドバー、ナビゲーションメニューなど、Webサイト内のあらゆる部分にブロックを使って構成できる機能です。つまり、これまでは投稿やページのコンテンツ部分のみブロックに対応していましたが、フルサイト編集機能のついたテーマであれば、Webサイ

2021年11月18日 JavaScript いつも何気なく使っていたコードをふと調べ直してみると、知らないうちに「Deprecated（非推奨）」と書かれている…なんてこともありますよね。今回はJavaScriptを書いていて出くわした非推奨となったものをいくつか紹介します。 ↓私が10年以上利用している会計ソフト！ document.write 画面にテキストを表示する document.write 。JavaScriptの勉強を始めて最初に書いたコードがこれだったという方もいるのではないでしょうか？これはブラウザーのレンダリングに悪影響が出たり、DOMへの影響などを考慮して「強く非推奨」とされています。 これまでの記述例： document.write('やっほーい'); 解決策1：textContent や innerHTML を使う 代わりに文字列を書き換える textConte

2021年11月11日 JavaScript 新しいMacbook Proが発売され、特設ページが公開されています。そのページの中で私の目に止まったのは、Macbook Proのスペックではなく、スクロールに合わせて動くグラデーションカラーのテキストでした。今回はこれをJavaScriptの Intersection Observer を使って実装した例を紹介します。 ↓私が10年以上利用している会計ソフト！ この記事は動画でも紹介しています。動画派の方はこちらを御覧ください！ このテキストを実装したい！ Macbook Proの紹介ページにあるグラデーションカラーのテキストです。スクロールするとグラデーションの位置も変わるのがわかりますね！ Intersection Observerとは？ 従来、スクロールに合わせて要素を操るには scroll というイベントを利用していました。ただ、そ

2021年10月22日 Webサイト制作, 便利ツール Webサイトの制作中には、とりあえずで入れておく「ダミー」を使用する事が多々あるかと思います。日本ではアタリ・アテなどとも呼ばれますね。そんなダミー画像を便利に生成してくれるジェネレーターをいくつか紹介します。かつて「制作途中にお世話になる、ダミーテキスト・ダミー画像のジェネレーターいろいろ」という記事で紹介したこともあったのですが、SSLに対応していないものも多かったので、httpsに対応した画像URLが生成できるもののみに絞りました！ ↓私が10年以上利用している会計ソフト！ Placeholder.com Placeholder.comは昔からあるダミー画像を提供しているサービス。とにかくシンプル！以前の名前はPlacehold.itでした。その頃からずっとお世話になっています！ 基本的な使い方は、画像のソース部分に https

2021年10月6日 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月25日 Wordpress WordPress 5.8が公開され、ウィジェットの扱いが大きく変わって早1ヶ月。皆さんうまくウィジェットとお付き合いできていますか？レイアウトが崩れたりHTMLの構造がおかしくなっちゃったりの不具合をどうにかする方法や、そもそも元のウィジェットに戻したい！という方向けに記事にしてみます。 ↓私が10年以上利用している会計ソフト！ ブロックベースのウィジェットだとHTML構造がおかしくなる WordPress 5.8のウィジェット使ってみたら出力HTMLがこんなことになるんだなー。クライアントが操作したらどうなっちゃうんだろなー。機能制限するしかないかなー。。。 pic.twitter.com/kJZrUYwNAC — Mana (@chibimana) July 28, 2021 見出しやテキストなどのブロックを単純に並べただけだと、HTMLの構

2021年7月14日 Nuxt JS, Vue.js, Webサイト制作 WordPessで作成していた私のポートフォリオサイトをNuxt JSで作り変えてみました。デザインや内容はそのままで、管理体制を変えた感じですね。Nuxtに移行した理由や悩んだところをまとめてみます。 ↓私が10年以上利用している会計ソフト！ 移行を決めた理由 元々私のポートフォリオサイトは、まだ私が学生だった頃にWordPressの勉強用に作ったものです。その後何度かリデザインしながら公開していました。ブログなどはつけておらず、制作物の紹介を投稿記事として扱っていました。ただ、制作物は更新する頻度も高くはなく、WordPressでなくてもいい気がしてきていました。また、WordPressやPHPのバージョンを上げるたびにエラーを出すプラグインの対応に疲れてきていたところでした…。 そんな中出会ったのがGatsby

2021年6月16日 Webサイト制作, Webデザイン HTML/CSSのコーディングの練習をするときに、既存のWebサイトの模写をする方もいらっしゃるかと思います。模写は模写で勉強になる点もありますが、実務ではデザインカンプと呼ばれるデータファイルを渡され、それを仕様にそってHTML/CSSでコーディングしていきます。実務に近いかたちに慣れるためにも、デザインカンプからのコーディングの練習をしていきましょう！ ↓私が10年以上利用している会計ソフト！ Codestep Codestepは作って学ぶコーディング学習サイト。HTML、CSS、JavaScriptの基礎学習を終えた方が、模写コーディングやデザインカンプからのコーディング練習を通して、より実践的なWebサイト制作のスキルを身につけるための学習サイトです。HTML/CSSだけではなく、WordPress用の教材もあります。 コー

2021年5月27日 Webサイト制作, フリーランス フリーランスWebデザイナーを目指して日々勉強をしているみなさん、そろそろ実案件を受けようと準備を進めているみなさん、いかがお過ごしでしょうか？スキルの向上は実践あるのみ…と言われますが、最初のうちはその実践を積む機会がなかなか持てませんよね。今回はそんな新人のみなさんが最初に案件を取るまでのお話を書いてみます。 新人フリーランスWebデザイナーは仕事を受けにくい？ 答えはYES。新人を雇わない理由はたくさんあります。まずは品質への不安。クライアントの立場で考えてみると、やはりクオリティの低いサービスは受けたくありません。そして指定した時間通りに納品してくれるかも不安です。つまり信頼がないわけですね。 一度も案件をこなしたことのない新人にはレビューも実績もありません。品質がどんなものなのか、納期が守れるのかもわからない相手に仕事を依頼

2021年5月13日 JavaScript, Vue.js たくさんある商品画像やポートフォリオの作品一覧などを見せたいときに、カテゴリーごとに絞って表示できたら便利ですよね。Vue.jsを使えば同じページのまま表示画像を変更できるので、管理も楽になりますよ。 完成図 まずは画像を一覧で表示させ、上部にあるカテゴリー名のボタンをクリックすると、そのカテゴリーに属する画像だけを表示させます。 1. Vue.jsの読み込み設定 まずはHTMLの head 内にVue.jsを読み込ませます。別のバージョンやNPMでのインストール方法は公式サイトを参照してください。 <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script> 2. 画像を一覧表示 Vue.jsの配列を使って画像を用意します。各画像に index と

2021年4月21日 Webサイト制作 外出する機会も減り、これまであった勉強会などのイベントもめっきり減ってしまいました。スキルアップのためのモチベーションもなかなか上がらない方も多いかなと思います。そんな中、今はオンラインの勉強会やワークショップなどのイベントも多数開催されています。興味のある分野のオンライン勉強会を覗いてみてはいかがでしょう？ ↓私が10年以上利用している会計ソフト！ Webサイト制作・デザイン関連 TECH PLAY［テックプレイ］ TECH PLAY［テックプレイ］はWebサイト制作やプログラミング、デザイン、マーケティングなど、Web業界に関わる勉強会をまとめたWebサイト。一緒に何かを開発していくワークショップや、イベント動画に接続したままそれぞれ作業をすすめる「もくもく会」も多く開催されています。対面イベントもちょこちょこあるので、ご近所で開催されていれば感

2021年3月24日 CSS, HTML5, Webサイト制作 Webサイトを制作中に、なぜかうまく表示されないことはよくありますよね。最初のうちは簡単なミスを見落としがちです。実際によく質問される項目を、拙著「ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座」にてまとめています。その一部、特にHTML/CSSについて頻繁に聞かれるケースを紹介します。 ↓私が10年以上利用している会計ソフト！ 記述したコードが反映されない ファイルが保存されていない 作業中のファイルとは別のファイルをプレビューしている コードのスペルミス よくわからないけど表示が変 正しいタグや属性の記述になっていない→記述方法の確認。リファレンスサイトも確認しましょう 開始タグと閉じタグの数が一致していない 閉じタグが正しい場所に記述されていない HTMLの文法エラーがないかチェック デベロッパー

2021年3月18日 オーディオ, フリーランス, 便利ツール リクエストがあったので、仕事部屋と作業環境を紹介します。よくある環境かなぁと思いますが、変わり種で言うと椅子と壁紙くらいですかね。参考になれば幸いです！ ↓私が10年以上利用している会計ソフト！ iMac メインで使っているのは21.5″ のiMac。27″ だと部屋の広さ的に大きすぎるので、25″ M1 iMac がそのうち発売されないか待っているところです。コーディングをはじめ、動画編集などの負荷の大きい作業はすべてこちらで。 iPad Air iPad Airはおもに調査、執筆、問い合わせ対応、簡単な画像編集、お絵かき、読書などに利用。SidecarでiMacとつなげて作業することも。お仕事にもプライベートにも、幅広く使っている気がします。 付属品はApple PencilとMagic Keyboard。今の所快適に使え

2021年3月4日 CSS CSS小技集シリーズの第4弾！「【第3弾】少しのコードで実装可能な15のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ ↓私が10年以上利用している会計ソフト！ 目次 要素の上下左右中央配置 画面幅いっぱいに画像を配置 リストマーカーの色を変える 言語にあわせて引用符を変更 クリックで文字列を選択 背景画像を見切れないよう繰り返し表示 入力時の縦線の色を変更 ドラッグで要素のサイズを変更できるようにする floatは flow-root で解除 文章をカラム分けしてラインを入れる HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！ 1. 要素の上下左右中央配置 ボックスを要

2021年2月2日 JavaScript, Nuxt JS Nuxt JSで作成されたプロジェクトをi18nというプラグインを使って多言語化に対応する方法を紹介します。あまり実装する機会はないかと思いますが、自分用に備忘録として。自動的に翻訳してくれるわけではなく、言語ファイルを用意して切り替えるという仕様です。すでにNuxt JSでプロジェクトを作成していることを前提に書いていきます。 ↓私が10年以上利用している会計ソフト！ i18nをインストールする 公式サイトを参考に、yarn または npm でインストールします。 Yarn yarn add nuxt-i18n NPM npm i nuxt-i18n 言語ファイルを作成 今回は英語と日本語のWebサイトを作成していく手順を紹介します。プロジェクトの第一階層に「lang」フォルダーを作成し、その中に英語版を「en.js」、日本語版

2021年1月29日 書評 Web制作やデザインに関する情報は、インターネット上以外にも書籍を通して体系的に学ぶことができます。今月も様々な本を拝読しました。その中でいいなと思った物、オススメの物をいくつか紹介します！ ↓私が10年以上利用している会計ソフト！ イメージをパッと形に変えるデザイン大全

2021年1月21日 JavaScript, Nuxt JS, Vue.js 以前「WebデザイナーのためのVue.js事始め」という記事でVue.jsについて触れたのですが、それから今まで、どんな手順で勉強してきたのかを紹介してみます。途中ReactやGatsbyを取り入れたりもしていたのですが、結局 .vueファイルでの単一ファイルコンポーネントが楽だなーと思い、今はVue.jsに全振り中です。これから勉強してみたい方の参考になれば幸いです。 ↓私が10年以上利用している会計ソフト！ 1. Vue.js公式Webサイトを確認 まずはVue.jsの公式Webサイトを確認。日本語にも対応しています。ここで基本的な使い方、文法、何ができるのかなどをざっくり学習しました。 サンプルコードがある箇所は実際にCodePenを使ってコードを記述し、動作確認します。公式は今後何度も繰り返しチェックする