CSSのobject-fitプロパティでできること。 object-fitでのトリミングが便利。 imgやvideoのサイズをCSSで指定したい時、object-fitプロパティが使える。 要素のボックス内で画像や動画の配置指定ができるので、サイト内に並べる際に、見た目や動きの統一化がしやすい。 object-fitの種類。 object-fit ...
Memos
CSSとJSのマーカー。コピペで使えるグラデーション・アニメーション。
CSS & JSによるマーカー。 サイトにちょっとしたアクセントが欲しいとき、使い回しが効くマーカーがあると便利だ。 汎用性があるのでスニペットとして使える。 グラデーション付きの、動きのあるマーカー。 ざっくりと、3ステップでOK。 CSSで、マーカーの見た目と動きを作成。(class名「highlight」) JavaScriptで、スクロー...
backgroundの複数指定が効かない時の確認事項。(CSSアニメーションとの組み合わせ。)
CSSで背景画像を複数指定したい。 backgroundプロパティで可能なはずだが... CSS3以降からは背景画像の複数指定が可能となっている。ところが、時々うまく表示されないことがある。 例えば、下記のような書き方では、Chromeでは普通に2つ表示されるが、Safariでは1つの画像しか表示されない。 デザイン的にシンメトリーにしたいのに、片方が表示さ...
Webデザインを独学で学ぶのなら。Webデザインで行き詰まったのなら。【ちょっと客観的に】
そもそも独学で可能なのか? 年齢による見極めが重要。 Webデザインを独学で学ぶことは可能だ。ただし、自分の年齢は考慮すべきである。 大前提として、ここの見極めをしなければならない。家族を養う立ち位置にいる人ならば、最重要の確認事項だ。 一部で溢れているような甘い情報に振り回されては危険なのだ。 中途採用のWebデザイナー、コーダーたち...
マズローの欲求5段階説と、実社会とSNSと、Webデザイナーの報酬と。
マズローの欲求5段階説と、「志を高く持とう」や「意識高い系」。 実社会でもSNSでも制作の現場でも、「志を高く持とう」とか「意識高い系」とか、重いのか軽いのかどっちかよくわからない用途で言葉が使われていたりする。 こうして活字で見比べると、前者の意味は重くも清くも、また後者はただの揶揄だったりもする。 栄養補給、体力回復には、お金と家、部屋が必要。 しっかり飯を食え...
肖像権と著作権。ネットにあるのはタダじゃないの?
ざっくりと言うなら、肖像権とは写真に写っている人の権利。 例えば写真に写った人の場合。 何気なく撮った写真の背景などに顔が特定できる第三者が映り込んでいたという場合がある。 その写真をネット上に公開する際は、その第三者の方が一般人でも許可を得なければならない。 また、著名人などの写真がネット上にあったからといって、その写真を無断で使用することもできな...
iPhoneでWebMを再生できるように。(2024年暫定)
WebMとWebP。 WebPはすでに対応済み。 名前が似ているように、Googleが開発したファイル形式。 WebMは、動画のファイル形式。拡張子は「.webp」。 WebPは、画像のファイル形式。拡張子は「.webm」。 WebMはまだ対応途中。 AppleとGoogleと。 スマホは事実上、AppleのiOSかGoogle...
CSS filterで色変更。色相・彩度・明度? filterプロパティでできること。
CSS filterプロパティでできること。 CSSのfilterの種類。 filterプロパティの関数は代表的なもので10種類ほど。かつてはPhotoshopなどで行っていたWebサイト用の画像加工が、結構CSSだけでカバーできるようになった。 色の三属性やぼかし、シャドウなども。 filterでは色の三属性である色相・彩度・明度の調整から、ぼかし、コントラスト、...
WordPressで動画が再生されない!ときの対処。
WordPressで動画を埋め込みたい。 WordPressショートコードの[ video ]〜[ /video ]。 WordPressの投稿で、mp4などの動画を埋め込みたい場合がある。上の猫の動画のように。 ところが、WordPress投稿画面の「メディアを追加」から動画を追加しようとすると[ video ]〜[ /video ]のショートコードが記...
iPhoneの解像度一覧(iPhone8〜13まで)と、CSSブレイクポイントの目安は?
iPhoneの画面解像度と「拡大表示」モード。 アナリティクスで画面の解像度をチェックしていると、ちらほらと320x693や320x568という数字があることに気がつく。横幅320pxというと初代iPhoneの解像度だ。不思議に思い確認したところ、どうやらiPhone8以降の「拡大表示」モードのようだ。 ブレイクポイントはどうするか? 「拡大表示」の機能はiPho...
スライダーがうまく動かない時の対応。(jQueryはbodyの閉じタグの前じゃない。)
スライダーのカスタムを頑張れば頑張るほど、動きがカクカクする。 jQueryの読み込みの場所。 bodyの閉じタグ前じゃなくてもいい。 スライダーをカスタマイズして作り込んでいると、動きが不自然となり、スムーズに切り替わらないことがある。 そんなときは、jQueryの読み込み位置を、head内に入れて試してみると良いかもしれない。 jQuery本体はhead内...
Webデザインは職業訓練校(ハロートレーニング)かスクールか。迷った場合はどっち。
職業訓練校の場合。 ここ数年度々聞かれることがあり、ネットや上でもリアルの場でも不確かな情報が散見しているので(もちろん良い情報もあるが。)、元職業訓練校講師として、ちょっとまとめてみました。 偉そうにする意図はありませんが、もし参考になれば。 職業訓練校のメリット。 ハローワーク経由となるので、求職者支援として厚生労働省からの公的な支援がある。毎月10...
WordPressの投稿とカスタム投稿を振り分けたい時はこれで解決。(条件分岐できない時の対処方法。)
投稿とカスタム投稿タイプ。 is archiveの仕様。 WordPressでテーマを作っている時、デザインを分けるためなどで、デフォルトの「投稿」と「カスタム投稿タイプ」を条件分岐したい時がある。 (例えばアーカイブページやシングルページなどのヘッダー画像や、見出し部分、文章など。) ところが、投稿、カスカム投稿タイプに共通する「is_archive()」...
辿ったリンクは期限が切れています!? WordPressテーマのアップロードエラー対処。
辿ったリンクは期限が切れています? テーマのアップロード。 WordPress管理画面からテーマをアップロードしようとすると、「辿ったリンクは期限が切れています。もう一度お試しください。」のエラーが出ることがある。 単にこのメッセージからでは、原因がなかなか想定しにくい。 WordPressサイトだったので、まずWordPressの原因を疑ってみたが、そうではなく、...
Macの寿命を伸ばすためにやってみていることと、過去の検証。
Macの寿命は4年? ネット上で調べてみると、Macの寿命(使用年数)は4年という情報が出てくる。公式サイトに記載されている、という理由からだ。 Appleサイトの質問回答ページに、「Appleは、Apple製品の温室効果ガスのライフサイクル評価をどのように行っていますか。」という項目で記載がある。 参考:環境 - よくある質問 - Apple(日本) ちょっと長く...
PHPの配列の括弧の違いは?WordPressでよく見るarray()と[]。
PHPの配列 PHPのバージョンアップによる配列の短縮構文で、array()を[]で置き換えることが出来るようになっている。array()でも[]でも、配送変数argsのキーにダブルアロー演算子(=>)で値を入れられるのだ。 PHP5.4から配列の短縮構文は使用できるようになっているが、気付けばすでに5年以上が経っている。しかしネット上には様々なコードがあり、自分自身も含...
リダイレクトがうまくいかない時のプラグイン、「Redirection」の設定方法。
.htaccessファイルなどでは上手くいかなかった。 普段はサイトの移転などでURL変更があった場合、.htaccessで301リダイレクトの設定をしているが、今回のケースでは上手くいかなかった。 ネット上で情報を探していたところ、functions.phpに記述する方法もあったが、これも上手くいかなかった。 WordPressプラグイン、「Redirection」で解決。...
WordPressに最終更新日を表示させる方法。(プラグイン不要。)
テンプレートタグだけでOK。 WordPressで投稿した内容を、後になって追記したり修正したりする場合がある。そういった場合は「最終更新日」を表記させた方が、訪問する方へ対して親切であり、SEO的にも何かしら効果があると思われる。 プラグインが必要かと思っていて手を出していなかったが、普通にWordPressのテンプレートタグで用意されていて、簡単だった。 使用するテンプレ...
widthの読み方は、ウィドスやウィドゥスよりもウィズが良い理由。
widthのカタカナ読みはウィズ。 ※敬称略。 widthの読み方。 スペルでも発音記号でも。 widthはスペルや発音記号を見てもウィズと読めて、英語圏の外国人と話すときもウィズというカタカナ発音で通じる。 HTMLやCSSでよく使うwidth。 width="" / width: ""; Webデザインで幅の指定に使う「width」は、「ウィド...
VSCodeでファイルをダブルクリックで開きたい時。
ファイルはダブルクリックで開きたい。 VSCodeでファイルを開く時は、左側のサイドメニューの「エクスプローラー」から開くことができるが、デフォルトでは「シングルクリック」になっている。 慣れると便利なのかもしれないが、通常、ファイルを開くときは「ダブルクリック」で開く方が一般的ではないだろうか。 一般的にはダブルクリックで開く方が多い。 MacでもWind...