サイトの制作や運営をしてると画面のキャプチャー(スクリーンショット)を取ることがよくあると思います。 しかも、今見えてる範囲だけじゃなくて、上から下まで画面全体のスクロールキャプチャーを取りたいっていう要望も多いですよね。 ChromeやIEだと、画面全体のキャプチャーを取るのにプラグインや拡張機能が必要なんですが、FireFoxは標準で組み込まれていてアドオン不要でキャプチャーが撮れます。 FireFoxで画面全体のキャプチャーの撮り方 FireFoxでキャプチャーを撮りたいページを開いた状態にして、開発ツールを開きます。 開発ツールは、 などで開けます。 開発ツールを開くと下側か右側に開発ツールのウィンドウが開きます。 開発ツールのツールバーのところに、カメラのアイコン(ページ全体のスクリーンショットを撮影します)がありませんか？ これをクリックするだけです。 FireFox開発ツール

この記事ではAwesome Screenshotの安全性やインストール方法・使い方などを完全解説します。 Awesome screenshotのGoogle ChromeやFirefoxの拡張機能で、ダウンロードするだけでウェブページ全体のスクリーンショットや画面録画などが可能になります。 サインインなどしなくても使えるので重宝しますよ。 以下の画像はAwesome Screenshotを使ってWEBページ全体をキャプチャした例です。※クリック or タップすると拡大します。 こんな風に縦長ページのスクショも簡単に撮れるので、ぜひこの記事を参考に使い方をマスターしてください。 Awesome Screenshotの安全性・セキュリティについて Awesome Screenshotの安全性については比較的高いといえます。 私がAwesome Screenshotを使用していてスパイウェアやウ

ウェブサイトの全体像をキャプチャ撮影したいという場面はよくある。今もっとも手軽なのは、スクリーンショット撮影用の拡張機能を使う方法だ。Chromeで定番のサイト全体のキャプチャツールを利用して、縦方向に長いサイトの全景を一括キャプチャしよう。 サイトの全体が分かるような画像を用意したいときには、縦方向にスクロールした全体像を保存するツールだ。Chromeにはウェブサイトの全体をキャプチャするツールがいくつかあるが、その中でも特に定評があるのが「FireShot」だ。 このツールでは、画像、PDF、印刷と3つの方法でサイトの全体画像を出力できる。画像の場合はPNG形式とJPEG形式を選択することが可能（選択は設定画面で行う）。ほかにも、画像をクリップボードに送って、画像編集ソフトにそのまま貼り付ける、といった芸当も可能だ。 サイトのスクリーンショットが必要な場面では大活躍する拡張。常にインス

個人的に、今はWebデザインはイラレでやります。Photoshopは画像の調整にしか使いません。 これからは、徐々にDesigning in the browserにシフトして、ワイヤー、ラフ、パーツ制作にイラレを使用していくつもりです。 ただ、まだまだデザインカンプの作成が必須となっていて、なかなかシフト出来ないのが現状です。 なぜIllustratorか？ そもそもイラレの方がレイアウトが組みやすい。 これが一番の理由なんですが。。。 いや、これ以外にも、いろいろとあって、 以前は、とにかく画像画像だったパーツ（ナビゲーションとかボタンとか見出しとか）が、CSS3で表現出来るようになり、Webフォントやアイコンフォントが主流になってきて、画像で書き出すパーツが大幅に減った。 さらに、Retina等、解像度の違うディスプレイが登場して、今後も増えてくる事を考えるとSVGの使用も増えてくる

完了日: 2024年7月 決済サービス提供会社のコーポレートサイト（200ページ）のリニューアル。テンプレート・パーツのコーディングとPowerCMSの設計・実装を担当。週1回の定例Mtgを開催しながら、長期間のプロジェクトを完遂。 完了日: 2024年7月 大手電機メーカーのコーポレートサイト。様々なWeb制作会社がページ更新時に利用するコーディングテンプレートの全面改修を担当。あわせて、コーディングガイドラインの改定を行ない、サイト運用の基盤整備を行なった。 完了日: 2024年6月 クライアントとサイトの表現方法のイメージ合わせをするために、アニメーションのサンプルをまとめた打ち合わせ用のモックアップを作成。

Browse: Home » 【IllustratorでのWEBデザイン編】WEBのコーディングでググって調べた基礎の基礎のまとめ 1週間ほど前まで、毎日作業していたWEBのコーディング案件で、ググって調べた基礎の基礎をまとめておきます。 前回のコーディングの案件の時にも、作業が終わってから「久々のWEBのコーディングでググって調べた基礎の基礎のまとめ」、「【第2段】久々のWEBのコーディングでググって調べた基礎の基礎のまとめ」とググったことをまとめておきました。人間、どうしても同じようなところでつまずいたり、ミスをしてしまうところがあるものなので、このようにまとめておくとこはとても有益で、今回のコーディングもこれらのまとめ記事からリンクを見て確認することが何度かありました。 コーディングに関することはググれば出てくるのだから、別にまとめておかなくてもいいじゃん！と思う人もいるかもしれませ

TL;DR リニューアルを行った時に、CSS3 で気づいたことや次回もまた使いそうなものなどを備忘録として書いておきます。基本的なものから見慣れないものまで。 CSS3 オートフィルの背景色を解除 chrome にて、テキストボックスのオートコンプリートした際、背景色が黄色になります。これを消したかったので を追記。色指定の箇所に任意の色を指定できますが、とりあえず白色で。 無事消えました。 Coderwall | Change background color for autocompleted inputs in Google Chromeでinputがオートフィルされてると背景色が黄色になるのを回避 – CSS | ごろつきめも backface-visibility で Chrome のチラつきを解決 fadeIn などのアニメーションを取り入れると Chrome でヘッダーやサイ