プログラミング奮闘記録

プラグラマーへ奮闘。PHP・Cakephp・JavaScript・isoアプリのコード勉強ブログです。その他の言語やツールなども使用します。

HTML5

レポンシブ対応 グローバルメニュー

jQueryとcssで実装。 メモのため。 実装は下記のサイトをしてくださいね。 cssのコード量が少ないので、 いろんなサイトを見て実装してみましたが、 cssのコードが少ない点がよいところかと。 デザインの修正がしやすいと思います。 ちなみに、メディアクエ…

画像の中央にテキスト並べる

.site-text p{ text-align: left; font-size: 12px; color: #fff; margin-bottom: 10px;} .site-info{ float: right; width: 400px; border: 1px solid #000; text-align: right; font-size: 12px;} .tel{ font-size: 30px; color: #fff; vertical-align:mid…

画像の中央にテキスト並べる

メモ。。。。。 teamsanta.info

ドロップダウンのグローバルメニュー(cssのみ)

メモだす!!! cssだけで下記で実装できました。 ri-mode.com コメントアウト部分を変更することで、実装できます。 あるがとうございます。

クリックの度画像切り替え

メモです。 またまたメモ。 残しておかないとブックマークがわやくちゃになる。。。www JS<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script src="js/btn_action.js" type="text/javascript"></script> JS $(function(){ var img_name = "images/top/top.png"; var img_name_over = "images/top/top.png"; $("#btn…

ツールチップ

メモです。 参考URL: クリックされたらツールチップを表示するスクリプトをjQueryで組んでみたwataame.sumomo.ne.jp JS <link rel="stylesheet" type="text/css" href="css/jquery.tgClickToolTip.css"><script src="js/jquery.tgClickToolTip.js" type="text/javascript"></script><script src="js/jquery1.8.1.min.js" type="text/javascript"></link>

ハンバーガーメニュー

メモです!! 探すのめんどくさいので。。 HTMLとCSSのみで実装可能 HTML <div class="hamburger-box"> <a class="btn"></a> <div class="drawr"> <ul id="menu"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー5</a></li> </ul> </div> </div> …

Htmlとcssたち。

最近ずっとhtmlとcssとにらめっこしています。 htmlとcssに関しては、数をこなして便利な記述を体に叩き込みしかないと 痛感しています。 数こなすことで、上達も早くなります。 というとより段取りがわかるので、早くなると思います。 いきなり、記述してい…

HTML 基本その5

その5になります! 今回は、HTML5のタグについてです。 そう! タグです。 というてもわからないことがあると思います。 そもそもタグとは、なんぞや?? これは、前回簡単に説明しましたね! 今回は、少し深くさまざまなタグについてご説明致します。 以前…

HTML 基本その4

昨日は、HTMLの書き方についてでしたが、 今回は、少し深い内容になっていきます。 つまり、bodyのWEBサイトの見える部分です。普段みなさんが見ているところになります。 昨日の内容を変更していきましょう! 昨日はこれで完成でした。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>プログラミング</title> </head> <body></body></html>…

HTML 基本その3

今回は、HTMLの記述の方法になります。 前回は、なんとなく書き方にも少し触れましたが、 ぜんぜんざっくりしすぎで、わからないと思います。 ざっくりのレベルでもないと思います。 適当ですね。w まずは、テキストエディターを開いてください。 winでは、…

HTML5 基本その2

昨日に続き、今回もHTML5についてです。 今回は、HTML5の基本記述に関してです!! 今までのHTML4は、このような記述になっております。 <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>プログラミング勉強</title></meta></head></html>