～jQueryで開閉式メニューを作る方法～ 今回はjavascriptのライブラリであるJQueryを使って開閉式メニューを作る方法を詳しく説明していきたいと思います。 レベル1 headタグの中にjQueryを使うためのURLを入れる まずjQueryを使うためにはあるURLを入力しな…

初心者のjavascript～開閉式メニューに挑戦～ 今回はjavascriptで開閉式メニューを作っていきたいと思います。初心者なので逆にめちゃめちゃく詳しいです。 レベル1 親メニューボタンと子メニューボタンの準備 自作の見出しのスタイルシートを自動で作成でき…

初心者のjavascript～thisの大実験～ javascriptのthisって難しいですよね！そこで今回はjavascriptのthisを使って色々実験しようと思います 実験1 そのままthisをアラート画面に出力してみる javascript HTML <script> function mythis1(){ alert(this); } </script> <button onclick="mythis1()">実行結</button>…

CSSのシャープ（#)idとドット(.)クラスの全て 今回はCSSのシャープ(#)とドット(.)について詳しく説明していきます。 レベル1 #について #はCSSではクラスではなくてidの時に使います。 次の例で見て下さい。 HTML CSS <div id="testid1">テスト</div> #testid1{ font-size:20px; } 実…

～タブで画面を切り替える方法上級編～ 前回のタブで画面を切り替える方法初級編では最低限の機能しかつけていませんでしたが、今回はそこに装飾を加えていって より実践で使える形にしていきます。 前回の記事はこちら↓↓になります。 ～タブで画面を切り替…

～タブで画面を切り替える方法初級編～ 今回はタブで画面を切り替える方法を説明していきます。 また一つずつ丁寧にどこよりも詳しく説明していきたいと思います。 他のサイトを見てドーーーンとコードが出てきて圧迫された方にもおすすめです。 今回は初級…

// 追加するmetaタグの作成 var newMeta = document.createElement("meta"); newMeta.setAttribute("name","robots"); newMeta.setAttribute("content","noindex"); // 作成したmetaタグをhead要素内末尾に追加 document.getElementsByTagName("head")[0].ap…

～javascriptとCSSアニメーションの融合～ 今回はより実践で使えるスライドショーを作っていきたいと思います。 CSSアニメーションとjavascriptをコラボさせてスライドショーを作っていきたいと思います。 レベル1 CSS(スタイルシート)の準備 スライドショー…

～CSSで画像を横にスライド～ 今回はCSS(スタイルシート)アニメーションを使って画像を横にスライドさせていきます。 後にjavascriptと組み合わせて完全なスライドショーを作るための布石となります。 どこよりも詳しく書いていくので初心者でもすぐにわかり…

～javascriptでスライドショー～ 今回はjavascriptでスライドショーを作っていきます。 よく企業のページとかでも写真がシャッシャッシャッと変わっているのありますよね。 そういうのを作っていきたいと思います。 相変わらずめちゃめちゃ詳しく書いていき…

～javascriptでsetIntervalの大実験～ いきなりボンってでるより一文字また数文字ずつ流れるように出てきたらおしゃれですよね！ ってことで今回はなめらかに文字を表示できるようにしていきたいと思います。 今回はsetIntervalの大実験です。たぶんどこより…

～初心者のcloneNode大実験～ clone...クローンっていうだけあって同じものを複製できるとかできないとか・・ よくわからないけどやっていきましょう！ 今日はjavascript～cloneNodeの大実験です。 果たしてプログラムはちゃんと動くのでしょうか？ 前回のto…

～初心者のtoggle(戸愚呂）大実験～ この見出しとかは全部→自分で作った自動ツール←(みなさんもクリック)で作っています。 毎回のこのサービスの提供でお送りしていきます。笑 枠のスタイルシート自動作成ツールもあります。 今日はjavascriptのtoggleの大実…

～初心者のjavascript配列大実験～ →早速自分で作った自動ツール←みなさんもクリックで見出しを作りました。 やっぱりすごい便利です。笑 今日はjavaの配列を大実験していきたいと思います。 果たしてプログラムはちゃんと動くのでしょうか？笑 初心者なので…

お題「今からプログラミング言語を学習するなら何を学ぶ？」 今日ははじめて雑記というものをしてみる。 そこではてなブロガーからのお題に答えてみました！ 私はjavascriptをはじめて1週間なんだけど 今日は開閉式ボタンを作っていてJquery"ってのがめちゃ…

例えばこんなシーンで…↓↓↓料理の記事で…料理の写真をいくつも並べて レシピだけ閉じたり開いたりできるようなボタンあったら便利だと思いませんか？それも自動で作れるツールを作成してみたい。これはうまくできるかわからないからあまり期待しないで笑今月…

// 追加するmetaタグの作成 var newMeta = document.createElement("meta"); newMeta.setAttribute("name","robots"); newMeta.setAttribute("content","noindex"); // 作成したmetaタグをhead要素内末尾に追加 document.getElementsByTagName("head")[0].ap…

// 追加するmetaタグの作成 var newMeta = document.createElement("meta"); newMeta.setAttribute("name","robots"); newMeta.setAttribute("content","noindex"); // 作成したmetaタグをhead要素内末尾に追加 document.getElementsByTagName("head")[0].ap…

// 追加するmetaタグの作成 var newMeta = document.createElement("meta"); newMeta.setAttribute("name","robots"); newMeta.setAttribute("content","noindex"); // 作成したmetaタグをhead要素内末尾に追加 document.getElementsByTagName("head")[0].ap…

// 追加するmetaタグの作成 var newMeta = document.createElement("meta"); newMeta.setAttribute("name","robots"); newMeta.setAttribute("content","noindex"); // 作成したmetaタグをhead要素内末尾に追加 document.getElementsByTagName("head")[0].ap…

この記事でわかること 誰でもブログにコピーボタンを実装できてそのコードの意味も全部わかります。またテキストエリアの装飾方法もわかります。プログラム？javascript？なにそれ？おいしいの？状態でも大丈夫です。コピペ用のスタイルシート、スクリプトは…

この記事でわかること 画像を回転させる方法がわかる みなさん、こんにちは。 今回は画像を回転させる方法です。 料理などの写真が回転していたらびっくりさせれますよね笑 今回はそれをしていきます。 まずアニメーションの基本は以下の記事も参考にして下…

この記事でわかること nth-childを使って行数によって設定を変える方法が絶対わかる みなさん、こんにちは。 今回は難しい言葉を使わずにnth-childを説明していきます。 行数によって色々設定を変えるには nth-child(); を使います。 簡単に言うと nth-child…

この記事でわかること ブログで文字を動かす方法がわかる みなさんこんにちは。 ブログで文字が動いてるってほぼほぼ見ないですよね。 そこで今回は文字を動かしてみたいと思います。 んっなんじゃこりゃぁ！と思わせてブログを読ませてみましょう。 ブログ…

p.clear{ float;clear; } この記事でわかること 画像にテキストを回りこませる方法がわかる みなさんこんにちは。 画像と文字を縦並びに配置するよりも..教科書風にしてスタイリッシュにブログを書いてみませんか？ ということで今回は画像にテキストを回り…

この記事でわかること 行間を狭めて入力したまま表示される方法がわかる こんにちは、今日はHTML,CSS復習の16回目となりました。 みなさんブログを書いていると勝手にpタグやdivタグが量産されて、行間が空きまくるってことないですか？ 今回はそのお悩み一…

この記事でわかること 簡単な表の作り方がわかる 今日は早くもHMTL,CSS復習の16回目となりました。塵も積もれば山となるですね。 簡単な表を作っていきたいと思います。 簡単な表の作り方 まずtableタグで全体を囲います 次のように表の最初と最後に使います <table></table>…

この記事でわかること Myブログ内に検索窓を設置する方法がわかる ブログってホームページと違って過去のページがすごく探しにくいよね そうだよね、そこがブログのデメリットだよね そのデメリットをなくす方法はあるの？ 実はあるんです。検索窓を設置すれ…