はじめに モダンブラウザで使われるファビコンの作り方を見直して、今こそアイコン生成であくせくするのを終わりにしましょう。昨今のフロントエンド開発者は、ブラウザタブやらタッチ画面やらにWebサイトの小さなロゴを表示する、ただそれだけのためだけに静的なPNGファイルを20個以上扱わなければなりません。よりスマートな方法で、現代のニーズに合う最小限のアイコンセットを使う方法を紹介します。 ファビコンは見かけよりもずっと幅広く奥深いトピックで、実は誰もがファビコンについてしっかり学びたいと思っていることもわかってきました。本記事全体の内容を実質わずか2行のスニペットに凝縮したものも紹介していますので、今ファビコンで苦しんでいる方は（正確な使い方をご存知なら）そちらをお使いいただけますが、そこをぐっとこらえて記事を最後までお読みいただくことをおすすめいたします。 🔗 忙しい人向け: ウルトラショー

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。 最新のファビコン（favicon）のサイズ一覧と作り方について解説します。 本当に必要なファビコンだけをピックアップしました！ ファビコンサイズや作り方についてWebデザイン初心者の方にも分かりやすく解説いたします。

はじめに ざっくり内容 解決したいこと faviconの設定方法が分からん 沢山のサイズの画像を用意するイメージあるが、本当に正しいのか faviconでいろんなサイズを用意してもブラウザの仕様変わるとイタチごっこなので、１つのsvg追加だけで済ませたい やること サイズやカラーが変更できるsvgを利用して、全てのサイズを脳死で用意するのではなく必要な画像だけ用意してfaviconを設定する。 svgでスマートにfaviconを設定するサマリ 前提 svg favicon はsafariでは使えない。 結論 ある程度の解像度のfavicon用画像を用意する メインのfavicon.icoを48x48で用意する realfavicongenerator便利だよ [注意]これはsvgじゃないよ [理由]16x16(retinaの場合は32x32)よりも大きいのでchromeがこの利用をスキップ

今回はLPやホームページの静的ページの問い合わせフォームの制作に活用できる「PHP工房」について解説していきます。ボリュームの少し多めの記事ですが、一つひとつの作業自体はかなり簡単ですので、上から順に実装すればオリジナルデザインのフォームを完成させることができます！ カスタマイズ可能かつ確認画面つきのテンプレートではいくつかありますが、PHP工房は比較的簡単に実装ができるので、実案件でもぜひ実践してみてください！ フォームとしての必要最低限の機能を抑えつつ、カスタマイズ性が良いのは魅力的ですね！では、早速具体的な実装方法について解説していきます。 PHP工房の実装手順 テンプレートファイルをダウンロード まずは下記の手順でPHP工房の公式サイトから今回使用するテンプレートファイルをダウンロードします。 →PHP工房公式サイト 1.「【MailForm01】メールフォーム　フリー」をクリック

はじめに タイトルについて記事にしました。 この記事で得る内容は以下の通りです。 ・ PHPを使ってお問い合わせフォームを実装 学習したことを一気に書いていたら長文になってしまいました。それでも構わなければご覧下さい。 手軽にお問い合わせフォームを実装したいという方は以下の記事をご覧下さい。 ・参考記事：Googleフォームを使ってお問い合わせ機能を実装する ローカルでPHPの動作確認をする XAMPPやMAMPなどを使わずに、ローカル環境で動作確認をしたい場合は、phpがインストールされている状態で、以下のコマンドを開発ディレクトリ下で実行しWebサーバを起動します。 http://localhost:8888/にアクセスをすると、index.phpの内容が表示されます。 概要 処理の全体図を画面イメージとシーケンス図を使って解説します。 画面イメージ PHPを使って、以下のような入力・

みなさん、お問い合わせフォームはどうやって作っていますか？ 恐らくCMSのプラグインを使って作成することがほとんどかと思います。 ただ、ときにはスクラッチでお問い合わせフォームを作成しなければならないことがあると思います。 そこで今回はPHPを使用して、セキュリティを考慮したお問い合わせフォームを作成します。 なお、今回のお問い合わせフォームは入力ページと確認ページ、完了ページの3つに分ける想定で進めます。 <form action="confirm/" method="post"> <table class="c-table01"> <tbody> <tr> <th> <label class="required" for="name">お名前</label> </th> <td> <input type="text" name="name" id="name" placeholder=

【PHP】お問い合わせフォームを自作する WebサイトやLPを制作する際、必ずと言って良いほど掲載するのが「お問い合わせフォーム」です。 お問い合わせフォームは、顧客やユーザーがサイトのオーナーにアクセスする入口となるため、WebサイトやLPにとって非常に重要と言えます。 その作成方法については色々ありますが、今回はシンプルに自作する方法について解説します。 できる限りシンプルで軽量なお問い合わせフォームを作りたい 静的サイトにお問い合わせフォームを導入したい WordPressサイトでプラグインを極力使用したくない このような方に向けて、PHPを使用してシンプルなお問い合わせフォームを自作するを解説します。 完成版だけ確認したい方は、GitHubで確認可能です。 お問い合わせフォームの作成手順 まず始めに、お問い合わせフォームの作成手順を示しておきます。 HTML形式でお問い合わせフォー

僕がプログラミングを始めてから2年8ヶ月が過ぎました。 今までは基本的にフロントエンドをメインに取り組んできましたが、勉強しているうちに興味が移り、今後はバックエンドに方針転換するつもりです。良いタイミングなので、今までの取り組みを振り返っておこうと思います。

「ワイド」や「スタンダード」などは、比率を表す通称です。3:2以外は通称で呼ばれることも多いので覚えておくと良いでしょう。 ブログの画像としては、以下のような比率が一般的です。 アイキャッチ画像 16:9／3:2／1:1.618 見出し下の画像 4:3／3:2／1:1.618 ブログ記事の場合、縦幅が長すぎるとスマホで表示した際に圧迫感が出てしまい、読者がストレスを感じる原因になります。逆に横幅が長すぎると、画像が縮小されて視認性が下がってしまうので注意が必要です。 上記の例を見て分かる通り、画像の比率によってブログ記事の印象は大きく変わります。 ブログ記事の要は画像ではなくテキストなので、画像と本文のバランスが取れるように調整しましょう。参考画像の中央（緑色）のようなバランスにするのが理想的です。 画像の比率を統一するメリット 画像の比率を統一すると、ブログのトップページで記事一覧が表示

スタイリッシュなデザインのハンバーガーメニューのCSSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインのメニューは利用者の興味を引き付けます。 ハンバーガーメニュー（三本線のメニュー）はメニュー表示の定番となっていて実装することも多いと思います。モバイルファーストの時代になり限られたスペースを有効活用するために生まれたデザインです。本記事ではフォームの中でも「ハンバーガーメニュー」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 ハンバーガーメニューアイコンの多彩なデザイン・動作がよく分かるCSSデザイン例。シンプルな三本線のハンバーガーメニュー。クリック時の多彩なアニメーション。See the Pen CSS Menu Icons by Naoya (@

体を動かすこと全般が大好きなシステムデザイナー/ディレクターの今井です。 体の老化を感じて昨年の11月からジムに通いだしたのですが、一昨日ジムに行って「デッドリフト」というバーベルを床から持ち上げるトレーニングを行った時に、正しい姿勢で上げることができず腰を痛めてしまいました。 筋肉の衰えとバランスの悪さなどが怪我の原因だと思うのですが、こんなぐらいで簡単に怪我してしまうほどに老化して体力が衰えているということを痛感しました。 40歳を越えてから老化と体力の低下が著しいですが、まだまだ動ける体力をキープしたいので、諦めずトレーニングを続けたいと思います。もう少しトレーニングについていけるようになったらブログでも紹介したいと思いますので、お楽しみに！ って誰が興味あんねん！ 話は変わって、代表の谷川の記事でも紹介していますが、昨年に「Webグランプリ」というデザインアワードに応募し、企業グラ

デザイン通りにコーディングできるようになってきてプログラムにもそこそこ強くなったけど、Awwwardsなどに掲載されているWebサイトを見ているとどうやって作られているかわからない…そんな経験はありませんか？ 今回はモダンなブラウザで良く見るWebサイトを少し豊かにする知識と技術を簡単にまとめました。 これらの技術はデザインに沿ってコーディングをする以上のものになります。 実務では工数が掛かるためあまり行われず、知っていても使う機会は少ないと思いますが、それでも抑えておくと自身のWeb制作への理解が深まると思いますので、興味のある方はご一読下さい。 それではいきます。 はじめに制作にあたり、複数のプラグインやライブラリを使用しています。 Webサイトで使われるプラグイン(ライブラリ)の多くが海外製となっており、最近ではIEを非対応としたプラグインもあります。 特に最近の制作環境の主流である

背景画像をズームアップしながらフェードで切り替えるスライダーを実装する Swiper自体にはズームアップしながらフェードする機能がありません。そこでCSSを使ってズームアップ機能を追加します。 Swiperのファイルを読み込む 今回はCDNを使ってSwiperに必要なファイルを読み込みます。 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/> <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> <div class="swiper-container"> <div class="swiper-wrapper"> <!-- 背景画像１ --> <di

これまでのInstagram APIが廃止されてInstagram Graph APIに置き換わることで、対応に追われている方も多いのではないでしょうか。2020年初頭にはこれまでのInstagram APIが廃止されます。ホームページに旧インスタグラムAPIで投稿を埋め込んでいた方、特にビジネスでスマホ集客やインスタ集客をしていた方は新しいInstagram Graph APIへの切り替えは急務です。 そこで、新しいInstagram Graph APIを使ってウェブサイト上にインスタグラムの投稿を表示するまでの手順を、なるべくわかりやすい方法で紹介します。 可能な限り複雑な手順を省いていますので、ほぼ設定を追っていくだけでアクセストークンとインスタグラムビジネスアカウントIDまで取得できると思います。 後半ではサンプルコードやスタイルシートを用いてホームページに埋め込む方法や、デザイン

レスポンシブの確認をしたい時、最近ではスマホやタブレットなどのスクリーンサイズもいろいろなものがリリースされたので、大変になってきました。複数のスクリーンサイズを同時に確認できたらいいのにと思っていた人に朗報です。 先日リリースされたばかりのResponsiveViewerを紹介します。 ResponsiveViewerはChromeの機能拡張で、無料で利用できます。 ResponsiveViewer -GitHub ResponsiveViewerのインストール ResponsiveViewerの使い方 ResponsiveViewerのインストール ResponsiveViewerのインストールは簡単です。 他の機能拡張と同様にChromeウェブストアにアクセスし、「Chromeに追加」ボタンをクリックするだけです。 ResponsiveViewer -Chromeウェブストア ユーザ

<path opacity="0" d="M0 0h24v24H0z" /> <path d="M17.207 11.293l-7.5-7.5c-.39-.39-1.023-.39-1.414 0s-.39 1.023 0 1.414L15.086 12l-6.793 6.793c-.39.39-.39 1.023 0 1.414.195.195.45.293.707.293s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.023 0-1.414z" /> </svg>" data-icon-arrow-left="<svg width="28px" height="28px" viewbox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://ww

以前、Instagram API仕様変更・終了・廃止関連の情報まとめ。インスタの写真をWebサイトで直接表示していた方は要注意！という記事を書いたことがありました。 この記事、Arrownの歴代記事の中でもかなりのバズを生み出してくれたのですが、今回のブログ記事は、1年越しの続編の記事になります！（遅い！笑） Instagram API仕様変更・終了・廃止関連の情報まとめ。インスタの写真をWebサイトで直接表示していた方は要注意！ でご紹介させていただいたように、2018年4月、それまで提供されていたInstagram APIの一部機能が終了したことにより、Webサイトに埋め込んでいたInstagramの写真が突然表示されなくなってしまったということがありました。 昨年2018年の段階では、Instagramを運営するFaceBook社側からは、「Instagram APIの代替方法につい

前にInstagramの埋め込み方法としてInstaWidget（インスタウィジェット）を使った方法をアップしましたが、なんと、インスタウィジェットは使えなくなってしまいました…(ﾟoﾟ;; 記事を取得できませんでした。記事IDをご確認ください。 ですので、インスタウィジェットとは別でInstagramをワードプレスに埋め込む方法の、【SnapWidget（スナップウィジェット）】を使った埋め込み方法を分かりやすく図解入りで解説します。 と早速お伝えしていきたいのですが、わたしは、ブログとSNSをうまく連携させて、マネタイズ設計をしているプロになります。 ですので、今回の記事では、ブログとインスタの連携のおすすめ場所についてもしっかり解説していきますので、最後までお読みくださいね！！ 【SnapWidget（スナップウィジェット）】は、良いツールですが、結構仕様変更による不具合やアカウント