ラベル 技? の投稿を表示しています。 すべての投稿を表示
Google Chromeのデベロッパーツールの使い方
皆さんはGoogle Chromeのデベロッパーツールを使った事はあるでしょうか??
今更記事にするのも遅い気がしますが、Web開発やプログラマーなら一度は使った事のあるツールだと思います。
今回まだ、Google Chromeのデベロッパーツールの使い方が分からなくて、
不便な生活をしている開発者のタマゴを対象にして書いて行きたいと思います。
Google Chromeデベロッパーツールとは?
最近のブラウザーには大体デベロッパーツールと言うのが付属されていますが、
私は基本的にGoogle Chromeのデベロッパーツールを利用しています。
私が個人的に気に入っている機能は、
- マウスで気になる要素を選択し、HTML/CSSソースを解析出来る
- JavaScriptのエラーまた、リンクエラーを発見出来る
- ページロード時に一番読み込みにかかったファイルを探せる
- 直接HTML/CSSの編集が出来る
この4つは一番気に入ってます。
上記画像では、タイトル部分を選択し、HTMLソースCSSソースを表示しています。
では試しにこれがとうなっているのか、
デベロッパーツールで調べてみましょうか。
Google Chromeを開き、デベロッパーツールを開きます。
虫眼鏡マークを押してから、ブラウザー上の要素をマウスで選択します。
するとその要素のHTML部分が表示されます。
HTMLの構造・CSSで定義されているスタイル等簡単に見る事が可能です。
また、セレクタも分かるので、
hoverや擬似セレクタでどの様なスタイルを定義しているのかも分かります。
この様にして上手くデベロッパーツールを使いこなせれば、
ブログのデザイン等を考えたりしながら実際に組むのも簡単です。
Webページを保存する方法
先ほど、Webページだけを手軽に保存出来ればいいな。
っと思って検索した結果身近にあるもので、直ぐに保存出来る方法がありました。
ページの一部分を保存するならスクリーンショットで十分です。
ですが、ページ全体の情報をまとめて、保存するならPDFとして保存しましょう。
自分も先程知った事で、感動しました。もう荒れたブックマークを整理する事は必要ありませんよ!!
自分の場合は、プログラミング関係やお絵かき関係のページを見る事がほとんどで、
サイト自体の内容を全て必要としている訳でもなく、そのページに記載されている情報だけあれば十分と思う事がよくあり、その度にブックマークしています。
以降ほとんどそのページへ訪れる事はなく、ブックマークが荒れるわけです。
まして、自分の場合はオフライン環境での作業もあるので、いちいちネットの繋がる所へ移動して、調べたりはしないわけです。
でも、PDF化してページを持ち運べば、どんな環境でもページの情報を見る事が出来るわけです。
前置きが長くなりましたね。
PDF化してページを保存するにはブラウザにある「印刷」から保存可能です。
これであとは保存するだけですね。
こんな素晴らしい機能がブラウザにあるなんて驚きました。
てっきり印刷だけする機能なのかとw
jQueryで"クリックすると隠れ文字が現れる....
今回jQueryを使ってゆるゆりスペシャルサイトの9話で使用している
物をやってみようと思います。^^
なんと言ったらいいのか分かりませんがそんな感じの物です。^^;;
以下の画像の様になります。
-->
-->
物をやってみようと思います。^^
なんと言ったらいいのか分かりませんがそんな感じの物です。^^;;
以下の画像の様になります。
画像で大体想像出来ますよね??
ま～こんな感じの面白い物を作ると言う事です。
一度実際見たら早いかもしれません。
………………………、……………………。
………、………………。
………、……………。……。
………、…………………、………。
……………………、……。
……、…………………。
………………………………………。
………、………………………………。
………、………………。
………、……………。……。
………、…………………、………。
……………………、……。
……、…………………。
………………………………………。
………、………………………………。
『生徒会長の松本りせ、あらすじやります。
今回は、一人で頑張る。
大丈夫、会長だから。むん。
ええと、９話も楽しそう、みんな。
楽しいのはいいね、好き。
うん、楽しいのが一番。
ふう……いっぱい喋って疲労困憊。
じゃあ、西垣先生と爆発してくるね。』
今回は、一人で頑張る。
大丈夫、会長だから。むん。
ええと、９話も楽しそう、みんな。
楽しいのはいいね、好き。
うん、楽しいのが一番。
ふう……いっぱい喋って疲労困憊。
じゃあ、西垣先生と爆発してくるね。』
上記みたいになります。
・・・・・・・・・が書かれてる所をクリックしてみて下さい。
文字がちゃんと表示されますよね?
この方法を今回ご紹介します。
例で使っているソースは、以下の様です。
まずjQueryを読み込みます。
これは、基本ですね
これで完成です。
主に以下の様に編集して下さい。
編集方法は、大体分かりましたよね?
分からない場合は、コメントでどうぞ!!
