WEB Tips
-
A4に収まる印刷用CSSの作り方と印刷CSSのデバッグ方法
ウェブページを印刷しようと印刷プレビューを見たら、あれ？レイアウトが崩れてる！？という経験ありませんか？ディスプレイモニターやスマホでは綺麗に表示されているのに…
-
MAMPの使い方とカスタマイズ・MacでPHP,MySQL開発環境
MAMPとは、Web開発に必要なWebサーバー（Apache,Nginx）、PHP、MySQLがパッケージになっているアプリケーションです。 MAMPを利用する…
-
:nth-of-typeの活用方法、:nth-childとの違い
:nth-of-typeは兄弟要素の中から同じ種類の要素を位置に基づいて選択することができるCSSの擬似クラスです。 この記事:nth-of-typeの使い方と…
-
PDFを開くときの倍率を指定する方法。Adobe Acrobat
PDFを作成し、開いてみると超拡大した状態で開いちゃうことありますね。複数PDFを開く度に縮小するのは手間がかかって効率が悪いなと感じている場合は、PDFファイ…
-
Photoshop・Illustratorでスライスの一括削除
スライスはIllustrator、Photoshopの両方にある機能で、スライスを使うと1枚のデザインをスライス（分割）して複数の画像ファイルに書き出すことがで…
-
Webページを画面どおりそのまま印刷する方法
ミーティングや打ち合わせの資料用にWebページを印刷して！とか言われることってないですか？いまだにあるのです。ノートPCやタブレットを持ち歩いて見せればいいじゃ…
-
Open Office で2文字目も大文字に
普段、マックで作業している時に、ちょっとExcelが使いたいなんてことがあったときにはOpenOfficeを使っています。作業するには問題なレベルなのですが、今…
-
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…
-
イメージマップ（クリッカブルマップ）の作り方とまとめ
イメージマップ（クリッカブルマップ）は画像の一部分をリンク設定できる機能です。 昔からある機能でFireworksやDreamweaverでは簡単に作成すること…
-
ホームページを一時的に閉鎖する3つの方法
システム改修、アップデート時やサイト全体のデザインリニューアル、セキュリティなどの問題、またオーダーに対応できないためにでホームページを一時的に見れない状態にし…
-
Facebook OGP ,Twitter Cards のOGP設定のまとめ
WordPressのOGP設定はこちら OGP（Open Graph Protocol）とはシェアしてもらった時にそのページのタイトル、説明文、サムネを指定でき…
-
OSX特定のWebサイトが真っ白になる(Google Chrome ,Safari）
普段は、GoogleChromeを主に使ってるのですが、少し前からWebページが真っ白になってまともに表示されないことがあります。 表示されないサイトは色々なん…
-
スマホ・PCを判別してリダイレクトする方法まとめ
ウェブサイトでPC用ページとスマホ用ページが別々に存在する場合、ユーザーエージェントで振り分けるのが一般的です。 .htaccess , JavaScript …
-
一定時間でオーバーレイ表示したり、バナーを一定時間表示するjQuery
Webサイトでお知らせや告知をしたい時、CTAを促すためなどによく使われる方法として一定時間で処理を実行するjQueryを紹介します。 指定した期間だけバナーを…
-
youtube動画のサムネを取得する
Youtubeで動画をアップすると自動でサムネが生成されていると思いますが、 このサムネを別サイトで使いたい場合、以下の方法で取得できました。 http://i…
-
sublime text3で複数ファイルの検索置換する
sublime text3で複数ファイルの検索置換したい時の覚え書き。 複数ファイルの検索置換はFind in files メニューは、検索からFind in …
-
AdobeCreativeCloud、Photoshopのアップデートエラーの対処法
PhotoshopやIllustratorを使い倒すならAdobe CCのコンプリートプランがおすすめです。必見、Adobe CCを格安で使う方法Adobe C…
-
スマホ or PCのみでJavaScript, jQueryを実行する
レスポンシブウェブサイトを制作で必要になる機会が多いデバイスによって表示を切り替えたり、処理を変更したりする時に。 デバイス（スマホ・タブレット・PC）ごとにJ…
-
縦横スクロール CSSでtableをレスポンシブにする方法
Webサイトデザインでテーブルを使う時にモバイル環境でも見やすく工夫しなければいけません。行や列が多いテーブルをCSSでスクール可能にして見やすく表示させる方法…
-
CSSで作るふきだしデザイン、作成手順と実例サンプル
今回はCSSで作る吹き出しデザインについて基本的な作成方法と吹き出しデザインの実例を紹介します。Webページでの吹き出しとは、テキストや画像に対して会話やコメン…
-
background-size の使い方＆サンプル
レスポンシブデザインが増えるにつれ使用頻度の多くなったbackground-sizeプロパティ。背景画像をレスポンシブ対応するときに活躍します。 元の画像 wi…
-
フォームで住所を自動入力するJavaScript -ajaxzip3, jquery.j-postal.js
問い合わせや資料請求フォーム設置の際、郵便番号を入れると住所を自動入力させるのはユーザービリティの向上と住所の入力ミスなどを防ぐ効果もあるので積極的に使っていき…
-
【最新】少ないコンテンツでもフッターを下部に固定するCSSサンプル
ヘッダー・コンテンツ・フッターで構成されているサイトで、コンテンツの内容が数行だったりするとフッターが宙に浮いた感じになってどうも見栄えが悪い時ってありますよね…
-
position:fixed 固定時にアンカーリンクがずれるのを解決する
ヘッダーナビゲーションなどを固定するスタイルは良くみかけるデザインですよね。 ヘッダーをスクロールに追従させることで、ユーザーがわざわざページ上部に戻らなくても…
-
覚えておくと便利なCSS 隣接セレクタの使い方と使用例
隣接セレクタとは、同じ階層で指定した要素の直後にある要素（同じ階層なので兄弟要素）だけを選択することができるCSSセレクタです。 例えば、見出しの後にある段落だ…
-
select プルダウンメニューの見た目をよくするCSSカスタマイズ
入力フォーム内で使われるselectタグを使用したプルダウンメニューは、ウェブサイトでよく使用される重要なUIの一つです。 デフォルトのプルダウンメニューは見た…
