セレクトボックスとラジオボタンはどう使い分ける？

Web制作をしていると、フォームで選択肢のどれかひとつを選択して欲しいとき、セレクトボックスとラジオボタンの使い分けに悩むこと、ありませんか？ 「他のサイトがそうしていたから」などといったなんとなくの感覚でフォームの形式を選んでしまっているのが正直なところ。 今回はそんなセレクトボックスとラジオボタンの使い分けに境界線をつけるべく、再度考えてみました。 セレクトボックスとラジオ

Web制作

2023.07.29

商用完全無料で使えるアイコンサイト4選

Webサイトのデザインのクオリティを保ったままアクセシビリティを向上させるためにアイコンが使われることが多くありますが、皆さんはどのような基準でアイコンを選択しておりますでしょうか？ 掲載されているアイコンの数だったり、デザインツールでプラグインが使えたりなどの利便性で選んだり… 今回はアイコンサイトを3つ紹介します。 Material Icons（1,300以上）

Web制作

2023.05.19

【学習コストほぼゼロ】LottieFilesことはじめ。イラストアニメーションをWebサイトに導入しよう。

近年、アニメーションを利用したリッチな表現のサイトが増えています。 動画をWebサイトに載せるのはサイトが重くなってしまったり、JavaScriptでのアニメーションは学習コストが高くなってしまう傾向にあります。 GIFも検討のはいいけれど、画質が悪いことも。 そこで、あらかじめアニメーションが施されたイラストをLottieFilesとしてダウンロードすることで簡単かつ軽量でW

Web制作

2023.05.11

jquery.cookie.jsでCookieを手軽に扱う

Webサイトの制作において、JavaScriptで制御した挙動を保持しておきたいとき、ありませんか？ JavaScriptでの制御はページ遷移後にブラウザバックするとデフォルトに戻ってしまうので、場合によってはユーザーのアクセシビリティを下げてしまうことも。 そこでCookieを利用することを提案します。 そんなCookieを手軽に扱えるのがJavaScriptライブラリ「jq

Web制作

2023.05.10

みていて楽しい、おしゃれなWebデザインギャラリーサイト3選

Web制作の仕事をしている人なら一度は閲覧したことがある「Webデザインギャラリー」ですが、どのようにして選んでおりますでしょうか。 更新頻度や機能性はもちろん、「おしゃれさ」にも注目してみませんか？ 今回はセンスが光るおしゃれなWebデザインギャラリーを紹介します。 MARP Web制作会社「M-HAND」が手掛けるサイト Web制作会社の「M-H

Web制作

2023.05.09

Safariでサイトを開いたときにMaterial Iconsのアイコンが表示されない時の対処法

コーディングして、ブラウザで確認する際に「Safariだけアイコンが表示されない！」といった問題に直面したことはありませんか？ その問題、CSSに記述を追加するだけで対応できます！ 前提条件 この記事を理解するにあたって アイコンフォントがきちんと読み込まれているGoogle Chromeでは表示されているが、Safariで表示されなくなったBootstrapでもこの方法

Web制作

2023.03.10

【2023年1〜2月】pino creators アップデート内容

いつも当ブログをご覧いただき、ありがとうございます。 当サイトは記事を投稿しつつ、何か面白い仕掛けはないかと日々模索しております。 そんな中、2023年1月に少し大きめのアップデートをしましたので、紹介いたします。 ダークモード対応 サイドバーに「表示モード」という項目を追加し、ダークモードに対応しました。 通常モード ダークモード

お知らせ

2023.02.23

Figmaでオブジェクトを合成してキラキラアイコンを作ろう

以前、「XDでシェイプの合成を使ってキラキラアイコンを作ろう」という記事を書きましたが、AdobeがXDの単体プランの取り止めを行い、XDを全面的に押し出すことは無くなってきているため、Figmaでのキラキラアイコンの作成方法を紹介いたします。 基本的な作り方はXDと同じ 基本、以下の記事のStep1〜Step3はほとんど同じになります。 https://creators.p

Web制作

2023.01.29

Adobe XD 「シェイプの合成」でキラキラアイコンを作ってみよう！シェイプの合成についても解説！

突然ですが、遊び心やあしらいに "キラキラアイコン"を使いたいと思ったことはありませんか？ Font AwesomeやMaterial Iconsにもあったりなかったりしますが、この"キラキラアイコン"、XDと発想の転換で自作できちゃうんです。 目標：背景色や大きさ、枠線、縦横比を変更できるアイコンを作る 今回目標とする形は画像のようなキラキラです。 背景色や大き

Web制作

2023.01.21

なぜあなたのポートフォリオサイトは完成しないのか。原因はたったひとつ！制作着手前のステップも公開！

近年、Web制作を仕事にしようとSNSのプロフィール欄に自作のポートフォリオサイトのリンクを添付している方が多くみられます。 その中でも気になったのが、 ナビゲーションのリンク切れページのコンテンツが途中リンク遷移先が他と同じページ といった「完成していない」ポートフォリオサイトが散見されます。 そして数ヶ月後また同じサイトを見るとまだ見せられる段階にない…。 完成

Web制作

2022.12.20