ラベル css の投稿を表示しています。 すべての投稿を表示
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や擬似セレクタでどの様なスタイルを定義しているのかも分かります。
この様にして上手くデベロッパーツールを使いこなせれば、
ブログのデザイン等を考えたりしながら実際に組むのも簡単です。
CSSで横からボックスをスライドする
現在制作しているテンプレートにちょっと変わった「新着情報リスト」を作りたかったので、色々考えた結果、日付だけを右側に固定で表示し、それにマウスが触れると内容が見れると言う様な物を作ってみました。
前提として、この機能にJavaScriptは使わないと言う事です。
全てCSSで記述しました。
実際にやってみたい方は以下のソースを参考にしてください。
HTML
- 2014/08/22
- 2014/09/01
CSS
#new_view { position: fixed; top: 110px; left: 0px; } /*親要素で、固定配置する*/
#new_view li{
background-color: rgba(254,101,104,0.89);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-left: 8px solid rgba(64,145,238,1.00);
padding-left: 10px;
padding-right: 10px;
color: rgba(255,255,255,1.00);
line-height: 30px;
margin-bottom: 20px;
transition: .42s;
width: 100px;
height: 30px;
overflow-y: hidden; /*はみ出る内容を非表示にする*/
margin-right: 10px;
-webkit-box-shadow: 0px 5px 5px rgba(140,140,140,0.63);
box-shadow: 0px 5px 5px rgba(140,140,140,0.63);
}
#new_view li:hover{
background-color: rgba(255,143,144,0.90);
height: 30px;
width: 100%;
}
#new_view li:after{
content: attr(data-new);
margin-left: 10px;
color: rgba(245,245,245,1.00);
}
ほほうボタン仕様変更のお知らせ(vsr1.01)
大変遅くなってしまい誠に申し訳ございません。m(_ _)m
ついに[ほほうボタンvar1.01]をリニューアル致します。
今現在もう既にバージョンが変わっていると思われますのでご確認下さい。
バージョン詳細(ver1.01)
下記の機能・修正を行いました。
- jQuery化
- ボタンスタイルの変更が可能になりました。
これだけです。^^;
今回はまず初めにボタンスタイルを変えれる様にしました。そりに従ってソース自体をjQuery化し、サイトのデザインに合わせてボタンの配色を変更出来ます。
ほほぅボタン設置方法
以下のソースを貼って下さい。
HTML
jQuery化しましたのでjQueryソースの記述が必要になりました。
要素IDは必ずhohou_botanにして下さい。
要素名も必ずbuttonにして下さい。
IDはソース側でhohou_botanと固定設定になっていますのでご了承下さい。
要素名もdiv要素等使ってしまうとエラー表示が出ますのでご了承下さい。
念のため裏でこんな事やっている
今回のjQuery化に従い、ソースにjQueryソースを埋め込んでいますのでご了承下さい。
headで読み込む手間を削減させて頂きました。
Style 引数
| 引数 | 初期値 | 説明 |
|---|---|---|
| back_color | #FFFFFF | アクティブでない時の背景色 |
| color | #FF3E3E | アクティブでない時の文字色 |
| border_color | #E8E8E8 | ボタン枠線の色 |
| active_back_color | #FF3C3C | アクティブな時の背景色 |
| active_color | #FFFFFF | アクティブな時の文字色 |
jQueryで可変グリッドレイアウト
最近ではスマートフォン端末もよく利用される様になってから、
Web業界でもレスポンシブルデザインを取り入れるサイトが増えて来ました。
そして最近では可変グリッドレイアウトと言うカードを並べた様な形のデザインも増えています。
そこで、簡単にグリッドレイアウトを使える様にしたjQueryを紹介したいと思います。
必要な物はライブラリーだけ!!
以下のサイトから2つのJavaScriptファイルをダウンロードして下さい。
ダウンロードが完了したらこれで準備は完了です。
後はソースを入力していくだけ、
JavaScriptファイル読み込み
jQueryコードを書く
$(function(){
$('#main_container').masonry({
itemSelector: '.box',
isFitWidth: true,
isAnimated: true
});
});
※
[$('#main_container')]ではHTMLのグリッドレイアウトのボックス全体を囲む要素です。
[itemSelector: '.box',]レイアウトする対象要素
HTMLを書く
Box1
Box2
Box3
Box4
Box5
Box6
Box7
Box8
Box9
CSSをお忘れなく!!
body{ background-color: #808080; }
#main_container{ margin: 0 auto; width: 900px; }
.box{
background-color: #fff;
float: left;
width: 200px;
margin: 10px;
padding: 10px;
border-radius: 5px;
}
初心者でも分かる様にCSS3角丸の説明
多分以下の表見たら一発で分かると思います。
角丸の全てはこれだけです。
| 角丸プロパティ | 特定箇所プロパティ | px指定 | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| border-radius: |
|
5px; |
全て同じpx数の場合は「角丸プロパティ」とpx数を指定するだけで全ての角が角丸になります。
もし、特定の場所のみ角丸にしたい場合は「特定箇所プロパティ」で個別に指定する事により、
左上だけ角丸にするといった指定も可能です。
一覧にして全ての角を様々な角度にしたい場合は以下の様にします。
もし、特定の場所のみ角丸にしたい場合は「特定箇所プロパティ」で個別に指定する事により、
左上だけ角丸にするといった指定も可能です。
一覧にして全ての角を様々な角度にしたい場合は以下の様にします。
border-radius: 1px 3px 4px 2px;
- 左上
- 右上
- 右下
- 左下
角丸の全てはこれだけです。
Webサイトを作成する時に使うタグをまとめてみた。
やはり始めてホームページの作成方法を覚える時に、「大量のHTMLタグを覚える必要がある。」
こちらのタグは特に意味を持ちませんが、ホームページのレイアウトなどの構造を作る時に作ります。基本と言うか、ほとんどこれだけでレイアウトを作るので、ここではクラスなどについて説明しましょう。
特に意味を持たないタグが何故構造として使うのか?
っと思うかもしれませんが、特に意味を持たない綺麗なタグをCSSで飾ってあげると、綺麗なサイトが作成出来るのです。
何らかの意味を持って効果を出してしまうのであれば、逆に難しい事をしなくてはいけなくなります。
ではまず初めにidとclassの違いを説明しましょう。
このidとかはCSSで指定する時にセレクターとして使います。
idは1のみに適応される物です。複数あっても全てにCSSは適応されませんのでご注意下さい。
classは複数CSSを適応されます。
単純にidは1だけに適応される特別な物classは複数あっても全てに適応される。
っと考えたらいいでしょう。
たったこれだけHTMLを覚えれば大体のサイトは作成出来ます。
っと勘違いしている方が多いと思います。
そして特に必要の無いタグを使って見ててイライラする様なサイトを作成する始末。
なので今回は基本的に使うHTMLタグを初心者の方向けに紹介したいと思います。
これで無駄に覚える必要のないタグを覚えなくて学習が進むと思います。
そもそもHTMLタグは効果を出す物ではない。
初心者であれば必ずと言っていい程、流れる文字とかのHTMLタグを使うと思います。
厳密に言うとプロパティでやるのですが、こういった効果は全く必要ありません。
そもそもHTMLタグと言う物は基礎を作り上げる物で、その基礎を元にCSSやJavaScriptなどで効果を与えるのです。今の時代基本jQueryと言うライブラリを使ってカッコイイサイトなどを作成しますね。
ここで間違っていけないのはHTMLはデザインを定義する物でもなく、効果を出す物でもなく、構造を組み上げる物です。身近で言えば型枠大工みたいな感じですね。もっと身近に言えば絵の下書きの様な物です。
これだけは絶対に間違えないで下さい。
文字系HTMLタグ
では基本的に使う文字系HTMLタグを紹介します。
ソースの下にHTMLの説明を書きますのでよく読んで理解して下さい。
<p>〜</p>
これは段落タグです。
文字などを段落で区切る事が出来る物です。基本的に文書はこの中に書きます。
文字などを段落で区切る事が出来る物です。基本的に文書はこの中に書きます。
<span>〜</span>
このタグは特に意味を持ちませんが、主に囲んだ範囲にスタイルを適用させて使います。
一部分だけの文字列の色を変えたりなどCSSを適応させて使います。
一部分だけの文字列の色を変えたりなどCSSを適応させて使います。
<br />
改行タグです。文字列と文字列の間に入れるとその部分から改行されます。
但し、位置とか調整する為に使う物ではありませんので、ご注意下さい。
但し、位置とか調整する為に使う物ではありませんので、ご注意下さい。
<hr>
境界線を引きます。
<table> <tr> <td></td> <td></td> </tr> </table>
テーブルタグです。表などを作る事が出来ます。
これはただレイアウトを作る為の物ではないのでご注意下さい。
文章系HTMLタグはこれだけでも覚えていれば十分です。
これはただレイアウトを作る為の物ではないのでご注意下さい。
文章系HTMLタグはこれだけでも覚えていれば十分です。
構造系HTMLタグ
レイアウトなど構造を作り出すHTMLタグです。
<div>〜</div>
こちらのタグは特に意味を持ちませんが、ホームページのレイアウトなどの構造を作る時に作ります。基本と言うか、ほとんどこれだけでレイアウトを作るので、ここではクラスなどについて説明しましょう。
特に意味を持たないタグが何故構造として使うのか?
っと思うかもしれませんが、特に意味を持たない綺麗なタグをCSSで飾ってあげると、綺麗なサイトが作成出来るのです。
何らかの意味を持って効果を出してしまうのであれば、逆に難しい事をしなくてはいけなくなります。
ではまず初めにidとclassの違いを説明しましょう。
このidとかはCSSで指定する時にセレクターとして使います。
idは1のみに適応される物です。複数あっても全てにCSSは適応されませんのでご注意下さい。
classは複数CSSを適応されます。
単純にidは1だけに適応される特別な物classは複数あっても全てに適応される。
っと考えたらいいでしょう。
たったこれだけHTMLを覚えれば大体のサイトは作成出来ます。
無駄なタグを覚えずにスッキリとしたサイトを作成しましょう。
Web開発者向けツールを比較してみた。
Web開発を行う時に特に便利な物でブラウザに標準搭載しているのが開発者向けツールです。
ブラウザごとに開発者向けツールの機能は異なります。
そこで今回はこの開発者向けツールを比較してみたいと思います。
比較対象となるブラウザは、
ブラウザごとに開発者向けツールの機能は異なります。
そこで今回はこの開発者向けツールを比較してみたいと思います。
比較対象となるブラウザは、
- Internet Explorer9
- Google Chrome
- Mozilla Firefox
どちらも有名なブラウザですね。この3種類のツールを比較致します。
Internet Explorer
これはWindowsをお持ちの方には馴染みのあるブラウザではないでしょうか?
Microsoftが提供している最悪のブラウザーです。
日々開発者を悩ませ続けているとても有名な物です。
多分[ Internet Explorer9 ]ぐらいから開発者向けツールが搭載されていると思います。
7あたりから私は使っていませんので詳しくは分かりませんが(・・;)
F12キーを押せば出てきます。
日本語表記でとても分かりやすい形になっています。
機能としては、
DOM Explorer コンソール デバッガー ネットワーク UIの応答 プロファイラー メモリ
エミュレーションこの項目があります。これでも十分使えるとは思いますが、
私のPCのスペックではなかなか重くて動作しません。orz
ただ初心者向けとしては機能は十分です。
Google Chrome
私は基本このGoogle Chromeの開発者向けツールを利用しています。
機能は私が知らない様な機能もまだあるらしく、基本私が日常的に使うとしたら、
要素の幅を測ったり、余白など調べたりしていますね。
JavaScriptでの動作確認も手軽に出来るので私の中では一番いいツールだと思います。
Mozilla Firefox
私は基本このブラウザ自体は表示確認用として使っています。
このブラウザも機能が凄いです。
初めて使った時はビックリしましたね!!
レスポンシブデザインモードと言うのがあり、自由にブラウザの幅を変えて表示確認が出来ます。
各ブラウザの開発者向けツールの機能を知っていればこれから先使う事があるかもしれません。
なので知っていて損はないと私は思います。
イラストサイト向けテンプレート配布開始
☆☆※現在テンプレートがダウンロード出来ない問題が発覚したので現在新規で制作を速急に進めております。大変ご迷惑をお掛けして申し訳御座いません。速急に対処致しますのでいましばらくお待ちください。※☆☆
New
レスポンシブデザインに対応しました。
スマートフォン・タブレット端末の対応を致しました。
「こうして欲しい!!」っと言ったリクエスト等ございましたら気軽にコメントしてください。
久々のテンプレート配布です(´∀｀*)
今回作成したテンプレートは、イラストサイト向けで、今まではほとんど写真などを紹介する様なテンプレートが多かったですが、「イラスト」と「写真」は全く違うと私は思います。なのでイラストサイト向けのテンプレートを作ろうと思い今回作成させて頂きました。
デザインセンスは全然良くないのですが、一応作ったので是非使ってもらいたいです。
イメージとしてはアニメのウェブサイト的な感じです。
絵師であれば、イラストを一番見てもらいたいはずなのでお気に入りの描いた絵をトップページに載せてアピール出来る様にアニメの公式サイトの様な感じに絵を大きく表示出来る様にしました。
「イラストページ」も、イラストをクリックすると大きく拡大して表示出来る様なjQueryを使わせて頂きましたので更に自分の描いたイラストをアピール出来る様になります。
フッターの部分には自分がお勧めするサイトのバーナーを貼るのもいいです。
完全フリーのテンプレートなので著作を書き換える事もいいです。
是非ご利用下さい。
※初期で使われている画像は使用する前に必ず削除して下さい。
ニコニコ静画やGoogle+で拾ってきたイラストなので。^^;
以降このテンプレートの拡張版も配布する予定ですので、期待して下さい。( ^ω^ )
[イラストサイト向けテンプレートのサンプルを見に行く]
[早速イラストサイト向けテンプレートをダウンロードする]
New
レスポンシブデザインに対応しました。
スマートフォン・タブレット端末の対応を致しました。
「こうして欲しい!!」っと言ったリクエスト等ございましたら気軽にコメントしてください。
久々のテンプレート配布です(´∀｀*)
今回作成したテンプレートは、イラストサイト向けで、今まではほとんど写真などを紹介する様なテンプレートが多かったですが、「イラスト」と「写真」は全く違うと私は思います。なのでイラストサイト向けのテンプレートを作ろうと思い今回作成させて頂きました。
デザインセンスは全然良くないのですが、一応作ったので是非使ってもらいたいです。
イメージとしてはアニメのウェブサイト的な感じです。
絵師であれば、イラストを一番見てもらいたいはずなのでお気に入りの描いた絵をトップページに載せてアピール出来る様にアニメの公式サイトの様な感じに絵を大きく表示出来る様にしました。
「イラストページ」も、イラストをクリックすると大きく拡大して表示出来る様なjQueryを使わせて頂きましたので更に自分の描いたイラストをアピール出来る様になります。
フッターの部分には自分がお勧めするサイトのバーナーを貼るのもいいです。
完全フリーのテンプレートなので著作を書き換える事もいいです。
是非ご利用下さい。
※初期で使われている画像は使用する前に必ず削除して下さい。
ニコニコ静画やGoogle+で拾ってきたイラストなので。^^;
以降このテンプレートの拡張版も配布する予定ですので、期待して下さい。( ^ω^ )
[イラストサイト向けテンプレートのサンプルを見に行く]
[早速イラストサイト向けテンプレートをダウンロードする]
他のサイトの記載情報の一部を取り除き表示する方法
※法律に詳しく無いのですが多分無断で今から紹介する事をやった場合罰せられるかもしれません。やる場合は、個人的に行って下さい。
今回他のサイトの記載情報の一部を取り除き自分のwebページで表示する方法を、
紹介したいと思うのですが今から説明する物は、ライブラリーを使用しているので、
先にダウンロードを済ませて下さい。
http://simplehtmldom.sourceforge.net/
ダウンロードが出来たら、「simple_html_dom.php」が呼び出せる様に、準備して下さいね♪
さてまず今回目標とするサイトは、以下のサイトです。
http://tvanimedouga.blog93.fc2.com/
アニメ好きなら大体の方が知っているサイトですね!
このサイトのアニメ情報を表示しちゃおうと思います。
そして記事内の取得する部分は、「class="mainEntryMore"」です。
このクラスは、全ページ共通のクラスなので、必ず広告下のリンクを表示する事が可能です。
ただこの広告邪魔ですね^^;
広告が邪魔なら見えなくしてしまえばいいのですよw
これで、広告も見えなくなってスッキリしますね♪
さてまだ説明していませんでしたねw
まず以下の様に書いてみて下さい。
「repuire_once()」は、ライブラリーを読み込む関数です。
最初にダウンロードしたライブラリーを読み込みます。
「$html = 」この変数には、読み込むページのURLを書きます。
最後の('div[class=])には、class=の次にクラス名を書きます。
これで準備は、おk
これを起動するとページの特定の部分が読み込まれると思います。
今回目標としたサイトは、Blogです。
なのでRSSなどを元に自分のサイトで複数表示してみました。
手順的に、
まずXMLの必要な部分を読み込みます。
重要な物は、$linkです。
この$linkを元に特定の部分を読み込んでいます。
ようするにリンクがあればなんとかなります。
XMLよりもっといっぱい取得したい場合は、以下の様にしたらいいと思います。
試した事無いから分かりませんが多分論理的にいけると思います。
以上です。
あとは、取得した記事をHTMLファイルとして保存したりなど自由に出来ますので、
色々試してみて下さい。
今回他のサイトの記載情報の一部を取り除き自分のwebページで表示する方法を、
紹介したいと思うのですが今から説明する物は、ライブラリーを使用しているので、
先にダウンロードを済ませて下さい。
http://simplehtmldom.sourceforge.net/
ダウンロードが出来たら、「simple_html_dom.php」が呼び出せる様に、準備して下さいね♪
さてまず今回目標とするサイトは、以下のサイトです。
http://tvanimedouga.blog93.fc2.com/
アニメ好きなら大体の方が知っているサイトですね!
このサイトのアニメ情報を表示しちゃおうと思います。
そして記事内の取得する部分は、「class="mainEntryMore"」です。
このクラスは、全ページ共通のクラスなので、必ず広告下のリンクを表示する事が可能です。
ただこの広告邪魔ですね^^;
広告が邪魔なら見えなくしてしまえばいいのですよw
<style type="text/css"> #a789eba3{ display: none; } </style>
これで、広告も見えなくなってスッキリしますね♪
さてまだ説明していませんでしたねw
まず以下の様に書いてみて下さい。
<?php require_once('simple_html_dom.php'); $html = file_get_html('http://tvanimedouga.blog93.fc2.com/blog-entry-14898.html'); echo $html->find('div[class=mainEntryMore]', 0)->innertext; ?>
「repuire_once()」は、ライブラリーを読み込む関数です。
最初にダウンロードしたライブラリーを読み込みます。
「$html = 」この変数には、読み込むページのURLを書きます。
最後の('div[class=])には、class=の次にクラス名を書きます。
これで準備は、おk
これを起動するとページの特定の部分が読み込まれると思います。
取得した記事を自分のサイトの物みたいにしたい!!
さて次は、ちょっと複雑?になるかもしれませんが以下の様にする事も可能です。<?php $xmlname = 'http://tvanimedouga.blog93.fc2.com/?xml'; $xml = simplexml_load_file($xmlname); require_once('simple_html_dom.php'); ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #a789eba3{ display: none; } </style> </head> <body> <?php for($i=0; $i < 14; $i++) { $link = $xml -> item[$i] -> link; $title = $xml -> item[$i] -> title; $description = $xml -> item[$i] -> description; $animatxt = <<<TXT <h2>$title</h2> <h3>($description)の動画は、以下のリンクへ移動して下さい。</h3> TXT; $html = file_get_html($link); print $animatxt; echo $html->find('div[class=mainEntryMore]', 0)->innertext; print '<br><hr>'; } ?> </body> </html>
今回目標としたサイトは、Blogです。
なのでRSSなどを元に自分のサイトで複数表示してみました。
手順的に、
まずXMLの必要な部分を読み込みます。
重要な物は、$linkです。
この$linkを元に特定の部分を読み込んでいます。
ようするにリンクがあればなんとかなります。
XMLよりもっといっぱい取得したい場合は、以下の様にしたらいいと思います。
for($i=15251; $i < 15755; $i++) { $url = 'http://tvanimedouga.blog93.fc2.com/blog-entry-' . $i . '.html';
試した事無いから分かりませんが多分論理的にいけると思います。
以上です。
あとは、取得した記事をHTMLファイルとして保存したりなど自由に出来ますので、
色々試してみて下さい。
子供ホームページコンテスト!!
今回偶然知ったのですが、
世の中には、子供ホームページコンテストと言う物があるのですね
今日始めて知りました。
"子供ホームページコンテスト"では、小学生が作ったホームページを
審査して順位を付ける物らしいです。
それもグランプリを受賞した方には、10万円貰えるらしいです。
僕もやりたかったです。
グランプリを受賞された方のページを見たら・・・・・
採点の決めてが分からなかったです。
普通にYahooブログをカスタムしただけでした。
今の自分なら1時間以内で、出来てしまうサイトです。
僕は、中3ですが、受賞者は、小6でした。
多少の年齢差で、作る物は、変わっているんだな～っと思いますした。
でも小学生にしては、綺麗に出来ているブログでした。
コンテンツの配置も完璧? って程でした。
ただ困った事が、・・・・皆ブログなんです。^^;
ホームページコンテストじゃなくてブログコンテストになっていました。
ま～結構面白そうなサイトコンテストなので、色々みてみました。
そして、自分的にいいと思った物を勝手に順位をつけてみます。
世の中には、子供ホームページコンテストと言う物があるのですね
今日始めて知りました。
"子供ホームページコンテスト"では、小学生が作ったホームページを
審査して順位を付ける物らしいです。
それもグランプリを受賞した方には、10万円貰えるらしいです。
僕もやりたかったです。
グランプリを受賞された方のページを見たら・・・・・
採点の決めてが分からなかったです。
普通にYahooブログをカスタムしただけでした。
今の自分なら1時間以内で、出来てしまうサイトです。
僕は、中3ですが、受賞者は、小6でした。
多少の年齢差で、作る物は、変わっているんだな～っと思いますした。
でも小学生にしては、綺麗に出来ているブログでした。
コンテンツの配置も完璧? って程でした。
ただ困った事が、・・・・皆ブログなんです。^^;
ホームページコンテストじゃなくてブログコンテストになっていました。
ま～結構面白そうなサイトコンテストなので、色々みてみました。
そして、自分的にいいと思った物を勝手に順位をつけてみます。
優秀賞!!
やはりグランプリをとった方です。
僕のブログよりコンテンツの配置がいいです。
シンプルながら、ブログを見やすくして、
見てるこっちもいい気分になります。
まだ小学生の方は、一度試してみてはどうでしょう??
10万あったら余裕で、自作pc作れますよ!!
以下のサイトが、子供ホームページコンテストのサイトです。
ごく簡単なメニュー
今回初心者さん達の参考に、っと思い簡単なメニューを作ってみました。
誰でも真似が出来るので、試してみて下さい。
このメニューは、ボタン風に作ってみました。
あまりボタンの様には、見えませんが、とりあえずと言う事で、
CSS3を使って角を丸くしました。
ちょっと可愛いメニューですね
このメニューは、激ノーマルですね^^;
実際は、背景画像で、オリジナルのメニューを作成出来るのですが
画像を配布すると手間がかかるので、このブログでは、画像を使わない様に、
紹介いたします。
※ここで、紹介しているメニューは、自由に使っていただしていいのですが、
もしこのメニューのせいで、何か起きた場合責任はとりませんのでご了承下さい。
今サイトを作成途中の方は、編集中のファイルを開いて、
メニューを配置したい場所に<!--HTML-->の部分の下のタグを貼り付けて下さい。
次に、<style type="text/css">っと言う部分から</style>っと言う部分まで、コピーして下さい。
コピー出来たら<head>内に貼り付けをして下さい。
以上で、設置完了です。
プレビューで、ご確認下さい。
Q? ぜんぜんうまく行かない場合は、この記事にコメントに書いてくださったら回答いたします。
誰でも真似が出来るので、試してみて下さい。
あまりボタンの様には、見えませんが、とりあえずと言う事で、
ちょっと可愛いメニューですね
このメニューは、激ノーマルですね^^;
実際は、背景画像で、オリジナルのメニューを作成出来るのですが
画像を配布すると手間がかかるので、このブログでは、画像を使わない様に、
紹介いたします。
※ここで、紹介しているメニューは、自由に使っていただしていいのですが、
もしこのメニューのせいで、何か起きた場合責任はとりませんのでご了承下さい。
実際にメニューを使う方法!
こちらで、紹介しているメニューを実際に使う方法をご説明させていただきます。今サイトを作成途中の方は、編集中のファイルを開いて、
メニューを配置したい場所に<!--HTML-->の部分の下のタグを貼り付けて下さい。
次に、<style type="text/css">っと言う部分から</style>っと言う部分まで、コピーして下さい。
コピー出来たら<head>内に貼り付けをして下さい。
以上で、設置完了です。
プレビューで、ご確認下さい。
Q? ぜんぜんうまく行かない場合は、この記事にコメントに書いてくださったら回答いたします。
テンプレート(ゆる・・)を配布!!
今回久々にテンプレートを配布したいと思います。
結構複雑になりましたが綺麗に整えてコメントも付けて
初心者さんでも利用出来る様にしました～
ついでにテンプレートのアップデートもこれからどんどん増やすつもりです。!!
このテンプレートでは、丸をメインにイメージしました。
メインカラーは、黒とピンク!
多少落ち着いたイメージのテンプレートです。
【サンプル】
【ダウンロード】
■ちょっと工夫した所!
今回テンプレートにあるヘッダーの枠は、画像を変えても消えない様にしました。
CSSのレイヤーで枠とヘッダー画像を重ねているので、
ヘッダー画像を変えても枠は、ちゃんと表示されます。!!!
■最初に言ってたアップデートとは?
アップデートとは、テンプレートのバージョンアップすると言う所です。
たまにアップデータを配布したいと思います。
アップデートする事により今までのテンプレートをさらによくする事が可能です。
☆次のアップデート予告!!
フォームのデザインを追加!
その他修正!
次まアップデートは、いつになるか分かりませんが
近いうちに公開したいと思います。
結構複雑になりましたが綺麗に整えてコメントも付けて
初心者さんでも利用出来る様にしました～
ついでにテンプレートのアップデートもこれからどんどん増やすつもりです。!!
このテンプレートでは、丸をメインにイメージしました。
メインカラーは、黒とピンク!
多少落ち着いたイメージのテンプレートです。
【サンプル】
【ダウンロード】
■ちょっと工夫した所!
今回テンプレートにあるヘッダーの枠は、画像を変えても消えない様にしました。
CSSのレイヤーで枠とヘッダー画像を重ねているので、
ヘッダー画像を変えても枠は、ちゃんと表示されます。!!!
■最初に言ってたアップデートとは?
アップデートとは、テンプレートのバージョンアップすると言う所です。
たまにアップデータを配布したいと思います。
アップデートする事により今までのテンプレートをさらによくする事が可能です。
☆次のアップデート予告!!
フォームのデザインを追加!
その他修正!
次まアップデートは、いつになるか分かりませんが
近いうちに公開したいと思います。
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
フッターは、回り込みを解除します。
後は、幅を指定するだけです。
以上これだけです。
テンプレート「1234」を配布!!
皆さんおまたせしました～
新テンプレートを配布します。
名前は、「1234」です 毎回適当な名前ですみません。
夜中の作成なので^^;;
今回特徴は、画像を一切使わない
テンプレートです。
シンプルに仕上げました。
画像が無い分CSSが複雑です。
まだ初心者感のあるテンプレートですね^^;
サンプルページ
ダウンロード
ちょい工夫?
CSSにそのまま貼り付けしてください。
新テンプレートを配布します。
名前は、「1234」です 毎回適当な名前ですみません。
夜中の作成なので^^;;
テンプレートです。
シンプルに仕上げました。
画像が無い分CSSが複雑です。
まだ初心者感のあるテンプレートですね^^;
サンプルページ
ダウンロード
ちょい工夫?
img{
border-width: 5px;
border-color: #C0C0C0;
border-style: solid;
}
img:hover{
border-width: 6px;
border-color: #5B5B5B;
border-top-style: solid;
}
border-width: 5px;
border-color: #C0C0C0;
border-style: solid;
}
img:hover{
border-width: 6px;
border-color: #5B5B5B;
border-top-style: solid;
}
CSSにそのまま貼り付けしてください。
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ですね
まー大体やれば分かったと思うので後は、自由に検索して僕より説明の
うまい記事をみつけてください。
ちょっとだけCSS
最近色々CSS事でググっても
なかなかヒットしない情報があったので
ここで紹介したいと思います。
【マウスを当てると換わる効果】
CSSの指定でhoverを使うとマウスがあたると変わる効果を
指定できます。
例えば メニューにマウスを当てると背景が変わったり
画像にマウスを当てると画像が拡大するとか
CSSで出来る事なら何でも出来ます。
使い方例
このCSSは、背景を変えるCSSです
画像の周りの境界線の色を変える場合のCSS
【リンク文字の下線消去とリンク色変更】
下線消去
リンクの色は、普通に字の色指定といっしょです。
なかなかヒットしない情報があったので
ここで紹介したいと思います。
【マウスを当てると換わる効果】
CSSの指定でhoverを使うとマウスがあたると変わる効果を
指定できます。
例えば メニューにマウスを当てると背景が変わったり
画像にマウスを当てると画像が拡大するとか
CSSで出来る事なら何でも出来ます。
使い方例
#mame:hover{ background-color: #FF00FF; }
このCSSは、背景を変えるCSSです
画像の周りの境界線の色を変える場合のCSS
<style type="text/css">
img{ border-width: 10px; border-color: #66FFFF; border-style: solid; }
img:hover{ border-width: 10px; border-color: #FF00FF; border-style: solid; }
</style>
img{ border-width: 10px; border-color: #66FFFF; border-style: solid; }
img:hover{ border-width: 10px; border-color: #FF00FF; border-style: solid; }
</style>
【リンク文字の下線消去とリンク色変更】
下線消去
<style type="text/css">
a{ text-decoration: none; }
</style>
a{ text-decoration: none; }
</style>
リンクの色は、普通に字の色指定といっしょです。
