デザイン・コーディング
-
CSS 複数行テキストを上下左右中央揃え（センタリング）のまとめ
センタリングしたい要素のサイズが可変の場合に有効な上下左右中央揃えの実装方法をまとめます。 Flexboxを使う方法 display:flexなら上下左右の中央…
-
Photoshop 自由変形のやり方と変形できないときの対処法
Photoshopで自由に変形をしたい！オブジェクトを変形して奥行きをつけたい！時の変形方法。 この記事はPhotoshopでオブジェクトを変形して遠近感をつけ…
-
Photoshopだけじゃない、背景を伸ばしたりいい感じで生成してくれるツール
写真を使ってデザインするときに、もうちょっと横幅が広かったら・・・、右に寄せて余白を取りたい・・・なんていうことありませんか。Photoshopを使っていれば「…
-
Photoshop 簡単！吹き出しの作り方
制作物のデザインで「吹き出し」は結構使う頻度が高いのではないでしょうか。無料素材でも色々な吹き出しデザインの素材が手に入りますが、わざわざ素材を探さなくても結構…
-
クリックで開閉するドロップダウンメニューの作り方
サイトのデザインで表示スペースが限られている場合に役に立つのがドロップダウンメニューです。 PC上でのドロップダウンメニューはホバーした時（マウスを乗せた時）に…
-
Adobe Creative Cloud「同期済みファイル」終了で、PC間でファイルが同期されなくなる
2023年7月終わりから8月にAdobeから「Creative Cloudの「同期済みファイル」機能終了のお知らせ」という告知がありました。 ファイル共有に関す…
-
サイトの保存ができない、更新されないのはWAFが原因かも
WordPressやホームページでコンテンツの更新を行ったにもかかわらず、いくらブラウザの更新ボタンを押しても、キャッシュクリアをしても変更内容が反映されないこ…
-
WordPressテーマ カスタマイズしたCSSが反映されない時の対処法
WordPressのテーマをカスタマイズする際、カスタマイザーで色やカラーの変更ができる場合がありますが、CSSを直接編集することも多いですよね。 たまにブラウ…
-
画像からフォントを調べる。日本語フォントも検索できるツールあり
デザインに興味がある人必見！画像やサイトで使用されているフォントを特定する方法を紹介します。デベロッパーツールやオンラインツールを利用して、フォントの情報を簡単…
-
有名企業サイトで使われているCSS font-family一覧
bodyまたはhtmlに指定されているフォントファミリーを調べました。環境はmacOS Catalina、ブラウザはGoogle Chrome（バージョン: 1…
-
サイトで実際に表示されているフォント（レンダリングされたフォント）を調べる方法
ウェブサイトでフォントを指定するのはCSSのfont-familyプロパティです。font-familyプロパティには複数フォントを指定する場合が多いですが、実…
-
Photoshopでheic形式の画像を開くと落ちる時の対処法
HEIC（High Efficiency Image Format）は、画像を圧縮するためのファイルフォーマットです。 JPEGと比較して同じ画質の画像を半分以…
-
スライダーSwiperの使い方と動かない時に確認すること
Swiperはスライダーやカルーセルが簡単に実装できるJavaScriptライブラリです。jQuery不要で軽量・高機能なためWebサイトで広く使われていますね…
-
カルーセルスライダーslickの使い方、カスタマイズのまとめ
ちょっと古いですがカルーセルスライダーが簡単に実装できるSlickを久しぶりに触る機会がありました。 slickはレスポンシブ設定が可能でスワイプにも対応してい…
-
サイトで丸数字や★♥など特殊文字を文字化けしないで使う方法
FontAwesomeやGoogleマテリアルアイコンを使って、★や♥をアイコンとして表示することはできますが、わざわざアイコンフォントを使わなくても♥や♠を表…
-
Googleマテリアルシンボルのカスタマイズと表示されないときの対処法
アイコンフォントというとFontAwesomeが定番という感じがしますが、Google製のアイコンも使いやすくて最近は結構よく利用しています。 ここではGoog…
-
背景除去も簡単、無料で使えるAdobe Expressでできること
Adobe Expressはスキル不要でおしゃれなSNSサムネ、動画やチラシ、ロゴ作成などができる可能なブラウザ、モバイルで操作可能なデザインアプリです。 10…
-
FuturaをWindows,Webサイトで使う方法
有名ブランド・メーカーロゴにも採用されている人気フォント「Futura」（フーツラ）。 フォントウェイトの種類が多く、大文字・小文字でもそれぞれ魅力があって私も…
-
Adobe Fonts 反映されない、同期されないトラブルの対処法
IllustratorやPhotoshopでフォントを追加したいときにアクティベートができない、アクティベートしたのにフォント一覧に反映されない、フォントが同期…
-
フォームの年齢・生年月日セレクトボックスを動的に作るJavaScript,PHP
問い合わせや資料請求フォームで、生年月日や年齢はよくある入力項目です。 でもこれをHTMLで一つ一つ作るのって面倒ですよね。ここではJavaScriptとPHP…
-
電話番号,SMSリンクの設定とPCで無効にする方法
iPhone,Androidなどスマホで電話番号をタップした時に電話がかけられるようする設定とSMSを送る設定と、PCではリンクは無効にする方法のまとめです。 …
-
CSSでできるローディングアニメーションと作り方
ページの読み込み中を表すLoadingのアニメーション。 シンプルなCSSだけで表現できるので簡単に設置できるものいいところです。 CSSでできるローディングア…
-
Chromedriverのインストール覚え書き
PythonでWebブラウザを自動操作するときに必須のChromedriverをインストールするときの覚え書き https://pypi.org/project…
-
MacでのPython開発環境の覚え書き、エラー対処
Pythonでスクレイピングをやりたくて、開発環境を整えようとしたところいろいろ足踏みしたので対処法も含めての覚え書き 環境はMac OS10.15 Catal…
-
コピペできるCSSアニメーション・ホバーエフェクトのジェネレーターまとめ
vov.css https://vaibhav111tandon.github.io/vov.css/ <head></head>にcs…
-
Macで游ゴシックが消えたときに復活させる方法とダウンロード
MacではOSX 10.9 Mavericks からインストールされている「游ゴシック体（YuGothic）」「游明朝体（YuMincho）」。macOS&nb…
-
ウェブサイトで游ゴシック Yu Gothicを使う時に注意すること
游ゴシック体（ゆうゴシック）は、Mac（OSX Marverics以降）、Windows（8.1以降）でもインストールされているため、ウェブサイトでfont f…
-
www有り無し統一してhttps化する .htaccessのスマートな書き方
以前にも・www有無・常時SSL化の際にhttpからhttpsへのリダイレクトに関する記事を書いています。 しかしこの度、エックスサーバーにて新しいサブドメイン…
-
.ico形式の画像（ファビコン）を作成できるPhotoshopプラグイン
ファビコン画像を制作するときに拡張子.ico形式で画像を保存できるPhotoshop用プラグイン ICO (Windows Icon) Formathttp:/…
-
ファビコン（favicon）の作成方法と指定方法
今さらですがfaviconを作成する方法と、htmlにfaviconを指定する方法のまとめ。 ファビコン（favicon）の作成方法 私はfavicon自体を作…
