デザイン・コーディング
-
Mixed Content（混在コンテンツ）の見つけ方・解消方法 【原因はhttps,httpの混在】
Mixed Content（混在コンテンツ）はHTTPSサイトのデータの中にHTTPで送られるコンテンツが含まれている時に発生します。 Mixed Conten…
-
BrowsersyncのExternalURLを使って他のPC・スマホで動作確認するときのセキュリティソフトの設定[ ESET Cyber Security Pro]
ローカルでサイト検証を行う際、他のPCやからやスマホでの動作確認で思うようにサイトが表示されないトラブルの解決方法。 作業環境は以下のとおりです。 CSSやPH…
-
Photoshop シフト押しながら拡大縮小（比率固定）できない時の対処法
Photoshopの仕様変更で（2019から？）、従来のシフトを押しながら縦横比を保持して拡大縮小したり、トリミングしたりが効かなくなりました。 要は「Shif…
-
特定のタブへダイレクトにリンクする[jQuery,Bootstrap,Foundation]
タブレイアウトで、別のページから特定のタブへリンクしたい時に。 BootstrapやFoundationを導入して入れば実現するのは優しいですね。こういう時はC…
-
画像・テキストの横並び＋縦中央揃えするCSS
画像とテキストを横に並べてなおかつ画像に対して縦方向の真ん中にテキストを置きたい時はよくあります。 例えばサイトのヘッダーでロゴ画像とサイトタイトルを並べたい時…
-
CSSだけで画像をトリミングする object-fit,object-positon
ウェブページで使う画像を特定の位置やサイズでトリミングしたい時、CSSだけで画像をトリミングすると、画像のトリミング作業を効率化することができます。 CSSだけ…
-
Helvetica,Futura,DINなど有名フォントの代わりになる?おすすめGoogleフォント
前の記事: Illustrator、PhotoshopでGoogleフォントを使う方法をまとめました。本記事では、HelveticaやFutura、DINなど有…
-
Illustrator,PhotoshopでGoogleフォントを使う方法
Googleフォントは商用でも無料で利用できるオープンソースのフォントで利用されている方は多いのではないでしょうか。今現在2500以上のフォントがあります。 W…
-
FontAwesome アイコンを擬似要素で使う、丸で囲む、知ってると便利な使い方
Webサイトでアイコンを使うならFontAwesomeを使えば簡単です。しかし、いくつかのヒントやテクニックを知っておけば、FontAwesomeをさらに活用す…
-
Illustrator 書き出し 画質が悪い、画像が粗い時の対処法
Adobe Illustratorでpngやjpg画像を書き出しをした時に画質が悪くなったり、なぜかジャギジャギ（ガビガビ？）した粗い画像になったりしたことはあ…
-
Dreamweaver コーディングが捗るショートカットと機能
はCCにバージョンアップされてからかなり機能が充実していますね。標準でSass,LESSに対応したり、Emmetが使えるようになってます。 Sublime Te…
-
Dreamweaver 複数タグに共通する属性とその値の検索置換
Adobe の検索置換は強力です。ファイル内のテキスト検索置換はもちろん、複数ファイルの横断検索やコード内の検索置換も便利です。 私はコード内の検索置換を使うこ…
-
Illustratorのスターツールで星を作る時に知っていると便利なこと
のスターツールで星を描く時に知っていると便利な機能のまとめです。 スターツールの使い方- スターダイアログから数字を設定 ツールバーの長方形ツールを長押しすると…
-
カラーミーショップ 独自タグ カスタマイズ 【おすすめ商品】
カラーミーショップでネットショップを構築することになり、今まで何度か触っているカラーミーショップ独自のタグをおさらい中 ※カラーミーショップはSmarty（PH…
-
カラーミーショップ 新規会員登録のリンクが表示されないときは
カラーミーショップのテンプレートをカスタマイズ中。カラーミーフレームワークのテンプレートでは、ヘッダー部分にログインやアカウントページへのナビゲーションがありま…
-
Illustrator埋め込みとリンク、埋め込み画像の抽出など配置のまとめ
Illustratorでのデザイン制作では、イラストやアイコン、マップなどのベクター（ベクトル）オブジェクト以外にも画像などのラスターデータも自由に配置できます…
-
Photoshop リンク配置を活用して作業効率を上げる
この記事ではPhotoshopで画像などの外部ファイルをリンクとして配置する機能についてまとめています。 Photoshopの外部ファイルをリンクとして配置する…
-
Dreamweaver,Illustrator レスポンシブなイメージマップを作成する方法
ウェブページで画像やイラストの一部をクリックすると新しいページが開くという動作はイメージマップで実現できます。 クリッカブルマップとも言われます。 最近はあまり…
-
Photoshopで書き出し（Web用に保存）時に縮小されてしまう時の対処法
Photoshopの書き出し機能、Web用に保存で画像を書き出すと、100%で書き出されず縮小してしまうという問題です。 これはPhotoshopだけでなくIl…
-
Photoshop 画像リサイズを一括処理（縦横判別して別名で保存&任意の場所でトリミング）
Photoshopで画像を一括で処理したい時に便利なのはバッチ処理です。 この記事ではPhotoshopのアクションを活用したバッチ処理を使って、縦横比が違う複…
-
Dreamweaverでリアルタイムプレビューできない場合の解決方法
を使っている時にF12でブラウザプレビューして確認するのが昔からの操作方法だったのですが、CCから？リアルタイムプレビューという機能になっています。 Brows…
-
Sublime Text 3：Compassの導入とDEPRECATION WARNINGの解消
Sublime Text3でCompassを使えるようにビルド設定をした時の覚書とDEPRECATION WARNINGが出たのでその対処方法をまとめています。…
-
A4に収まる印刷用CSSの作り方と印刷CSSのデバッグ方法
ウェブページを印刷しようと印刷プレビューを見たら、あれ？レイアウトが崩れてる！？という経験ありませんか？ディスプレイモニターやスマホでは綺麗に表示されているのに…
-
:nth-of-typeの活用方法、:nth-childとの違い
:nth-of-typeは兄弟要素の中から同じ種類の要素を位置に基づいて選択することができるCSSの擬似クラスです。 この記事:nth-of-typeの使い方と…
-
Photoshop・Illustratorでスライスの一括削除
スライスはIllustrator、Photoshopの両方にある機能で、スライスを使うと1枚のデザインをスライス（分割）して複数の画像ファイルに書き出すことがで…
-
Windows10にPhotoshopCS2をインストールしたら「動作が停止しました」エラー
Windows10にPhotoshopCS2,illustrator CS2をインストールした時にでたエラーの対処法です。 illustratorCS2は問題な…
-
PhotoShopでカンバスカラーを透明にする
PhotoShop CC 2015からなのかわかりませんが、ファイル→新規からアートボードを選択すると、カンバスカラー（ドキュメントの背景）が白い状態です。 本…
-
Illustrator,Photoshop 簡単に縦横中央にガイドを引く
アートボードやドキュメントでいちいち計算せずに縦横中央にガイドを引きたいですよね。 、で、簡単に縦横中央にガイドを引く方法の覚え書きです。 illustrato…
-
lllustrator オブジェクト選択時バウンディングボックスを表示する
Illustratorでテキストでも図でもいいのですが、オブジェクトを選択すると四隅がドラッグできるようなやつ（この時点ではバウンディングボックスという名前がわ…
-
Google Maps API warning: NoApiKeys の対処法
Google Maps JavaScript API v3からAPIキーが不要というのを聞いていたので特に取得せずに使っていたら、コンソールでこんなエラーが G…