2022年11月のうつ病の一人暮らし新着記事

jQueryで開閉式メニューを作ってみた

～jQueryで開閉式メニューを作る方法～今回はjavascriptのライブラリであるJQueryを使って開閉式メニューを作る方法を詳しく説明していきたいと思います。レベル1 headタグの中にjQueryを使うためのURLを入れるまずjQueryを使うためにはあるURLを入力しないといけません。はてなブログでは設定→詳細設定をクリックして下の方にある<head>要素にメタデータを追加という所に次のように入力します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></scri…

2022/11/30 23:42

javascriptで開閉式メニューを作ってみた

初心者のjavascript～開閉式メニューに挑戦～今回はjavascriptで開閉式メニューを作っていきたいと思います。初心者なので逆にめちゃめちゃく詳しいです。レベル1 親メニューボタンと子メニューボタンの準備自作の見出しのスタイルシートを自動で作成できるツール https://purechan22.hatenablog.com/entry/2022/11/17/155515 があるので今回もそれを使っていきたいと思います。親メニューで一つのCSS、子メニューで一つのCSSにしていきたいと考えてます。 HTML 親CSS 子CSS <p class="menu" id="oya">…

2022/11/29 18:39

初心者のjavascript～thisの大実験～

初心者のjavascript～thisの大実験～ javascriptのthisって難しいですよね！そこで今回はjavascriptのthisを使って色々実験しようと思います実験1 そのままthisをアラート画面に出力してみる javascript HTML <script> function mythis1(){ alert(this); } </script> <button onclick="mythis1()">実行結果を見る</button> 実行結果を見る結果は [object Window] と出ました。 windowのオブジェクトが入ってるんですね。実験2 何か変数を定義…

2022/11/28 19:47

CSSのシャープ（#)idとドット(.)クラスの全て

CSSのシャープ（#)idとドット(.)クラスの全て今回はCSSのシャープ(#)とドット(.)について詳しく説明していきます。レベル1 #について #はCSSではクラスではなくてidの時に使います。次の例で見て下さい。 HTML CSS <div id="testid1">テスト</div> #testid1{ font-size:20px; } 実際は次のように表示されます。テストとにかくクラスはドット(.)、idはシャープ(#)と覚えておくといいです。レベル2 idのもう一つの書き方通常は<div id="testid2">内容</div>のように記述しますが <input …

2022/11/27 19:08

タブで画面を切り替える方法上級編

～タブで画面を切り替える方法上級編～前回のタブで画面を切り替える方法初級編では最低限の機能しかつけていませんでしたが、今回はそこに装飾を加えていってより実践で使える形にしていきます。前回の記事はこちら↓↓になります。～タブで画面を切り替える方法初級編～ - ★うつ病の一人暮らし★外で働かないで生きていくレベル1 前回の初級編のスタイルシートと記事中の記述・スタイルシート <style> .tabwaku{ border:2px solid aquamarine; width:150px; height:50px; margin: 0 auto; padding:10px; back…

2022/11/27 12:27

～タブで画面を切り替える方法初級編～

～タブで画面を切り替える方法初級編～今回はタブで画面を切り替える方法を説明していきます。また一つずつ丁寧にどこよりも詳しく説明していきたいと思います。他のサイトを見てドーーーンとコードが出てきて圧迫された方にもおすすめです。今回は初級編なので最低限の機能だけです。レベル1 ラジオボタンを作成するまずはラジオボタンを作成していきます。今回はメニュー、写真、レシピと画面が切り替わるようにしていきます。ラジオボタンなのでtype="radio"を使います。またidとnameには好きな名前を入れておきます。ただしnameは全て同じ名前にします。 <input id="menu" ty…

2022/11/27 01:23

自動でスライドショーが誰でも作れるツールが完成しました。是非ご利用下さいませ。

～スライドショー自動作成ツール～今回はスライドショーが簡単に作れる自動ツールを作っていきます。何もわからない人でも簡単にブログにスライドショーが設置できます。写真のURL、タイトルを入力するだけで後は全部自動となっています。自動ツール第一弾と第二弾今回は自動ツール第三弾です。第一弾と第二弾は下からご利用できます。出来上がったサンプルを見ながら自在にスタイルシートが作れます。 purechan22.hatenablog.com purechan22.hatenablog.com 写真のURL、タイトルを入力するスタート写真がスライドショー開始画面の写真となります。スタート写真ス…

2022/11/26 10:13

javascriptとCSSアニメーションを融合させてのスライドショー提供:カップめんリスペクト

～javascriptとCSSアニメーションの融合～今回はより実践で使えるスライドショーを作っていきたいと思います。 CSSアニメーションとjavascriptをコラボさせてスライドショーを作っていきたいと思います。レベル1 CSS(スタイルシート)の準備スライドショーが始まった後のCSSを用意します。これは私の↓↓↓の記事を参考にしてください。画像を横にスライドさせるアニメーションを使います。 purechan22.hatenablog.com CSSはこんな感じになります。 1回ずつ写真を入れ替えるのでanimation-iteration-countを1、また常に順方向にするの…

2022/11/24 17:32

CSSで画像を横にスライドさせる方法提供：カップめんリスペクト

～CSSで画像を横にスライド～今回はCSS(スタイルシート)アニメーションを使って画像を横にスライドさせていきます。後にjavascriptと組み合わせて完全なスライドショーを作るための布石となります。どこよりも詳しく書いていくので初心者でもすぐにわかります。レベル1 アニメーションの基本のスタイルシートまずは最低これだけはっていう基本の型があるので作っていきます。 animation-name:"アニメーションの名前";でアニメーションに名前を付け animation-duration:"時間（秒数など)s";で一回のアニメーションにかかる時間の設定をし animation-tim…

2022/11/24 10:39

javascriptでスライドショーを作る方法をどこよりも詳しく説明してます

～javascriptでスライドショー～今回はjavascriptでスライドショーを作っていきます。よく企業のページとかでも写真がシャッシャッシャッと変わっているのありますよね。そういうのを作っていきたいと思います。相変わらずめちゃめちゃ詳しく書いていきます。レベル1 スライドショーをはじめる画面の写真の準備実際には次のように記述します。 <img src="画像のURL" id=startpic"> レベル2 スライドショーの写真の準備まずは写真の準備です。好きなまんが日本昔話から取ってこようと思います。 > ここは写真のURLだけ準備すれば大丈夫です。まだ掲載する必要はありま…

2022/11/23 22:55

javascriptでsetIntervalの大実験めちゃめちゃ詳しいです

～javascriptでsetIntervalの大実験～いきなりボンってでるより一文字また数文字ずつ流れるように出てきたらおしゃれですよね！ってことで今回はなめらかに文字を表示できるようにしていきたいと思います。今回はsetIntervalの大実験です。たぶんどこよりも詳しく書いています。レベル1 メニューを開くボタンの作成メニューを開く実際の記述はこんな感じです。 <div class="javawaku" id="menu">メニューを開く</div> クリックしてみて下さい。実際にプログラムが動きますレベル2 ボタンを押した後に出る枠の作成メニューを開くをクリックした後に…

2022/11/23 13:22

javascript～cloneNodeの大実験～めちゃめちゃわかりやすいです。ベビーブームの到来です笑

～初心者のcloneNode大実験～ clone...クローンっていうだけあって同じものを複製できるとかできないとか・・よくわからないけどやっていきましょう！今日はjavascript～cloneNodeの大実験です。果たしてプログラムはちゃんと動くのでしょうか？前回のtoggleではスタイルシートのクラスは替えれたけど文字を変えるのに苦労しました。レベル1 クローン（複製）化する予定の箱を作る。箱できました！実際の記述はこんな感じです <div class="javawaku" id=hako" >箱</div> レベル2 id=hakoの要素を取る var hako =do…

2022/11/21 14:48

javascriptのtoggle(戸愚呂）大実験～めちゃわかりやすいです

～初心者のtoggle(戸愚呂）大実験～この見出しとかは全部→自分で作った自動ツール←(みなさんもクリック)で作っています。毎回のこのサービスの提供でお送りしていきます。笑枠のスタイルシート自動作成ツールもあります。今日はjavascriptのtoggleの大実験をしていきたいと思います。噂によると何かをつけたり外したりできるとかできないとか・・・果たして今日もプログラムはちゃんと動くのでしょうか？レベル1 これをクリックしたら何かが起きるボタンを作るまたまた自作の枠のスタイルーシート自動作成ツールの出番です。少々お待ちください。ここクリック!? できました！実際の記述は…

2022/11/20 09:59

初心者のjavascript配列大実験のコーナー～めちゃめちゃわかりやすいです

～初心者のjavascript配列大実験～ →早速自分で作った自動ツール←みなさんもクリックで見出しを作りました。やっぱりすごい便利です。笑今日はjavaの配列を大実験していきたいと思います。果たしてプログラムはちゃんと動くのでしょうか？笑初心者なのでかなりわかりやすいと思います。難しい言葉を使えないので笑 divで囲んでspanクラスをたくさん作る <div id="tabemono"><span class="jikken1" javaclass="osushi1">お寿司</span><span class="jikken1" javaclass="yainiku1">焼肉</s…

2022/11/19 21:47

初めての雑記に挑戦してみたお題「今からプログラミング言語を学習するなら何を学ぶ？」

お題「今からプログラミング言語を学習するなら何を学ぶ？」今日ははじめて雑記というものをしてみる。そこではてなブロガーからのお題に答えてみました！私はjavascriptをはじめて1週間なんだけど今日は開閉式ボタンを作っていてJquery"ってのがめちゃくちゃ便利なことに気付いたので断然jqueryを学びたいです。今日はお昼から初めはjavascriptだけで開閉式ボタンを作っていたのですがそれはもう大変なこと大変なこと。。。えらい苦労した上に途中で挫折してふとjqueryってのが出てきて調べてみるとコードがなんと・・5行くらいでした。笑今までの苦労は何だったのっていう感じで…

2022/11/18 17:46

例えばレシピを開いたり閉じたりできるような開閉式ボタン作りたい

例えばこんなシーンで…↓↓↓料理の記事で…料理の写真をいくつも並べてレシピだけ閉じたり開いたりできるようなボタンあったら便利だと思いませんか？それも自動で作れるツールを作成してみたい。これはうまくできるかわからないからあまり期待しないで笑今月のアクセス数の目標が300でしたが早くも266になりました。ありがとうございます🌸とりあえずは毎月100ずつアクセスが増えていってくれればいいです。

2022/11/18 07:57

見出しのスタイルシートを自動で作成できるツールが完成しました

・出来上がったサンプルを見ながら自在に見出しのスタイルシートが作れます。・CSSやHTMLタグのわからない方でもそのまま記事に張り付けてすぐ書くことができます。・2022年11月17日サービススタート。不具合を修正しつつさらに機能を増やしていきます。枠のスタイルシート自動作成ツールはこちらです。文字の中央寄せする？しないする見出し枠自体の中央寄せする？しないする枠の幅を指定する（指定がない方はそのままでOK) 指定しない 50px 100px 150px 200px 250px 300px 350px 400px 450px 500px 550px 600px 行高の指定（…

2022/11/17 15:55

今日から見出しのスタイルシートを自動で作成できるツールを作ります。

枠のスタイルシート自動作成ツールに続き今日から見出しのスタイルシートを自動で作成できるツールを作ります。あらゆるパターンの見出しを作れるようにしていきます 2日~3日で完成予定なので今のうちに読者登録枠の自動作成ツールにブックマークお願いします。笑 purechan22.hatenablog.com

2022/11/16 07:25

枠のスタイルシートが自動で作成できます 11月15日バックアップ版

2022年11月15日バックアップバージョン HTMLタグやスタイルシートが全くわからない方でも使えるようになりました！コピペ機能を実装完成には近づいてきてますがまだ機能を増やしていきたいと思います。こんな機能を増やしてほしいというのがあればコメントを頂ければと思います。ソフトより機能は劣るけどソフトの1000倍わかりやすいを目指して精進していきます。 2つ以上のパターンを作る場合は半角英数字で好きな名前を入力例 waku2：枠のサイズを指定する（指定がない方はそのままでOK) 幅指定しない 50px 100px 150px 200px 250px 300px 350px 400…

2022/11/15 17:52

自動スタイルシート作成ツール第二段蛍光線を自在にあやつれるツールはじめちゃいます。

第一弾がかなり好調だったので第二段自動ツール作成はじめちゃいます。蛍光マーカー線のスタイルシートが、出来上がったサンプルを見ながら自動で作成できるツールとなる予定です。この調子で自動ツールをどんどん作っていきますので、宜しくお願いします。 ↓第一弾はこちら↓ ・めちゃくちゃ便利！・枠のスタイルシートが自在に作れてコピペ機能も搭載！・HTMLタグやスタイルシートが全くわからない人でも作れます。・できあがったサンプルを見ながら作れます。・色も系統別に分かれてて100種類ほどから選べます。 purechan22.hatenablog.com

2022/11/14 17:57

枠のスタイルシートを自動で作成できるよ！便利すぎて笑う HTML,CSS復習24

2022年11月14日仮の仮サービススタート笑更新内容 HTMLタグやスタイルシートが全くわからない方でも使えるようになりました！コピペ機能を実装、そのままHTML編集に張り付けて記事がかけるようになりました。そのまま張り付けるだけ！ほかのブログやホームページにも使えます。 2022年11月15日更新内容・記事の一部だけ蛍光マーカーが引けるようになりました。マーカーの色、文字のサイズ、マーカーの線の太さを指定できます。・サンプル表示に不具合が出ていた問題を修正しました。・枠(BOX)にシャドウ（影）がつけれるようになりました。・枠のサイズが設定できるようになりました。完成には近づいて…

2022/11/13 07:21

はてなブログにコピーボタンを実装する方法を難しい言葉を使わずに説明してみた HTML,CSS復習22

この記事でわかること誰でもブログにコピーボタンを実装できてそのコードの意味も全部わかります。またテキストエリアの装飾方法もわかります。プログラム？javascript？なにそれ？おいしいの？状態でも大丈夫です。コピペ用のスタイルシート、スクリプトはページの最後にあります。こんにちは。ブログ(はてなブログ)にコピーボタンを実装しようとして他のサイトを見てみたら難しい言葉が並んでる... javascript...何それ？おいしいの？コピペして使おうと思っても作動しない！そんな感じで無理って思って諦めたことはありませんか？実ははてなブログではサポートしていない機能があるのでややこし…

2022/11/12 08:31

画像を回転させるアニメーションの方法 HTML,CSS復習21

この記事でわかること画像を回転させる方法がわかるみなさん、こんにちは。今回は画像を回転させる方法です。料理などの写真が回転していたらびっくりさせれますよね笑今回はそれをしていきます。まずアニメーションの基本は以下の記事も参考にして下さい。ブログで文字をジャンプ,揺らして注目させる方法 HTML,CSS復習20 - ★うつ病の一人暮らし★外で働かないで生きていく画像を回転させるには画像を回転させるにはrotateを使いますがまずはアニメーションの基本のスタイルシートです。 img.rotate{animation-name:kaiten1; /*アニメーションの名前の設定*/…

2022/11/11 17:34

nth-childについてわかりやすく説明してみた HTML,CSS復習20

この記事でわかること nth-childを使って行数によって設定を変える方法が絶対わかるみなさん、こんにちは。今回は難しい言葉を使わずにnth-childを説明していきます。行数によって色々設定を変えるには nth-child(); を使います。簡単に言うと nth-child(1)で一番目 nth-child(2)で二番目 nth-child(3)で三番目ということです。それだけのことです。例えば p.nth-child(1);{text-align:center;} ならpタグの一番目が中央寄せになります。また奇数、偶数行でわけることもできます。奇数行の場合はnth-chi…

2022/11/11 16:12

ブログで文字をジャンプ,揺らして注目させる方法 HTML,CSS復習19

この記事でわかることブログで文字を動かす方法がわかるみなさんこんにちは。ブログで文字が動いてるってほぼほぼ見ないですよね。そこで今回は文字を動かしてみたいと思います。んっなんじゃこりゃぁ！と思わせてブログを読ませてみましょう。ブログで文字を動かすにはまずブログで文字を動かすには animation-name:"好きな名前"; を使います。今回は名前をugoki1にします。 animation-name:ugoki1; ・一回のアニメーションの往復時間を指定します往復時間指定は animation-duration:"時間"s; を使います。今回は1秒にしてみます。 anim…

2022/11/11 14:29

ブログを教科書風にしておしゃれにする方法 HTML,CSS復習18

p.clear{ float;clear; } この記事でわかること画像にテキストを回りこませる方法がわかるみなさんこんにちは。画像と文字を縦並びに配置するよりも..教科書風にしてスタイリッシュにブログを書いてみませんか？ということで今回は画像にテキストを回りこませる方法を紹介していきます。なかなかここまで凝っているブログはみないのでおしゃれですよ🌸 画像にテキストを回りこませるには画像にテキストを回りこませるには"float"というのを使うんです。なんのことかよくわからないと思うので実際にやってみましょう。・左に画像を置きたい場合スタイルシート img.left{ float…

2022/11/11 10:47

<pre> 行間を狭めて入力したまま表示される<br>タグを使わないいい方法 HTML,CSS復習17

この記事でわかること行間を狭めて入力したまま表示される方法がわかるこんにちは、今日はHTML,CSS復習の16回目となりました。みなさんブログを書いていると勝手にpタグやdivタグが量産されて、行間が空きまくるってことないですか？今回はそのお悩み一気に解決できるpreタグについて紹介していきます。 <pre>タグの便利な使い方 <pre>タグを使うと入力したままそのまま表示されるのですごい便利なんです。改行や空白もそのまま表示できて<br>タグを使わないでいいです。またそれにより行間を狭めることができます。ただしそのままpreタグを使うと背景が黒くなって枠も勝手についてしまうので…

2022/11/11 08:48

簡単な表を作ってみた HTML,CSS復習⑯

この記事でわかること簡単な表の作り方がわかる今日は早くもHMTL,CSS復習の16回目となりました。塵も積もれば山となるですね。簡単な表を作っていきたいと思います。簡単な表の作り方まずtableタグで全体を囲います次のように表の最初と最後に使います <table> </table> 次に一行目を作っていきます。表の一行目は項目ですよね。表の項目はthタグを使います。また一行一行はtrタグで区切ります。 thタグの背景は薄い青色で文字は太くしてみます。スタイルシートには次のように記述します。 th.koumoku{background-color:lightcyan; /*背景…

2022/11/02 11:00

商人放浪記の美女・家来の取る順番がわかる

この記事でわかること商人放浪記の美女、家来、どれから取ればいいかわかる幸運大賞の美女家来ってどれから取るか悩むうんうん、いっぱいいるからねどれから取ればいいの？美女の駅使→家来の怪盗、厳先生の順番で取ればいいのよ美女・家来の取り方の順番まずは美女の駅使→厳先生、怪盗を取りましょう。なぜなら・・・・駅使のご縁家来が怪盗、厳先生・怪盗、厳先生も幸運大賞で手に入るからです。次に行商の相手の体力がすごくてつらくなってくるので、家来の売上を上げるために残りの家来を取っていきます。家来も全部取り終えたら、次は美女の”雪山の少女"を取りましょう。これはご縁家来が、開印状を20個…

2022/11/01 18:20

自分のブログ内を検索してもらえるようにしてみた HMTL,CSS復習⑮

この記事でわかること Myブログ内に検索窓を設置する方法がわかるブログってホームページと違って過去のページがすごく探しにくいよねそうだよね、そこがブログのデメリットだよねそのデメリットをなくす方法はあるの？実はあるんです。検索窓を設置すれば過去の記事から読者が知りたい情報を探してもらえるの検索窓を作るにはまず編集モードを見たままモードからMarkdownモードなどに変えてください ↑これが一番重要です。次に検索フォームを作ります。 form action="自分のブログのURL"を入れます。 <form action="http://hatena.blog.ne.jp/purec…

2022/11/01 17:29