ラベル 技? の投稿を表示しています。 すべての投稿を表示
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を読み込みます。
これは、基本ですね
これで完成です。
主に以下の様に編集して下さい。
編集方法は、大体分かりましたよね?
分からない場合は、コメントでどうぞ!!
Google遊び場 で遊んでみたw
今回GoogleのAPlを使った色々な物をGoogleが紹介しているので
さてさっそく遊んでみましょう!!
今回遊ぶのは、「ダイナミックフィードコントロール-垂直」で遊びましょう。!!!
まずサンプルコードをHTMLで表示しましょう。!!
次にそのコードを全てコピーしてテキストエディタで編集しましょう。
これを見ているだけでワクワクしますね～ww
これプレビューすると以下の様になっています。
でもカスタムしたいですね～w
じゃ～カスタムしてみますか!!
上記の様に書かれている部分のcssのリンクをブラウザーで開きましょう。
http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css
このコードを全てコピーしてHTML上に貼ってカスタムが可能です。!!
カスタムすると以下の様にカスタムする事も可能です。
他にも色々とカスタムする事が可能!!
レイアウトを変えれば横並びにする事も可能です。
ぜひ皆さんもGoogleの遊び場で遊んでみて下さい。
遊んでみました。 結構面白いです。
さてさっそく遊んでみましょう!!
今回遊ぶのは、「ダイナミックフィードコントロール-垂直」で遊びましょう。!!!
まずサンプルコードをHTMLで表示しましょう。!!
次にそのコードを全てコピーしてテキストエディタで編集しましょう。
これを見ているだけでワクワクしますね～ww
これプレビューすると以下の様になっています。
でもカスタムしたいですね～w
じゃ～カスタムしてみますか!!
上記の様に書かれている部分のcssのリンクをブラウザーで開きましょう。
http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css
このコードを全てコピーしてHTML上に貼ってカスタムが可能です。!!
カスタムすると以下の様にカスタムする事も可能です。
他にも色々とカスタムする事が可能!!
レイアウトを変えれば横並びにする事も可能です。
ぜひ皆さんもGoogleの遊び場で遊んでみて下さい。
webレイアウトの基礎を作ってみた
今回初心者の方でも簡単に理解しやすいwebレイアウトの作り方を
紹介したいと思います。
いちょう僕も今までやってきたレイアウトに見落としていた事があったので^^;
さてまず準備からしましょう!!
ez-HTMLを利用している方は、基本的な準備でいいです。
メモ帳などをご利用の方は、単語登録などをオススメしますので
単語登録をして下さい
赤い枠に囲まれている工具ボックスみたいな物を
クリックします。
こんな感じでメニューが現れます。
このメニューの
(単語/用例の登録)
をクリックします。
こんな感じの物が出てくる
と思います。
書き方は、簡単です。
下の例を見れば分かります。
例......
最後入力が終わったら
(登録)
をクリックして完了です。
他のやつでも大体一緒なので
使用するタグ
<div id="">～</div>
使用するCSS
float: left;
clear: left;
width: #;
background-color:
background-image: url(#);
background-repeat: repeat-y;
background-position: left center;
これだけのタグを単語登録して下さい。
さてさっそく作っていきましょう!!
今回の目標は、以下の画像の様にしてみましょう!
2カラムのレイアウトです。
自分の中では、
スッゲーーー簡単なので
皆さんもいけます。
さてまずは、HTMLタグを書いていきましょう!!
HTMLの入力が終わったらCSSを書いて行きます。
紹介したいと思います。
いちょう僕も今までやってきたレイアウトに見落としていた事があったので^^;
さてまず準備からしましょう!!
ez-HTMLを利用している方は、基本的な準備でいいです。
メモ帳などをご利用の方は、単語登録などをオススメしますので
単語登録をして下さい
単語登録方法
クリックします。
こんな感じでメニューが現れます。
このメニューの
(単語/用例の登録)
をクリックします。
こんな感じの物が出てくる
と思います。
書き方は、簡単です。
下の例を見れば分かります。
例......
最後入力が終わったら
(登録)
をクリックして完了です。
他のやつでも大体一緒なので
使用するタグ
<div id="">～</div>
使用するCSS
float: left;
clear: left;
width: #;
background-color:
background-image: url(#);
background-repeat: repeat-y;
background-position: left center;
これだけのタグを単語登録して下さい。
さてさっそく作っていきましょう!!
今回の目標は、以下の画像の様にしてみましょう!
2カラムのレイアウトです。
自分の中では、
スッゲーーー簡単なので
皆さんもいけます。
さてまずは、HTMLタグを書いていきましょう!!
HTMLの入力が終わったらCSSを書いて行きます。
- container
センタリングを指定しています。
そしてサイドバーの背景も指定しています。
※サイドバーの背景は、background-color:では、なく
background-image: url(#);となります。
この場合サイドバーは、200pxです。
なので200pxの画像を縦並びにして後は、background-color:で
メインカラムの背景の色を指定しています。
- header
ヘッダーは、幅を100%に指定しています。
特に設定は、必要ありません。
- side
サイドは、回り込みと幅を指定しています。
背景は、containerで指定しているので必要ありません。
- main
メインもsideと同じく回り込みと幅だけ指定しています。
sideの背景は、containerで指定していますが
メインは、containerで指定しなくてもいいです。
例...
#main{
float: left;
width: 700px;
background-color: #0066FF;
}
- footer
フッターは、回り込みを解除します。
後は、幅を指定するだけです。
以上これだけです。
jsでRSSフィードを作る方法
最近僕は、自分のプロフィールサイトを作ろうと言う計画をしていて
そのサイトのコンテンツで重要なのがRSSでした。
なので色々とrssフィードを検索して調べたのですが
Flashを使ったrssフィードだったりして使い物になりません。
せっかくだからブログパーツを使わないで作りたいですよね?
でもいい情報を見つけたので皆さんにも紹介します。
(多分知っている方は、多いと思います。それかこれよりもいいのがあると思います。)
表示例...
このソースをコピペで使用してください。コメントが書かれている所だけを修正すれば
完了になります。
APlキーは、src=" ">の「"」と「"」の間に記入してください。
取得するRSSのURLは、
feedAdd(" ", 1)の「"」と「"」の間に記入してください。
これで準備完了
最後にロードメッセージを変えてみましょう。
ソースの最後にd="feed">ロード中しばらく待たれ!</div>があります。
そこの「ロード中しばらく待たれ!」を消して好みの字を書くだけです。
画像も表示出来るのでGIFのロード画像を使うのもいいですね♪
説明は、以上です。
どうですか?簡単ですか?出来ませんか?
もし出来ないのならコメントに書いてください。
以上です。
こんな感じのリスト式で表示されます。
この場合記事のタイトルとリンクを取得されます。
google+の場合記事の一行目の字とリンクを取得します。
ご理解ください。
必要な物は、1つ
GoogleのAPlキーだけ
APlキー入手は、他の講座をご覧ください。
【ソース】
<script type="text/javascript" src=" "></script>//APlキーを"と"の間に記入
<script type="text/javascript">
<!--//
google.load("feeds", "1");
var entryArray = new Array();
var entryNum = 0;
function initialize() {
feedAdd("http://gplus.slfeed.net/RSS2/103883213408660487064", 2);
feedAdd("http://aquarzx2010.blogspot.com/feeds/posts/default", 1);//取得したいRSSのURL"と"内に記入
}
function feedAdd(rssUrl, boolNum) {
var feed = new google.feeds.Feed(rssUrl);
feed.setNumEntries(3);//一つのサイトのRSSを何個取得するか?デフォルトの場合3
feed.load(function(result) {
if (!result.error) {
for (var i = 0; i < result.feed.entries.length; i++) {
entryArray[entryNum] = result.feed.entries[i];
var date = new Date(result.feed.entries[i].publishedDate);
entryArray[entryNum].sortDate = ( date.getFullYear()*1000000 ) + ( (date.getMonth() + 1)*3600*32 ) + ( date.getDate()*3600 ) + ( date.getHours()*60 ) + date.getMinutes();
entryArray[entryNum].blogName = result.feed.title;
entryNum+=1;
}
}
if(boolNum==1){
feedOutput("feed", 100);//フィードの出力
}
});
}
function feedOutput(feedId, listNum){
var useFeed = "";
var useDate = "";
var container = document.getElementById(feedId);
entryArray = asort(entryArray, "sortDate");
if(listNum==100){//出力するリスト数
listNum = entryNum;
}
for (var i = 0; i < listNum; i++) {
var entry = entryArray[i];
var date = new Date(entry.publishedDate);
var m = date.getMonth() + 1;
if (m < 10) {m = "0" + m;}
var d = date.getDate();
if (d < 10) {d = "0" + d;}
var h = date.getHours();
if (h < 10) {h = "0" + h;}
var mn = date.getMinutes();
if (mn < 10) {mn = "0" + mn;}
useDate = m + "月" + d + "日";
useFeed += '<div style="float:left;width:120px;">'+ m + "/" + d + "(" + h + ':' + mn + ')' + '</div><div style="float: left;width:400px;height:18px;overflow:hidden;"><a href="' + entry.link + '" target="_blank" title="' + entry.title + '【' + entry.blogName + '】">' + entry.title + '</a> <img src="http://b.hatena.ne.jp/entry/image/large/' + entry.link + '"></div><div style="float:right;width:150px;height:18px;overflow:hidden;">' + entry.blogName + '</div><br><hr size="1" />';
}
container.innerHTML = '<div>' + useFeed + '<div></div></div>';
}
function asort(myArray, key){
return myArray.sort ( function (b1, b2) { return b1[key] > b2[key] ? -1 : 1; } );
}
google.setOnLoadCallback(initialize);
//-->
</script>
<div style="height:300px; width:700px; overflow:auto;" id="feed">ロード中しばらく待たれ!</div>
このソースをコピペで使用してください。コメントが書かれている所だけを修正すれば
完了になります。
APlキーは、src=" ">の「"」と「"」の間に記入してください。
取得するRSSのURLは、
feedAdd(" ", 1)の「"」と「"」の間に記入してください。
これで準備完了
最後にロードメッセージを変えてみましょう。
ソースの最後にd="feed">ロード中しばらく待たれ!</div>があります。
そこの「ロード中しばらく待たれ!」を消して好みの字を書くだけです。
画像も表示出来るのでGIFのロード画像を使うのもいいですね♪
説明は、以上です。
どうですか?簡単ですか?出来ませんか?
もし出来ないのならコメントに書いてください。
以上です。
CSSでレイヤー
僕も最近始めて知ったのですがCSSでレイヤーが出来るらしいので
色々googleで検索してみました。
まー難しいのかなと思いなんとなくやると簡単に出来てしまったのです。
今回紹介する方法の画像は、200pxでの画像を使ってみました。
今回あくまでも紹介=試しなので適当に200pxの縦横の画像を作ってください適当でいいので
入力が完了したら次は、CSSの設定です。
基本ルールは、(絶対差)です。
これでプレビューしてみてください。
きっと完成するはずですが・・・・・・・・・・
綺麗に重なって1にしか見えませんよね^^;
その時もCSSで設定しよう^^
最初から半透明画像使ったら早いのですが
作るのがめんどくさいのでCSSでやりましょう^^;
色々googleで検索してみました。
まー難しいのかなと思いなんとなくやると簡単に出来てしまったのです。
今回紹介する方法の画像は、200pxでの画像を使ってみました。
今回あくまでも紹介=試しなので適当に200pxの縦横の画像を作ってください適当でいいので
まーこんな感じで僕は、分かり安い画像を用意しました。
皆さんも適当に作ってください。
さて次は、HTMLを入力します。
<body>
<div class="a"><img src="aquamig/a.png" border="0" alt="a.png(1819 byte)" width="202" height="200" /></div>
<div class="b"><img src="aquamig/b.png" border="0" alt="b.png(1829 byte)" width="202" height="200" /></div>
</body>
入力が完了したら次は、CSSの設定です。
基本ルールは、(絶対差)です。
<style type="text/css">
div { position:absolute; }
.a{ z-index: 2; height: 100px; width: 100px; }
.b{ z-index: 1; height: 200px; width: 200px; }
</style>
div { position:absolute; }
.a{ z-index: 2; height: 100px; width: 100px; }
.b{ z-index: 1; height: 200px; width: 200px; }
</style>
これでプレビューしてみてください。
きっと完成するはずですが・・・・・・・・・・
綺麗に重なって1にしか見えませんよね^^;
その時もCSSで設定しよう^^
最初から半透明画像使ったら早いのですが
作るのがめんどくさいのでCSSでやりましょう^^;
.b{ z-index: 1; top: 100px; left: 100px; height: 200px; width: 200px; }
BのCSSを書き換えてください。
これでずれますよね
まーそんな感じでCSSでレイヤーが作る事が可能だと実証しました。
z-index: 2;
これがレイヤーです。2の部分がレイヤー2となります。
例で見るとレイヤーBが2ですね
まー大体やれば分かったと思うので後は、自由に検索して僕より説明の
うまい記事をみつけてください。
