サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
blanche-toile.com
Gmailを利用していてメールの自動転送が必要になる時、それも特定のメールを複数のアドレスに転送したい場合があります。 何かのWebサービスを利用していて、通知メールを複数のアドレスで確認したい時などはとても便利です。 メールは受信したら、後から手動で転送することはできます。 でも、その手動も何度も作業が必要であれば手間です。そうした場合は、自動転送の設定をしておくと手間もかからず楽です。特定のメールをとなるとなおさら便利です。 ここでは、Gmailで特定のメールを複数のアドレスに自動転送する方法をご紹介します。 特定のメールを自動転送する Gmailの設定に転送設定がありますので、見ていきましょう。 画面右上の歯車アイコンから、「設定」を選択します。
Webサイトやブログで画像や動画を使う際、コンテンツの中で綺麗に見せていくには、素材の品質もそうですがアスペクト比も重要な要素になります。 Web制作では画像や動画コンテンツを多くのデバイスに対応していくため、特に動画ですが、アスペクト比の調整に慣れていない方は、意外と大変だったりします。 こうした少し面倒な調整手軽に行えるよう、CSSの新機能としてアスペクト比を設定するaspect-ratioプロパティが追加されました。 気になる対応ブラウザですが、 主要ブラウザでは、最新バージョンですべてサポートされています。 (IEは未対応) Can I use (aspect-ratio) https://caniuse.com/?search=aspect-ratio ここでは、サンプルをもとにaspect-ratioプロパティの使い方をご紹介します。 WebブラウザのGoogle Chrome
WebデザインでWebフォントを利用してデザインを構築していくことがよくあります。 そこで使えるのがCSSの@font-face規則です。 @font-face規則はWebフォントを利用するために用意された規則です。Webフォントで有名なのがGoogle Fontsではないでしょうか。 他にもたくさん提供されているフォントや自作のフォントなどのデータを、CSSで読み込んで利用することができます。 Webサイトのデザインでこだわりのあるフォントを利用すると、PhotoshopやIllustrator等で作成したデザインカンプから、Webで表現できない場合があるので、こだわりのあるフォントの部分だけ画像で書き出すしかありません。 もちろん画像として扱っていくのは問題ないのですが、レスポンシブWebデザインに対応しようとすると、画像よりもできるだけHTMLのマークアップとCSSで表現したいところ
Webサイトの各ページのURLの末尾にある拡張子。表示があったり表示がないWebページがあったり気になったことはあるでしょう。 Webに詳しい方は、どの言語でどのように作られているかがだいたい想像できますが、この拡張子は特に表示させる必要がないのであれば、表示させなくてもいいでしょう。 拡張子の表示をなくすことで、WebページのURLを短くスッキリさせることができます。 また、Webページがどのように作られたのかが閲覧者にわかってしまうので、気になる方は非表示にすると良いでしょう。 他、拡張子を判別して処理をするようなプログラムがないのであれば。。。 WordPressなどのCMSでは、すでに拡張子が表示されないように設定がされていることが多いですが、別でWeb制作を行う場合は設定が必要となります。 ランディングページなどで特に頻繁に更新するコンテンツがなければ、WordPressで構築す
Web制作でSassを導入してCSSを生成していく中、ディレクトリ構造(フォルダ・ファイル構成)をしっかり作っておくと、Sass(scss)ファイルの管理がしやすくなります。 Sassを複数ファイルとして分割管理することで、編集する箇所へのアクセスがスムーズに行えるので、プロジェクトの大きさによっては、作業効率を上げることもできます。 ここでは、Sassファイルを分割管理する方法について見ていきます。 Sassの記法はいくつかありますが、公式も推奨しているDart Sass(ダートサス)の記法で、記述方法も含めてご紹介していきます。 今後は、Dart Sassベースで新機能が追加されていきますので、覚えておくと良いでしょう。 また後半には、Dart Sassの自動コンパイルについても少し触れていきます。 Sassファイルの分割管理 Sass(scss)ファイルの分割管理を、サンプルを交
CSSコーディングの作業効率を上げることができるSassは、コンパイルするのにGUIツールやコマンド操作といろんな方法があります。 Visual Studio Codeでは手軽にターミナルやコマンドプロンプトが利用できて、コマンド操作を慣れている方であればコンパイルしてCSSファイルを生成する作業もそれほど苦ではないですが、それでもその少しの手間も省きたいところです。 そこで便利なのが「Live Sass Compiler」という拡張機能です。 Live Sass Compilerは、Sassファイルを監視して自動でコンパイルしてくれます。 コマンド操作が苦手という方にはとても便利な拡張機能です。 Live Sass Compilerのインストール 拡張機能のメニューから、「Live Sass Compiler」を検索して選択し、「Install」ボタンをクリックします。 インストールが完
Web開発しているとデバッグは欠かせないのですが、スマホの確認、デバッグとなるとGoogle ChromeやFire Foxのデベロッパーツールがある。 ある日、Google Chromeのデベロッパーツールは問題ないのに実機ではうまくいっていないことがあった。もしやと思いiOS Simulatorを立ち上げて確認するとうまくいっていない。 やはりスマートフォン表示はスマートフォン専用のシミュレーターで確認しないと、Webブラウザでは正確に表示・デバッグは出来ないですよね。 iOS Simulatorはアプリ開発のデバッグしか出来ないの?と思ってしまいますが、Webサイトも表示できますし、Safariブラウザを使うことでデバッグも可能です。 iOS Simulatorとは iOS Simulatorとは、Xcodeに付属されていてアプリケーションのテストができるもの。MacはApp Sto
高機能で人気のMicrosoft製のコードエディタのVisual Studio Code。無料で提供されていますので、多くのデベロッパーが利用していることでしょう。 デフォルトの機能のみで利用してもいいですし、かゆい所に手が届く拡張機能も使って、作業効率を高めてWeb開発を進めることもできます。 ここでご紹介するのは、Visual Studio Codeエディタの拡張機能「Microsoft Edge Tools for VS Code」です。 Edgeブラウザの開発ツールを、エディタに統合して開発が行えるとても便利な拡張機能です。 WebサイトやWebアプリケーションの開発の際には、コードエディタとWebブラウザを行き来しながら作業する手間が省けるので、とてもスムーズに開発ができるでしょう。 また、XAMPPやMAMPなどのローカル開発環境でのWeb開発も、デバッグしながら作業を行えます
WordPressなどのwebサイトやブログでGmailやGoogle Workspaceのメールを利用していくには、SMTPの設定でGoogleアカウントのアプリパスワード(アプリID)を設定していきます。 SMTPとはSimple Mail Transfer Protocol(シンプル・メール・トランスファー・プロトコル)の略で、メールを送信する仕組みでありWebサイトからメールサーバに送るために設定が必要になります。 多く利用されているWordPressでもコンタクトフォームからお問い合わせを受けると思いますが、SMTPを設定していないとメールサーバ側のセキュリティの関係でメールのやり取りができないといった状態になることがあります。 現在運用しているwebサイトでSMTPをしっかり設定している方は多いと思いますが、Gmailや独自ドメインでGoogleのサーバが使えるビジネス用のGo
Webサイトで利用する画像フォーマットとして拡大・縮小しても劣化しなく軽量なデータなので、SVGはこれからのWebサイトで多く利用されていくでしょう。そんな中、SVGの利用にあたって少し手こずるのが様々なデバイスで利用するためのレスポンシブ対応です。 SVGをレスポンシブ対応させるにはviewBox属性を利用します。 viewBox属性はレスポンシブ対応する際に利用するviewport(ビューポート)と同じ働きをします。 viewportは画面サイズの表示領域での指定をしていきますがviewBox相対的な表示領域、要するにSVGの領域でコンテンツを描画します。 SVGをwidthやheightで幅と高さを指定してCSSで親要素に%などで幅の可変に対応しようとしても、描画される領域はwidthやheightで指定した数値になりますので幅と高さが足りていないと表示が途切れたりします。これはSV
Google Classroomとは、グーグル社の提供している教育現場での教員と学生間のやり取りが簡単にでき、課題や質問等のやり取り、データの受け渡しなどが共有するサービスです。 このサービスでは「クラス」というグループを作成しその中でやり取りを行っていきます。 資料の提示や課題の出題といったこともでき、さらに課題の提出状況も確認できます。 教師は成績の集計などもできますが、そこまでGoogle Classroomで管理していくかは自由です。 今までMicrosoft Excelなどで管理していた人はそのままでもいいですし、試しに利用してみるのもいいです。 Google Classroomの利用はGoogleアカウントを持っていれば誰でも利用できます。 個人用の無料のGoogleアカウントからGoogleのサーバを独自ドメインで利用できる企業用のGoogle Workspaceユーザーも
Googleの検索エンジンでWebページの表示速度が速いと、ユーザーにストレスを与えないので検索順位が上がるなどいろいろ言われている中で、表示速度を速くする方法の1つとしてHTTPリクエストを減らすという方法があります。 その1つとして画像のHTTPリクエストを減らす方法をご紹介します。 画像はどのWebサイトでも使用するので絶対にHTTPリクエストが発生するわけですが、今回は画像をBase64にエンコード(変換)してHTMLに埋め込んでHTTPリクエストを減らし、Webサイトの表示速度を速くする方法になります。 この手法は「インラインイメージ」と言われるものです。 画像をBase64にエンコード(変換)することで、文字列(テキストデータ)としてHTMLに埋め込むことができるので、画像ファイルのアップロードやサーバとのやり取りがなくなり、その分表示速度が速くなります。 注意しておきたいのが
Web開発をしているとMacやWindows、またChromeやFirefox、Safari、Microsoft Edge、そしてIEのあらゆるバージョンで動作確認・表示確認をすることがあります。 私はMacとWindowsの二刀流なのであまり苦労することはないですが、どちらかのコンピュータだけという方は大変だと思います。 またIEもバージョンで癖がありますのでね。 そういった場面で使えそうなのがブラウザが開発者ように用意してくれたツールです。 今回ご紹介する方法は、100%正確に確認できるものではないですがある程度の動作確認・表示確認ができるものです。 Google ChromeやFirefoxはどちらのOSでも簡単にインストールできるので別に問題ありません。 問題はMacユーザーがIEの確認をする時、WindowsユーザーがSafariの確認をする時でしょうか。 それではWebブラウザ
Microsoft製の無料で人気のテキストエディタ「Visual Studio Code」を使うにあたって、最初に設定しておきたい設定項目があります。 それを少しご紹介します。 自分に合った使いやすいテキストエディタにしましょう。 WindowsもMacも設定方法はほとんど変わりありません。 ここではmacOSで説明していきます。 上部メニューの「code」から「preferences」>「Settings」と進みます。 Windowsだと「File」>「preferences」>「Settings」になります。 まずはじめにVisual Studio Codeを使うと気になるのがフォントサイズや全角や半角のスペースの見分けがしにくいという点です。 設定をいろいろとみていきましょう。 フォントサイズの設定 Settingsには「User Settings」と「Workspace Setti
WordPressでWebサイトやブログを構築しているとサイドバーウィジェットをカスタマイズすることはよくあります。 そんな中で、サイトのデザインによってはサイドバーのカラムを増やしていくつかのサイドバーをいろんな場所に表示させるなどコントロールしたいこともあります。 1ページでいくつかのサイドバーウィジェットの表示位置をコントロールするのか、それともページ別で違うサイドバーウィジェットを表示させるのか。 ここではサイドバーを増やして複数のウィジェットをコントロールする方法をご紹介します。 管理画面にサイドバーカラムを増やして表示させるページのファイルに出力させるコードを記述する流れです。 管理画面にサイドバーを追加 まずは管理画面にサイドバーカラムを追加して増やしていきます。 functions.phpに以下のコードを記述します。 functions.php if ( function_
Dropbox(ドロップボックス)に保存してある画像をWebサイト(ホームページ)に表示させたいと思っている方へ、Dropboxに保存してある画像や動画をWebサイトに埋め込む方法をご紹介します。 Webサイトの中で画像を頻繁に変更する場合がある時、FTPで毎回アップロードするかもしくはWordPressなどのCMSで構築してあって毎回ログインして情報更新という手間のかかる作業はなるべくしたくない時にはDropboxに上げてある画像を使うほうが意外と便利だったりします。 例えば飲食店のサイトとして、 メニュー表にはこだわりがあり、紙に手書きで書いて画像でオシャレに載せたいってことがあれば、メニュー表の画像をDropboxに保存しておいて、それをWebサイトに表示さるという方法をとることができます。 それでは埋め込む方法をご説明します。 Dropboxの画像を埋め込む まずは、Webブラウザ
CSSハックとは各ブラウザごとでCSSの実装状況やバグの影響で表示が崩れてしまう時に、特定のブラウザのみにCSSの指定ができるテクニックです。 Chrome、Firefox、Safari、IEの4つブラウザが主に使われていて、最近ではWindows10の登場により新たにEdge(エッジ)というブラウザが生まれました。 タブレット・スマホのブラウザのことも考えると沢山のブラウザやOSに対応したCSSを書くことになります。 webサイトを制作する際に、各ブラウザで実装状況の違いやバグがあるので見た目が崩れないようにいろいろとCSSで試行錯誤することはよくあります。 それでもあのブラウザだけがどうにもならないって時が出てくることもあるでしょう。 Web制作では、PCのいろんなブラウザもそうですしタブレット、スマートフォンでのiPhone、Androidのブラウザなど、どのような状況でもうまく表示
WordPressでメディアに写真や動画、PDF、音声データ等、いろんなデータをアップロードすることがありますが、WordPress側またはサーバ側でアップロードサイズに上限が設定されており、大きいサイズのデータがアップロードできないといったことが起きることがあります。なかでも動画データは特にファイルサイズが大きくなります。 技術的な知識がある方は「FFFTP」「WinSCP」「FileZilla」といったFTPクライアントソフトでアップロードしてHTMLのコードを書くなり別の方法で対応するかと思いますが、一般の方はちょっと厳しいかもしれません。 アップロードサイズの上限はサーバによってデフォルトの設定が違います。 さくらサーバですと画像をアップロードする際に、最大アップロードサイズが2MBとなっています。 ただ、設定を変更することで最大アップロードサイズに上限を大きくすることができます。
jQueryを使う際にCDNを利用することでWebサイトの表示速度が少し上がりますので、自分の公開サーバからではなくCDNサーバからjQueryを読み込んでいるWebサイトは多いんではないでしょうか。 CDNとはコンテンツデリバリネットワーク(Contents Delivery Network)の略です。 Webコンテンツをインターネット経由で配信するために最適化されたネットワークで、世界中のデータセンターにキャッシュを保持していて、エンドユーザーがアクセスした際に最も近いキャッシュサーバにアクセスするため早くファイルの取得にすることができます。 なのでWebサイトにアクセスした時にファイルの取得が早くだけ表示速度も速くなります。 そんな便利なCDNですが、CDNサーバで障害があった時にファイルが取得できないといったことが起こる可能性もあります。 そのような場合にも備えておかなくてはいけま
世の中のグローバル化に伴い、Webサイト(ホームページ)も多言語対応しようと考えている人が増えているんではないでしょうか。 グローバル化といって翻訳させてページの切り替えをすればいいんでしょっていう考えの方は結構います。 またグローバル化というわりに英語圏だけ対応しているところもありますが、それはグローバル化ではなくただの英語圏化なような気がします。世界では中国語を話す人口が一番多いんですよね。 国が違えば文化も違うし論理観も違う、捉え方や感じ方も違う。そう簡単ではない。その国によっていろんな言い回しや伝え方があるので、単純に翻訳だけなんてものはすごく甘いです。 相当自社の商品、サービスに魅力がないと興味を持ってもらうことは難しいですね。 世界に対応するということはそういうことです。 言語によってデザインを若干変えたい時にPHPで読み込みを制御したりCSSで変更を加えたりいろいろと方法はあ
Googleアナリティクスのアクセスデータは、Webサイトがどのように観られているか、ユーザーがどのページに興味がありどのような行動をとっているのかを確認でき、Webサイトの改善策を立てるために必要となる大事なデータの1つです。 Webサイトを管理していてよくページにアクセスする自分自身や無意味に足跡を残したり大量にトラフィックを発生させるリファラスパムなど、不要なアクセスがあることによって正確なデータを取ることができません。 ここでは、より正確にアクセスデータを取るためにできるGoogleアナリティクスの不要なアクセスを除外する設定方法をご紹介します。 これまで標準のユニバーサル アナリティクスは2023年7月1日をもって廃止され、データの処理も停止します。 今後利用していくことになるGoogle アナリティクス 4での設定方法をご紹介していきます。 まず除外の設定は、左メニューの一番下
Webブラウザにある戻るボタンとは別に、Webサイトのページ内に1つ前のページに戻るためのボタンを設置したい時があります。UIデザインを意識した時に必要なページが出てくることもあるでしょう。 そんなWebサイトのページ内に戻るボタンの機能を付けたい人のために、JavaScriptやPHPで1つ前のページに戻るボタンを設置する方法をご紹介します。 JavaScriptで戻るボタンを設置 まずはJavaScriptでの設置方法です。 こちらはシンプルでわかりやすいです。 historyオブジェクトのbackメソッドを使用します。 inputタグで汎用ボタンでクリック時の処理「onclick」を使用する方法とaタグのhref属性に設定する2パターンあります。 HTML //onclick処理 <input value="前に戻る" onclick="history.back();" type="
p5.jsはProcessingをJavaScriptで書けるようにできるライブラリ。ProcessingをjavaScriptに移植したものなので、ビジュアルコーディングツールを使わなくてもwebブラウザ上でJavaScriptでクリエイティブコーディングができるようになります。 Processingを学んだあとにweb上でもクリエイティブコーディングでアニメーションやCG(コンピュータグラフィックス)などを表現したい時に使うと良いでしょう。 以前「Processing.jsでProcessingをwebブラウザ上で動かす」で紹介したprocessing.jsもありますが、processing.jsはJavaベースのProcessingのコードをそのまま動かすことができるように対して、p5.jsはJavasciriptに近づけた文法でコードを書くといった違いがあります。 それでは、今回ご
HTMLのaudio要素は、HTML5から新しい追加された要素で音声コンテンツを埋め込むことができます。音声メディアを再生できるだけあって、Webサイト内でBGMを流す時などで使うことがあるのではないでしょうか。 Webサイト内で音楽を流すことは特に問題ではないですが、Webページにアクセスした時にいきなり音楽が流れるとユーザーとしては都合が良くないことがあります。例えば電車の中だったり図書館だったり、突然音楽が流れたり音が出たら困る時があります。 そんな時にON/OFFのスイッチで切り替えることができらたいいですよね。BGMを流したい時にユーザーにスイッチをONにしてもらえば。 audio要素は一応、スマートフォンからのアクセス時には自動的にミュートになるように制御されているみたいです。 ということで、HTMLのaudio要素の音楽をON/OFFスイッチで切り替える方法をご紹介します。
webページの画像を誰かに共有したり、仕事の資料などでスクリーンショットが必要になることはあるでしょう。今まではスクリーンショットを撮る場合、とくにwebページ全体の時はGoogle ChromeはもちろんFirefoxやSafariでも、拡張機能を使う方法をとっていたかと思います。 しかし、Google Chromeのバージョン59の正式版がリリースされ、拡張機能を入れなくてもGoogle Chromeでwebページ全体のスクリーンショットを撮ることができるようになりました。 Google Chromeのデベロッパーツールを使うやり方なのですが、これを使うことによってPCはもちろんタブレット、スマホなど、いろんなデバイスの表示でwebページ全体のスクリーンショットを撮ることができるのです。 これは素晴らしい。 ということで、Google Chromeでのwebページ全体のスクリーンショッ
撮影した動画を何かの素材として使う時や誰かに共有したい時に容量が大きいと困ることは多々あります。そんな時は動画ファイルのサイズ(容量)を小さくすることをしなければいけません。 動画の容量を小さくと言っても何かソフトを使うんでしょって思ってしまいますが、Macはそんなの必要ありません。もちろん、Macにデフォルトで入っているiMovieを使ってもいいですが、アプリケーションを立ち上げたりいろいろやる工程が少し多いのでiMovieも使いません。 スマートフォンで撮った動画は、20秒〜30秒ほどの動画でしたら大体40〜50MBの容量になるでしょうか。 例えば、スマートフォンで撮った動画をLINEで家族や友人に送りたい時があれば、5分ほどの動画ファイルまでは送れるみたいです。 でもWiFi環境でないと、かなりの時間とデータ通信料がかかるから気をつけないといけないよね。 こんな感じでたまに動画ファイ
このページを最初にブックマークしてみませんか?
『blanche-toile.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く