出来上がったサンプルを見ながら、ド素人の方でも自動でスタイルシートを作れるツールなど、ブログでありながらWEBサービス的なものも配信しています。他ブログに特化したスタイルシートのテクニックを紹介しています。
公立高校入試対策第20回 関数の応用問題 プリントバージョンは第8回
今回は前回、前々回に引き続き関数の応用問題の解説をしています。 プリントバージョンはこちらから見ることができます。 合計得点も出ます また問題に関する質問は当面の間、ツイッター、コメント欄で受け付けています。 第1問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を見る 第2問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を見る 第3問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を見る 第4問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を見る 第5問 \[ \] 答え 解説を見る 正解なら…
今回は前回に引き続き関数の入試問題の中でも応用問題の解説をしています。 次回も引き続き関数の応用問題を解説していく予定です。 プリントバージョンはこちらから見ることができます。 プリントバージョンは家やコンビニなどで印刷して自由に使うことができます 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を見る 第2問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を見る 第3問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を見る 第4問 \…
公立高校入試対策第18回 プリントバージョン第6回 関数の応用問題
今回は関数の応用問題を解くための武器を使えるようになる問題と 入試問題とその解説となっています。 実は武器を使い方をマスターすることで関数の応用問題のほとんどを簡単に解くことができるようになるんです。 プリントバージョンはこちらから見ることができます。 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を見る 第2問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を見る 第3問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を見る 第4問…
公立高校入試対策第17回 お正月チャレンジ 計算練習39問 制限時間5分
今回はお正月チャレンジということで計算練習39問 制限時間5分です。 5分以内に全問正解するまで何度も何度も反復しましょう！ お正月に勉強して神様の気持ちも動かそう☆ プリントバージョンはこちらから見ることができます。 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を見る 第2問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を見る 第3問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を見る 第4問 \[ \] 答え 解説を見る 正…
公立高校入試対策第16回 プリントバージョンは第4回 メインテーマ 統計
今回は統計をメインテーマに対策問題を作りました。 手を抜きがちなテーマです。 中央値、相対度数、第一四分位数など今一度確認しておきましょう！ プリントバージョンはこちらから見ることができます。 プリントバージョンの方は家、コンビニなどで印刷して使うことができます。 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を見る 第2問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を見る 第3問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を…
今回は小問集合のあらゆるパターンの20問セットです。 プリントバージョンはこちらから見ることができます。 家やコンビニで印刷して自由に使うことができます。 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を見る 第2問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を見る 第3問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を見る 第4問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を見る 第5問 \[ \]…
公立高校入試対策第14回 小問集合のあらゆるパターン練習 プリントバージョンあり
今回のセットは小問集合のあらゆるパターンを集めた20題となっています。 明日も全国の入試問題から穴のないように問題パターンを集めて解説してきたいと思います。 プリントバージョンはこちらから見れます。 家、コンビニなどで印刷して自由に使うことができます。 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を見る 第2問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を見る 第3問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を見る 第4問…
公立高校入試対策第13回 線分比、相似比、面積比など 今日からプリントバージョンあり
今回からなんとプリントバージョンもできました。 家、コンビニで印刷してご利用できます。 セブンイレブンでプリントする場合はネットプリントのアプリから印刷することができます。 プリントバージョンはこちらから見ることができます。 今回のテーマは線分比、相似比、面積比などとなっています。 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を見る 第2問 \[ \] 答え 解説を見る 正解ならクリックする ここまでの合計点数を見る 第3問 \[ \] 答え 解説を見る 正解ならクリックする こ…
相似の証明と整数問題のセットです。 深夜にかけてまだ整数の問題を増やす予定です。 意外と大事なので 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ \begin{array}{l} 三角形ABCと三角形CDBが相似になることを証明せよ\\ という問題があったとする\\ \\ まずすべきことは何ですか？ \end{array} \] 答え 解説を見る \begin{array}{l} \vartriangle ABC∽ \vartriangle CDBになることを証明せよってことは\\ どことどこが対応するか答えを教えてくれている\\ のと同じです…
公立高校入試対策第11回 問題と解説 色々なグラフの交点と面積、体積など
今回は比例、反比例や一次関数、二次関数などのグラフの交点の座標や グラフと面積、体積に関する問題がメインの20問セットとなっています 今回は20分以内で解けるまで繰り返し頑張っていきましょう！ 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ 点A,Bの座標をそれぞれ求めよ。 \] 答え 解説を見る \begin{array}{l} y=xをy=\frac{15}{x} の交点の座標を求めます。\\ \\ 交点と言われたら連立方程式です。\\ \\ x=\frac{15}{x}\\ \\ 両辺にxをかけます。\\ \\ x^{2} =15\\ x=…
公立高校入試対策第10回 問題と解説 比例・反比例・一次関数のグラフ
今回のセットは比例 反比例 一次関数のグラフの座標を求める問題20問です。 何回も解いて20問を20分以内で解けるようになるまで繰り返しましょう！ グラフの色々問題を解くための土台となります。 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ グラフの傾きと切片が＋か－か答えよ \] 答え 解説を見る \begin{array}{l} グラフが右肩上がりなら傾きは＋です。\\ \\ 切片はy軸との交点を見ます。\\ \\ 今回はーなので切片は－です。\\ \\ 答え 傾き＋ 切片－ \\ この形のグラフを一次関数といいます。 \end{array}…
公立高校入試対策第9回 計算練習50問 制限時間5分のクリスマスチャレンジ 問題と解説
今回はクリスマスチャレンジです。 計算50問のセットとなっています。 最初は何分かかってもいいんです。 5分で全部できるようになるまで何度も何度も反復しましょう 計算の余裕度がアップしたら不思議と他の理解が進み世界が変わります。 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ -3+8を計算せよ \] 答え 解説を見る \begin{array}{l} -3+8=5\\ \end{array} 正解ならクリックする ここまでの合計点数を見る 第2問 \[ 8-( -2) +3を計算せよ \] 答え 解説を見る \begin{array}{l} 8…
今回は動く点の問題25問セットです。 超基礎から入試で戦えるまでのレベルまで 問題を解くだけで達成することができるセットとなっています。 入試まで毎日対策問題を作っていきます。 合格をもぎ取りましょう。 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ 毎秒1cmで1秒動くと何cm動きますか？ \] 答え 解説を見る \begin{array}{l} 毎秒ってことは\\ 1秒間に1cm動くことです。\\ \\ 1秒なので1cm動きます\\ \\ 答え 1cm \end{array} 正解ならクリックする ここまでの合計点数を見る 第2問 \[ 毎秒…
今回のセットは二次関数がテーマとなっています。 グラフを見て確実に座標が求められるように訓練していきましょう。 何度も反復したらできるようになってきます。 合格を引き寄せましょう！ 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ y=x^{2} でx=2のときのyの値を求めよ。 \] 答え 解説を見る \begin{array}{l} y=x^{2} にx=2を代入します。\\ \\ y=2^{2} =4\\ \\ 答え y=4 \end{array} 正解ならクリックする ここまでの合計点数を見る 第2問 \[ y=2x^{2} でx=3のとき…
今回は分数基礎からわかるセット33問です。 分数計算の苦手な方は繰り返し解いて頑張っていきましょう！ 分数計算の少ない県はありますが、出題率は日本全国100%です。 分数を制する者は受験を制します！ 入試まで毎日対策問題を作っていきます。 ぶっちぎりでの合格を目指しましょう。 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ 2に何をかけたら6になりますか？ \] 答え 解説を見る \begin{array}{l} 2\times 3=6\\ \\ 答え 3\\ \\ これが実は分数計算の第一歩です。 \end{array} 正解ならクリックする …
今回のメインテーマは一次関数の交点、一次関数と面積 一次関数と体積です。 他はいつもの計算です。 受験まで毎日対策問題を作っていきます。 絶対に合格しましょう！ 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ y=2x+3のグラフでx軸との交点の座標を求めよ。 \] 答え 解説を見る \begin{array}{l} x軸との交点なのでy座標は0\\ \\ これをy=2x+3に代入して\\ xを求めます。\\ \\ 0=2x+3\\ 2x+3=0\\ 2x=-3\\ x=-\frac{3}{2}\\ \\ 答え ( x,y) =\left( -\…
今回のセットは比、三平方の定理、素数がメインテーマの20問です。 毎日入試まで対策問題を作っていきます。 頑張って合格を勝ち取りましょう！ 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ \begin{array}{l} 3:x=1:4\\ xを求めよ \end{array} \] 答え 解説を見る \begin{array}{l} 内側同士かけたもの=\\外側同士掛けたもの\\ と覚えましょう\\ \\ x\times 1=3\times 4\\ x=12\\ \\ 答え x=12 \end{array} 正解ならクリックする ここまでの合計点…
今回は面積と体積がメインで 後はいつもの計算、方程式を立てる問題のセットとなっています。 入試まで毎日対策問題を作っていきます。 頑張っていきましょう！ 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ 底辺が5cm高さが4cmの三角形の面積を求めよ \] 答え 解説を見る \begin{array}{l} 三角形の面積は\\ 底辺\times 高さ\times \frac{1}{2}\\ \\ なので\\ 5\times 4\times \frac{1}{2}\\ =10\\ \\ 答え\ 10cm^{2} \end{array} 正解ならクリッ…
今回は公立高校の入試対策として小問集合の対策問題を用意しました。 今回のセットは因数分解、解の公式、時速、分速などがメインとなっています。 入試まで毎日問題を作っていきたいと思います。 12月～2月はツイッターでも質問を受け付けています。 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ ( x-2)( x+3) を展開せよ \] 答え 解説を見る \begin{array}{l} ( x-2)( x+3)\\ =x^{2} +( -2+3) x-2\times 3\\ =x^{2} +x-6\\ \\ ( x+A)( x+B) =x^{2} +(…
今回は高校入試の大問1番などでよく出てくる小問集合の対策の問題を用意しました。 今回はその第一弾です。 入試までどんどん対策の問題を出していきたいと思います。 中堅の公立高校ではこの小問集合ができるかできないかが運命の分かれ目になります。 高校入試が近づいてきていますので12月~2月までは 特別に誰でもツイッターで質問し放題とします。 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ -5+1 \] を計算して下さい 答え 解説を見る \begin{array}{l} -5+1=-4\\ \end{array} 正解ならクリックする ここまでの合計…
今回は二次関数の場合分けの基礎がわかる3問を用意しました。 繰り返しやりましょう。 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ y=( x-a)^{2} でx\geqq 0の時の最小値を求めよ \] を計算して下さい 答え 解説を見る 二次関数 \begin{array}{l} y=f( x) とおく\\ \\ 1) a\geqq 0のとき\\ \\ x=aで最小値0をとる\\ \\ 2) a 正解ならクリックする ここまでの合計点数を見る 第2問 \[ \begin{array}{l} 0\leqq x\leqq aにおけるy=-x^{2}…
今回は平方根の計算の二重根号に関する問題を10題用意しました。 詳しい解説があるので、この問題をすることで二重根号が完璧に理解できます。 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ \sqrt{7+2\sqrt{6} \ } \] を計算して下さい 答え 解説を見る \begin{array}{l} \sqrt{7+2\sqrt{6} \ }\\ \\ 二重根号を外す時は\\ \sqrt{( \ \ \ \ )^{2}} の形にします。\\ \\ つまり\\ \\ \sqrt{(\sqrt{A} \ +\sqrt{B} \ })^{2}\\ …
初心者をやっつけろ！平方根(ルート√)計算の中級問題と解説13問
今回は 平方根√計算超基礎問題39問 やばすぎてもこれだけやればなんとかなる笑 - かなこと仲良く数学、無料のオンライン学習塾 と 平方根√(ルート)の有理化の基礎が完璧になる12問 - かなこと仲良く数学、無料のオンライン学習塾 が終わった方を対象に平方根の計算、中級問題を13問用意しました。 ここまで完璧にしたら上級者の入り口が見えてきます。 頑張っていきましょう！ 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ \ 3\sqrt{12} \times \sqrt{2} -3\sqrt{6} \] を計算して下さい 答え 解説を見る \beg…
今回は平方根の有理化の基礎問題が終わった方を対象に、上級者に近づくための10問を用意しました。 この10問をやりこめば平方根の有理化で困ることはまずないでしょう。 平方根√(ルート)の有理化の基礎が完璧になる12問 - かなこと仲良く数学、無料のオンライン学習塾 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ \frac{1}{\sqrt{2\ } -\sqrt{3}} \] を計算して下さい 答え 解説を見る \begin{array}{l} \frac{1}{\sqrt{2\ } -\sqrt{3}}\\ 下にルートがあれば有理化をしたいので…
今回は平方根√(ルート)の有理化の基礎が完璧になる12問を作成しました。 有理化が全くわからない方でもこれで基礎が完璧になります。 これを完璧にして初級者へとレベルアップしていきましょう！ 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ \frac{1}{\sqrt{2}} \] を計算して下さい 答え 解説を見る \(\frac{1}{\sqrt{2}}\) 下にルートがあったらそれと同じものを上にも下にもかけます。それが有理化です。 そうすると\(\sqrt{2}\times\sqrt{2}\)のハッピーセットができて下のルートが消えます。 …
平方根√計算超基礎問題39問 やばすぎてもこれだけやればなんとかなる笑
今回はルート√ 平方根の超基礎問題を作りました。 めちゃめちゃやばくてもこれだけやれば定期テストはなんとかなります！ また当ブログは不登校の生徒も応援しています。 基礎なので時間無制限です。繰り返しましょう。 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ \sqrt{5} +\sqrt{5} \] を計算して下さい 答え 解説を見る \(\sqrt{5} +\sqrt{5} =2\sqrt{5}\) \(\sqrt5\)が2つと考えると簡単です。 みかんみたいなもんです。 正解ならクリックする ここまでの合計点数を見る 第2問 \[ \sqrt…
今回は因数分解の中でも難しい問題を作成しました。 時間をかけてもいいので何回も反復していきましょう 時間目安 50分 7問のセットとなっています。 全部解けるようになったらトップレベルで戦えます。 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ a^2 b+ab^2 +ab-a-b-1 \] を因数分解して下さい。 答え 解説を見る \(a^2 b+ab^2 +ab-a-b-1\) \(=ba^2 +( b^2 +b-1)a-b-1\) ここでたすき掛けを利用します。 \(1 b+1 \longrightarrow b(b+1)\) \(\tim…
因数分解の基本問題33問の問題と詳しい解説 これだけで70点は取れるよ
今回は因数分解の基礎問題をたくさん解説していきたいと思います。 中学生、高校生が対象となります。 この33問を繰り返すだけでも定期テストで70点は取れるでしょう。 当ブログは不登校の生徒も応援しています。 基礎なので時間無制限 自信のある人は時間目安60分で解いてみて下さい。 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ x^2-4 \] を因数分解して下さい。 答え 解説を見る \(A^2-B^2=(A+B)(A-B)\)の公式を使います。 ここでは\(A=x\) \(B=2\)なので \(x^2-4\) \(=(x^2-2^2)\) \(=…
今回は因数分解の中でもたすき掛けのあらゆるパターンの問題を作っています。 たすき掛けといってもなめてかかってはいけません。 結構なパターンがあるので練習してきましょう！ 目安時間50分 10問のセットとなります。 全問正解だとかなりの力があります。 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ 6x^2+7x-3 \] を因数分解して下さい。 答え 解説を見る \(2 3 \longrightarrow9\) \(\times\) \(3 -1 \longrightarrow-2\) \(--------\) \(6 -3 7\) よって \(…
高校数学問題と解説 数1 因数分解 全部できたら定期テスト満点レベル
今回は因数分解でも少しだけ難しい問題と取り上げていきたいと思います。 全部できたら定期テストは満点レベルでしょう 時間目安 40分 8問のセットとなっています。 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ (x^2-x)^2-2(x^2-x)-24 \] を因数分解して下さい。 答え 解説を見る この問題は\(x^2-x\)が共通になっているのでそれをAとおいて解いていきます。 すると \((x^2-x)^2-2(x^2-x)-24\) \(=(A^2-2A-24)\) \(=(A+4)(A-6)\) \(=(x^2-x-4)(x^2-x-6…
当ブログは数学・プログラミングの特化ブログになってきてるので笑 これから毎日1問以上の数学の問題、解説をしていきたいと思います。 まずは10問を目指して頑張っていきます。 このページは記念すべき1回目となります。どのサイトよりも問題数を多くしていきたいと思っています。 また共同問題製作者も随時募集しています。ブログなどをお持ちの方は一緒にたくさん問題、解説を作って巨大グループにしていきましょう。 合計得点も出ます また問題に関する質問は当面の間、コメント欄で受け付けています。 第1問 \[ x^2+5x+6 \] を因数分解して下さい。 答え 解説を見る \[ x^2+5x+6=(x+2)(x…
javascriptで分数の掛け算割り算処理関数を作っておく
今回はそのうち他の関数を作る時に役立つであろう分数の掛け算割り算が処理できる関数をjavascriptで作っておきます。方針としては－の数を数えて符号の決定をして自前で作った約分の処理関数を使ってやっていきたいと思います。掛け算の場合は引数に1、割り算の場合は引数に2を指定することにします。 目次を開く 関数名と引数を決める －の数を数える 一度全部＋にする それぞれ掛け算割り算をする 自前の約分できる関数を使って約分 関数全体をまとめて書く 関数の説明 実際の使い方 みんなが計算できるようにしておく 関数名と引数を決める 関数名はbunsu_kakewari \[ \frac{b}{a}×(…
今回はjavascriptを使って簡単な分配法則を実現する方法を考えていきます 目次を開く 例えば3(4x-1)の場合を考える ()のついている位置の取得 ()内の部分だけ取り出してみます 4x-1をさらに分解する ここで一度分配させます 関数にする 関数の説明と使い方 みんなが計算できるようにする 例えば3(4x-1)の場合を考える 今回は例えば3(4x-1)の場合を考えてみます。 この場合は \[ 3(4x-1)=3×4x＋3×(-1)ですよね \] プログラムでこれをどう実現するかを考えます。 ()のついている位置の取得 まずはじめに(と)がついてる位置を取得します。 math_stri…
今回は分配法則の関数を作る前の段階として数式に(があったら×(に置き換える関数を作っていきたいと思います。 目次を開く (を見つけたら×(に置換する 一番初めに(がついてたらその前の×を消す 戻り値を設定する ここまでをまとめて書く 関数の説明と使い方 (を見つけたら×(に置換する まず(を見つけ次第×(に置き換えます。 文字を置換する場合は 変数(置き換えた結果が入る)= 置き換える前の変数.replace(置き換えたい文字,置き換える文字); を使います。英語でもreplaceは置き換えるですね。 ただしこれだと先頭の文字しか置き換えることができないので全ての文字を置き換えるためには re…
今までに約分ができる関数と最小公倍数を求める関数を作ったので次はその2つを使って通分ができる関数を作っておきます。 目次を開く 約分をする関数 最小公倍数を求める関数 通分するためには 使い方 みんなが計算できるようにしておく 約分をする関数 purechan22.hatenablog.com 使い方は bunsu_yakubun(分母,分子) で約分された分母、分子の値が配列で返ってきます。 －計算にも対応しています。 最小公倍数を求める関数 purechan22.hatenablog.com 使い方は min_koubai(数値,数値) 最小公倍数の値が返ってきます。 通分するためには 通…
～最小公倍数を求める関数を作っておく～ 分数を約分する関数に続き、分数を通分する関数を作っておきます。 と思ったのですがそれには最小公倍数を求めておく必要があるのでまずは 最小公倍数を求める関数をjavascriptで作っておきます。 目次を開く 最小公倍数とは それをプログラムにする aとbの大小を判別する count2からminまで同じ数で割り切れるかを判別してループ countを毎回配列に入れる 最小公倍数の公式を使う ここまでまとめたプログラムを書く 関数の名前と引数、戻り値を決める ここまでを全て書く 関数の説明 実際の使い方 みなさんが使えるようにする 最小公倍数とは 例えば4と5…
javascriptとCSSアニメでレスを流す実験をしてみたら面白いことになりました笑
5chまとめを昨日からはじめたんだけどレスをニコニコ動画みたいに流せたらいいなと思ってプログラムを組んでみることにしました。 目次を開く 文字を流すCSSアニメーションを作る 細かい動きの設定 横の動きの設定 javascriptでレスを配列に入れる レスを表示させる場所を作る 時間で制御する ここまでまとめたプログラムを書く プログラムを実行してみた 改良を施す 提供スレ様 文字を流すCSSアニメーションを作る まずはCSSアニメーションといったらこれって型があるので作っていきます。 animation-name:"アニメーションの名前";でアニメーションに名前を付け animation-d…
～約分の関数を作っておく～ 平方根の足し算引き算プログラムを作っていたら気付きました。 同じ処理は一つの関数にまとめておいた方がいいなと。 っというわけで今回はjavascriptで分数を約分する関数を作っておきます。 目次を開く レベル1 約分の仕組み レベル2 カウント変数を用意する レベル3 分母、分子の絶対値のどちらが大きいかを判別 レベル4 2～minまでループさせる レベル5 関数の返り値を決める レベル6 分母が1の時はbの値のみを返す レベル7－が入ってる場合の計算の処理 レベル8 関数名と引数を決める レベル9 ここまでをまとめて書く レベル10 関数に関する説明文を書く レ…
まとめブログを新しいジャンルとしてはじめました。 このまとめブログの特徴は優しさにあります。 それにより全ての投稿はどんなきつい言葉でも優しい言葉に全て置き換わっていますのでご安心下さい。 色が変わっているところは私自身の答えとなっています。 デザリングについて 2022/07/29(金) 21:17:20.18 ID:??? 74: ひよこ名無しさん PCからスマホ経由でネットにアクセスしたいのですが、何を買えばいいのでしょうか？ USBに何かを差してスマホをWi-Fiルータとして使う、とか？ >>ホストはスマホ、クライアントがPC ただしスマホによってMVNOの場合、前にキャリアの契約をし…
～中学高校生仕様に平方根を処理してみる1～ プログラムは大人仕様なので普通に計算してしまうとどうなるかというと例えば√6だと2.4・・と小数点で答えが返ってきてしまうので 今回は学生仕様で計算できるようにjavascriptで関数を作っておきます。 長くなってしまいそうなので今回はその第一回です。 レベル1 平方根の単体の計算方法 例えば√24だと2で割ると12ですよね。そこで同じ2で割ると6ですよね。 すると計算結果は2√6となります。 つまり2から順番に割っていって同じ数で割れたらその数を平方根の外に出してやって残りは平方根の中に残せばいいってことになります。 そこで再び2から順番に割って…
勉強の得意な初心者が1次方程式の答えがわかるjavascriptの関数を作ってみた
～初心者がjavascriptの関数を作ってみた～ 今回はjavascriptの初心者が数式に関する関数を作ってみてます。 学生のみなさんは数学の宿題が楽になるかもしれません。笑 目次を開く レベル1 関数の作り方 レベル2 1次方程式の解はどうやって求まるか レベル3 ＋－の判定 レベル4 分子 分母の数の比較 レベル5 余りが0かどうかの判定をする レベル6 出てきた数値を戻り値とする レベル7 ここまでのプログラムをまとめて書く レベル8 関数を呼び出す レベル9 1/1になった場合はans=1とする レベル10 実際にみんなが計算できるようにする レベル1 関数の作り方 関数を作るのは…
～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…
初心者のjavascript～開閉式メニューに挑戦～ 今回はjavascriptで開閉式メニューを作っていきたいと思います。初心者なので逆にめちゃめちゃく詳しいです。 レベル1 親メニューボタンと子メニューボタンの準備 自作の見出しのスタイルシートを自動で作成できるツール https://purechan22.hatenablog.com/entry/2022/11/17/155515 があるので今回もそれを使っていきたいと思います。 親メニューで一つのCSS、子メニューで一つのCSSにしていきたいと考えてます。 HTML 親CSS 子CSS <p class="menu" id="oya">…
初心者のjavascript～thisの大実験～ javascriptのthisって難しいですよね！そこで今回はjavascriptのthisを使って色々実験しようと思います 実験1 そのままthisをアラート画面に出力してみる javascript HTML <script> function mythis1(){ alert(this); } </script> <button onclick="mythis1()">実行結果を見る</button> 実行結果を見る 結果は [object Window] と出ました。 windowのオブジェクトが入ってるんですね。 実験2 何か変数を定義…
CSSのシャープ（#)idとドット(.)クラスの全て 今回はCSSのシャープ(#)とドット(.)について詳しく説明していきます。 レベル1 #について #はCSSではクラスではなくてidの時に使います。 次の例で見て下さい。 HTML CSS <div id="testid1">テスト</div> #testid1{ font-size:20px; } 実際は次のように表示されます。 テスト とにかくクラスはドット(.)、idはシャープ(#)と覚えておくといいです。 レベル2 idのもう一つの書き方 通常は<div id="testid2">内容</div>のように記述しますが <input …
～タブで画面を切り替える方法上級編～ 前回のタブで画面を切り替える方法初級編では最低限の機能しかつけていませんでしたが、今回はそこに装飾を加えていって より実践で使える形にしていきます。 前回の記事はこちら↓↓になります。 ～タブで画面を切り替える方法初級編～ - ★うつ病の一人暮らし★外で働かないで生きていく レベル1 前回の初級編のスタイルシートと記事中の記述 ・スタイルシート <style> .tabwaku{ border:2px solid aquamarine; width:150px; height:50px; margin: 0 auto; padding:10px; back…
～タブで画面を切り替える方法初級編～ 今回はタブで画面を切り替える方法を説明していきます。 また一つずつ丁寧にどこよりも詳しく説明していきたいと思います。 他のサイトを見てドーーーンとコードが出てきて圧迫された方にもおすすめです。 今回は初級編なので最低限の機能だけです。 レベル1 ラジオボタンを作成する まずはラジオボタンを作成していきます。 今回はメニュー、写真、レシピと画面が切り替わるようにしていきます。 ラジオボタンなのでtype="radio"を使います。 またidとnameには好きな名前を入れておきます。ただしnameは全て同じ名前にします。 <input id="menu" ty…
自動でスライドショーが誰でも作れるツールが完成しました。是非ご利用下さいませ。
～スライドショー自動作成ツール～ 今回はスライドショーが簡単に作れる自動ツールを作っていきます。 何もわからない人でも簡単にブログにスライドショーが設置できます。 写真のURL、タイトルを入力するだけで後は全部自動となっています。 自動ツール第一弾と第二弾 今回は自動ツール第三弾です。 第一弾と第二弾は下からご利用できます。出来上がったサンプルを見ながら自在にスタイルシートが作れます。 purechan22.hatenablog.com purechan22.hatenablog.com 写真のURL、タイトルを入力する スタート写真がスライドショー開始画面の写真となります。 スタート写真 ス…
javascriptとCSSアニメーションを融合させてのスライドショー 提供:カップめんリスペクト
～javascriptとCSSアニメーションの融合～ 今回はより実践で使えるスライドショーを作っていきたいと思います。 CSSアニメーションとjavascriptをコラボさせてスライドショーを作っていきたいと思います。 レベル1 CSS(スタイルシート)の準備 スライドショーが始まった後のCSSを用意します。 これは私の↓↓↓の記事を参考にしてください。 画像を横にスライドさせるアニメーションを使います。 purechan22.hatenablog.com CSSはこんな感じになります。 1回ずつ写真を入れ替えるのでanimation-iteration-countを1、また常に順方向にするの…
CSSで画像を横にスライドさせる方法 提供：カップめんリスペクト
～CSSで画像を横にスライド～ 今回はCSS(スタイルシート)アニメーションを使って画像を横にスライドさせていきます。 後にjavascriptと組み合わせて完全なスライドショーを作るための布石となります。 どこよりも詳しく書いていくので初心者でもすぐにわかります。 レベル1 アニメーションの基本のスタイルシート まずは最低これだけはっていう基本の型があるので作っていきます。 animation-name:"アニメーションの名前";でアニメーションに名前を付け animation-duration:"時間（秒数など)s";で一回のアニメーションにかかる時間の設定をし animation-tim…
javascriptでスライドショーを作る方法をどこよりも詳しく説明してます
～javascriptでスライドショー～ 今回はjavascriptでスライドショーを作っていきます。 よく企業のページとかでも写真がシャッシャッシャッと変わっているのありますよね。 そういうのを作っていきたいと思います。 相変わらずめちゃめちゃ詳しく書いていきます。 レベル1 スライドショーをはじめる画面の写真の準備 実際には次のように記述します。 <img src="画像のURL" id=startpic"> レベル2 スライドショーの写真の準備 まずは写真の準備です。好きなまんが日本昔話から取ってこようと思います。 > ここは写真のURLだけ準備すれば大丈夫です。まだ掲載する必要はありま…
javascriptでsetIntervalの大実験 めちゃめちゃ詳しいです
～javascriptでsetIntervalの大実験～ いきなりボンってでるより一文字また数文字ずつ流れるように出てきたらおしゃれですよね！ ってことで今回はなめらかに文字を表示できるようにしていきたいと思います。 今回はsetIntervalの大実験です。たぶんどこよりも詳しく書いています。 レベル1 メニューを開くボタンの作成 メニューを開く 実際の記述はこんな感じです。 <div class="javawaku" id="menu">メニューを開く</div> クリックしてみて下さい。実際にプログラムが動きます レベル2 ボタンを押した後に出る枠の作成 メニューを開くをクリックした後に…
javascript～cloneNodeの大実験～めちゃめちゃわかりやすいです。ベビーブームの到来です笑
～初心者のcloneNode大実験～ clone...クローンっていうだけあって同じものを複製できるとかできないとか・・ よくわからないけどやっていきましょう！ 今日はjavascript～cloneNodeの大実験です。 果たしてプログラムはちゃんと動くのでしょうか？ 前回のtoggleではスタイルシートのクラスは替えれたけど文字を変えるのに苦労しました。 レベル1 クローン（複製）化する予定の箱を作る。 箱 できました！ 実際の記述はこんな感じです <div class="javawaku" id=hako" >箱</div> レベル2 id=hakoの要素を取る var hako =do…
javascriptのtoggle(戸愚呂）大実験～めちゃわかりやすいです
～初心者のtoggle(戸愚呂）大実験～ この見出しとかは全部→自分で作った自動ツール←(みなさんもクリック)で作っています。 毎回のこのサービスの提供でお送りしていきます。笑 枠のスタイルシート自動作成ツールもあります。 今日はjavascriptのtoggleの大実験をしていきたいと思います。 噂によると何かをつけたり外したりできるとかできないとか・・・ 果たして今日もプログラムはちゃんと動くのでしょうか？ レベル1 これをクリックしたら何かが起きるボタンを作る またまた自作の枠のスタイルーシート自動作成ツールの出番です。 少々お待ちください。 ここクリック!? できました！ 実際の記述は…
初心者のjavascript配列大実験のコーナー～めちゃめちゃわかりやすいです
～初心者のjavascript配列大実験～ →早速自分で作った自動ツール←みなさんもクリックで見出しを作りました。 やっぱりすごい便利です。笑 今日はjavaの配列を大実験していきたいと思います。 果たしてプログラムはちゃんと動くのでしょうか？笑 初心者なのでかなりわかりやすいと思います。難しい言葉を使えないので笑 divで囲んでspanクラスをたくさん作る <div id="tabemono"><span class="jikken1" javaclass="osushi1">お寿司</span><span class="jikken1" javaclass="yainiku1">焼肉</s…
初めての雑記に挑戦してみた お題「今からプログラミング言語を学習するなら何を学ぶ？」
お題「今からプログラミング言語を学習するなら何を学ぶ？」 今日ははじめて雑記というものをしてみる。 そこではてなブロガーからのお題に答えてみました！ 私はjavascriptをはじめて1週間なんだけど 今日は開閉式ボタンを作っていてJquery"ってのがめちゃくちゃ便利なことに気付いたので断然jqueryを学びたいです。 今日はお昼から初めはjavascriptだけで開閉式ボタンを作っていたのですが それはもう大変なこと大変なこと。。。 えらい苦労した上に途中で挫折して ふとjqueryってのが出てきて調べてみると コードがなんと・・5行くらいでした。笑 今までの苦労は何だったのっていう感じで…
例えばレシピを開いたり閉じたりできるような開閉式ボタン作りたい
例えばこんなシーンで…↓↓↓料理の記事で…料理の写真をいくつも並べて レシピだけ閉じたり開いたりできるようなボタンあったら便利だと思いませんか？それも自動で作れるツールを作成してみたい。これはうまくできるかわからないからあまり期待しないで笑今月のアクセス数の目標が300でしたが 早くも266になりました。 ありがとうございます🌸とりあえずは毎月100ずつアクセスが増えていってくれればいいです。
見出しのスタイルシートを自動で作成できるツールが完成しました
・出来上がったサンプルを見ながら自在に見出しのスタイルシートが作れます。 ・CSSやHTMLタグのわからない方でもそのまま記事に張り付けてすぐ書くことができます。 ・2022年11月17日サービススタート。不具合を修正しつつさらに機能を増やしていきます。 枠のスタイルシート自動作成ツールはこちらです。 文字の中央寄せする？ しない する 見出し枠自体の中央寄せする？ しない する 枠の幅を指定する（指定がない方はそのままでOK) 指定しない 50px 100px 150px 200px 250px 300px 350px 400px 450px 500px 550px 600px 行高の指定（…
今日から見出しのスタイルシートを自動で作成できるツールを作ります。
枠のスタイルシート自動作成ツールに続き 今日から見出しのスタイルシートを自動で作成できるツールを作ります。あらゆるパターンの見出しを作れるようにしていきます 2日~3日で完成予定なので今のうちに読者登録 枠の自動作成ツールにブックマークお願いします。笑 purechan22.hatenablog.com
枠のスタイルシートが自動で作成できます 11月15日バックアップ版
2022年11月15日バックアップバージョン HTMLタグやスタイルシートが全くわからない方でも使えるようになりました！ コピペ機能を実装 完成には近づいてきてますがまだ機能を増やしていきたいと思います。 こんな機能を増やしてほしいというのがあればコメントを頂ければと思います。 ソフトより機能は劣るけどソフトの1000倍わかりやすいを目指して精進していきます。 2つ以上のパターンを作る場合は半角英数字で好きな名前を入力 例 waku2： 枠のサイズを指定する（指定がない方はそのままでOK) 幅 指定しない 50px 100px 150px 200px 250px 300px 350px 400…
自動スタイルシート作成ツール第二段 蛍光線を自在にあやつれるツールはじめちゃいます。
第一弾がかなり好調だったので第二段自動ツール作成はじめちゃいます。 蛍光マーカー線のスタイルシートが、出来上がったサンプルを見ながら 自動で作成できるツールとなる予定です。 この調子で自動ツールをどんどん作っていきますので、宜しくお願いします。 ↓第一弾はこちら↓ ・めちゃくちゃ便利！ ・枠のスタイルシートが自在に作れてコピペ機能も搭載！ ・HTMLタグやスタイルシートが全くわからない人でも作れます。 ・できあがったサンプルを見ながら作れます。 ・色も系統別に分かれてて100種類ほどから選べます。 purechan22.hatenablog.com
枠のスタイルシートを自動で作成できるよ！ 便利すぎて笑う HTML,CSS復習24
2022年11月14日仮の仮サービススタート笑 更新内容 HTMLタグやスタイルシートが全くわからない方でも使えるようになりました！ コピペ機能を実装、そのままHTML編集に張り付けて記事がかけるようになりました。そのまま張り付けるだけ！ほかのブログやホームページにも使えます。 2022年11月15日 更新内容 ・記事の一部だけ蛍光マーカーが引けるようになりました。マーカーの色、文字のサイズ、マーカーの線の太さを指定できます。・サンプル表示に不具合が出ていた問題を修正しました。・枠(BOX)にシャドウ（影）がつけれるようになりました。・枠のサイズが設定できるようになりました。 完成には近づいて…
はてなブログにコピーボタンを実装する方法を難しい言葉を使わずに説明してみた HTML,CSS復習22
この記事でわかること 誰でもブログにコピーボタンを実装できてそのコードの意味も全部わかります。またテキストエリアの装飾方法もわかります。プログラム？javascript？なにそれ？おいしいの？状態でも大丈夫です。コピペ用のスタイルシート、スクリプトはページの最後にあります。 こんにちは。 ブログ(はてなブログ)にコピーボタンを実装しようとして他のサイトを見てみたら 難しい言葉が並んでる... javascript...何それ？おいしいの？ コピペして使おうと思っても作動しない！ そんな感じで無理って思って諦めたことはありませんか？ 実ははてなブログではサポートしていない機能があるので ややこし…
画像を回転させるアニメーションの方法 HTML,CSS復習21
この記事でわかること 画像を回転させる方法がわかる みなさん、こんにちは。 今回は画像を回転させる方法です。 料理などの写真が回転していたらびっくりさせれますよね笑 今回はそれをしていきます。 まずアニメーションの基本は以下の記事も参考にして下さい。 ブログで文字をジャンプ,揺らして注目させる方法 HTML,CSS復習20 - ★うつ病の一人暮らし★外で働かないで生きていく 画像を回転させるには 画像を回転させるにはrotateを使いますが まずはアニメーションの基本のスタイルシートです。 img.rotate{animation-name:kaiten1; /*アニメーションの名前の設定*/…
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…
ブログで文字をジャンプ,揺らして注目させる方法 HTML,CSS復習19
この記事でわかること ブログで文字を動かす方法がわかる みなさんこんにちは。 ブログで文字が動いてるってほぼほぼ見ないですよね。 そこで今回は文字を動かしてみたいと思います。 んっなんじゃこりゃぁ！と思わせてブログを読ませてみましょう。 ブログで文字を動かすには まずブログで文字を動かすには animation-name:"好きな名前"; を使います。 今回は名前をugoki1にします。 animation-name:ugoki1; ・一回のアニメーションの往復時間を指定します 往復時間指定は animation-duration:"時間"s; を使います。 今回は1秒にしてみます。 anim…
ブログを教科書風にしておしゃれにする方法 HTML,CSS復習18
p.clear{ float;clear; } この記事でわかること 画像にテキストを回りこませる方法がわかる みなさんこんにちは。 画像と文字を縦並びに配置するよりも..教科書風にしてスタイリッシュにブログを書いてみませんか？ ということで今回は画像にテキストを回りこませる方法を紹介していきます。なかなかここまで凝っているブログはみないのでおしゃれですよ🌸 画像にテキストを回りこませるには 画像にテキストを回りこませるには"float"というのを使うんです。 なんのことかよくわからないと思うので実際にやってみましょう。 ・左に画像を置きたい場合 スタイルシート img.left{ float…
<pre> 行間を狭めて入力したまま表示される<br>タグを使わないいい方法 HTML,CSS復習17
この記事でわかること 行間を狭めて入力したまま表示される方法がわかる こんにちは、今日はHTML,CSS復習の16回目となりました。 みなさんブログを書いていると勝手にpタグやdivタグが量産されて、行間が空きまくるってことないですか？ 今回はそのお悩み一気に解決できるpreタグについて紹介していきます。 <pre>タグの便利な使い方 <pre>タグを使うと入力したままそのまま表示されるのですごい便利なんです。 改行や空白もそのまま表示できて<br>タグを使わないでいいです。 またそれにより行間を狭めることができます。 ただしそのままpreタグを使うと背景が黒くなって枠も勝手についてしまうので…
この記事でわかること 簡単な表の作り方がわかる 今日は早くもHMTL,CSS復習の16回目となりました。塵も積もれば山となるですね。 簡単な表を作っていきたいと思います。 簡単な表の作り方 まずtableタグで全体を囲います 次のように表の最初と最後に使います <table> </table> 次に一行目を作っていきます。 表の一行目は項目ですよね。 表の項目はthタグを使います。また一行一行はtrタグで区切ります。 thタグの背景は薄い青色で文字は太くしてみます。 スタイルシートには次のように記述します。 th.koumoku{background-color:lightcyan; /*背景…
この記事でわかること 商人放浪記の美女、家来、どれから取ればいいかわかる 幸運大賞の美女 家来ってどれから取るか悩む うんうん、いっぱいいるからね どれから取ればいいの？ 美女の駅使→家来の怪盗、厳先生の順番で取ればいいのよ 美女・家来の取り方の順番 まずは美女の駅使→厳先生、怪盗を取りましょう。 なぜなら・・・ ・駅使のご縁家来が怪盗、厳先生 ・怪盗、厳先生も幸運大賞で手に入る からです。 次に行商の相手の体力がすごくてつらくなってくるので、家来の売上を上げるために残りの家来を取っていきます。 家来も全部取り終えたら、次は美女の”雪山の少女"を取りましょう。 これはご縁家来が、開印状を20個…
自分のブログ内を検索してもらえるようにしてみた HMTL,CSS復習⑮
この記事でわかること Myブログ内に検索窓を設置する方法がわかる ブログってホームページと違って過去のページがすごく探しにくいよね そうだよね、そこがブログのデメリットだよね そのデメリットをなくす方法はあるの？ 実はあるんです。検索窓を設置すれば過去の記事から読者が知りたい情報を探してもらえるの 検索窓を作るには まず編集モードを見たままモードからMarkdownモードなどに変えてください ↑これが一番重要です。 次に検索フォームを作ります。 form action="自分のブログのURL"を入れます。 <form action="http://hatena.blog.ne.jp/purec…
デザリングのデータ容量がいっぱいの為、更新は11月にまとめてになります 実践として、今してるゲーム商人放浪記のページも作りました。 でもまだまだ改良の余地がありそうです。
この記事でわかること 二つの要素の隙間をなくす方法がわかる 2つの要素を横に並べると隙間ができてしまうんだけど・・ 困るよね！今回はその隙間をなくしてみるよ でもどうやって隙間をなくすの？ 一度フォントサイズを初期化してから、また戻せばいいんだ 二つの要素の隙間をなくす方法 まず一度フォントのサイズを0として初期化します。 フォント初期化のスタイルシート div oya{font-size: 0px; /*fontsizeの初期化*/} 次に要素を横に並べるスタイルシートを作って ここでフォントサイズを元に戻します div.yoko2{display: inline-block; /*要素を横…
この記事でわかること！チェックマーク～をCSSで作ってみた HTML,CSS復習13
こんにちは。ブログを見てたら最初の記事の要約とかで、この記事でわかること！みたいな感じで”チェックマーク（文章）”ってなってるのをよく見かけますよね できるとスタイリッシュだよね！今回はそれをしてみよう☆ でもどうするの？ 四角の小さい枠を作って下と左にだけ境界線をいれてそれを傾ければいいのよ チェックマークを入れるには まずただの四角の小さい枠のスタイルシートです。 小さい枠なので幅を20px、高さを10pxにしてみます。 width:20px;height: 10px; 枠の左と下にだけ境界線を入れます。 border-left: 2px ridge green; /*ridgeは立体的な…
アイコンと吹き出しを横に並べてみた HTML,CSS復習12
こんにちは、12回目の今日は 吹き出しの顔アイコンと吹き出しを横に並べてみました。 どんどん実戦的になってきました。戦えるかな笑 アイコンと吹き出しを横に並べる方法 要素を横に並べる方法、吹き出しの詳細な説明は下のページからご覧下さい。 purechan22.hatenablog.com purechan22.hatenablog.com まず吹き出しアイコンはフリー素材のページにいくらでもあるのでそこから取ってきます。 今回取ってきたのはこれです。 吹き出し部分のスタイルシートは次のようになります。 p.yokohuki {position: relative;display: inline…
吹き出しのCSSのコードを詳細に説明 HTML、CSS復習⑪
こんにちは、今日はスタイルシートで吹き出しを作ってみます。 コードの詳細がのっていないサイトが多いですが、ここでは詳細に説明しています コピペでは応用が全く効かなくていざ実戦！となった時に使えません。 吹き出しの作り方 まずは角が丸い四角を作ります。 これは以下の記事も参考にしてください。 要素を横並びにする方法 HTML,CSS復習⑩ - ★うつ病の一人暮らし★外で働かないで生きていく スタイルシートはこうなります。 div.yokohuki {position: relative; /*位置を相対的に*/display: inline-block; /*要素を横並びにする*/border-…
こんにちは、今日はHTML,CSSの復習の10回目となります。 不具合で記事が消えたので書き直しました 涙 要素を横並びにする方法 要素を横に並べるには display : inline-block; /*要素を横並びにする*/ を追加するだけです。 まずは角が丸い四角を作ります。 スタイルシートには次のように記述します。 div.yokonarabi{display: inline-block;border-radius: 10px; /* 四隅を丸くする */padding: 10px; /*領域と文字との余白10px*/background: lightblue; /*背景色 light…
こんにちは、今回はHMTLタグ,CSS復習の9回目です。 見出しにアイコンを入れてみます。 見出しにアイコンを入れてみる アイコンを入れない場合の見出しは purechan22.hatenablog.com のページも参照してください。 見出しにアイコンを入れない場合は ・スタイルシート h2.lightblue{font-size: 15px;background: lightblue;padding: 10px;border-bottom: 3px solid #000;border-left: 3px solid #000;border-radius: 10px;} ・記事中の記述 <h…
こんにちは、ぼちぼちの更新ですがもうHTML,CSS復習の8回目ですね。 今回は下線を蛍光ペンみたいにする方法です。 今までに復習したものを使っているので、少しずつ実践的になってきてうれしいです。 下線を蛍光ペンみたいにする方法 下線を蛍光ペンみたいにするには ただの下線をつけるCSS（今回はspanタグのredbottomクラスにしてみましたが、クラス名は何でも大丈夫です）。 span.redbottom{border-bottom: 1px solid red;} とは違ってbackground 背景を使います。 (spanタグは段落タグpよりも小さい単位みたいに考えて使ってます。) 文字…
HTML要素 blockレベル要素について HTMLタグ・CSS復習⑦
HTML要素について html要素とは例えば <p>これが一つのかたまり</p><div>これが一つのかたまり</div> というように タグの初めから終わりのところまでの部分のことをいいます。 <p>～～</p>までで一つの要素<div>～～</div>までで一つの要素 といった感じです。 block要素とは block要素とはそれぞれのコンテンツをまとめた一つのかたまりのことを言います。たと例えば<div>～～</div>タグなどのHTML要素でコンテンツをまとめたものがblockレベル要素です。 block要素の特徴 block要素の特徴には それぞれの要素が縦に並ぶ 余白を自由に設定で…
はてなブログのpタグ内の行間を狭くする方法 HTMLタグ、CSS復習⑥
はてなブログをやってたら 改行する度に勝手にpタグがどんどん量産されて pタグとpタグの間が広くなって見にくくないですか？ そこで今回はpタグのpタグの間の行間を狭くしてみます。 pタグ同士の行間を狭くする方法 pタグの行間が広くなる理由は、行間として1emの余白がデフォルトとして設定されているからなんです。 これをスタイルシートを使って変えてやることで行間を狭めることができるんです。 スタイルシートには次のように記述します。 .entry-content p { margin:0} すると全ての記事でpタグ同士の行間が狭くなります。 ♯HTMLタグ ♯CSS ♯スタイルシート
実戦で使える見出しのクラスをスタイルシートで作成 HTML(CSS)復習⑤
こんにちは、 今回は実戦で使える”見出し"のクラスをスタイルシートで作成していきます。 HTMLタグでは見出しをH1～H5ぐらいまでのタグを使って見出しを作成していきます。 例えば新聞で言えば大見出しがH1 小さい見出しがh2~h5みたいなイメージです。 ブログで言えばタイトルがH1 次の大きな見出しがH2です。 ということで、今回はH2タグをスタイルシートで設定していきます。 フォントサイズは20pxにしたいので font-size: 20px; 領域の背景色はbackground: lightblue; 文字と領域の余白はpadding: 10px; 領域の左と下に黒の実線を引きたいので …
こんにちは、今回は領域の角を丸くする方法です。 まずその前に領域の角を四角にするには次のようにします。 まずスタイルシート(今回はpタグクラスのp.sikaku)にこのように記述します。 p.sikaku{ padding: 10px; /*領域と文字との余白10px*/ background: lightblue; /*背景色 lightblue*/ border: 2px solid #skyblue; /*境界線の幅2px solidは実戦 色はskyblue*/ } 記事中には次のように記述します。 <p class="sikaku">領域の背景色がlightblue 境界線がskyb…
こんにちは、HTML復習③です。 positon relativeについて勉強します。 relativeとは相対的なという意味で relativeを使うと今記述している箇所を基準として、どの位置に配置するかを決めることができます。 今回もpタグを使ってpタグのrelative1クラスに設定していきます。 スタイルシート(CSS)には次のように記述します。 p.relative1{position: relative;top: 100px;left: 60px;background-color: lightblue;width: 290px;height: 250px;padding: 20px…
スパムリプバイト募集してるジモティーのページあります。 こいちゃん@手抜き物販社長のアカウントを淡々と追跡
メルカリ物販スクールで、別人を装って同一人物でいくつもアカウントを作っている疑いのあるこいちゃん@手抜き物販社長のアカウントを淡々と追跡していくだけです。まず規則をTwitterから引用です。 Twitterでは1人のユーザーであっても複数のアカウントを運営することができます。 ただし、複数のアカウントから同じ投稿を繰り返すような「スパム行為」や、他人になりきって投稿を行う「なりすまし行為」はTwitterルールで禁止されています。 思いっきり違反しています。スパム報告は↓↓↓下のページ↓↓↓ 右上をクリックです。こいちゃん＠手抜き物販社長 (@koichan_tool) / Twitter …
スタイルシート(CSS)でpタグの背景色を設定 HTML復習②
今回はスタイルシートを使ってpタグで囲まれた部分の背景色を設定します。 はてなブログでのやり方を説明していきます。 まずはてなブログでCSSを使う場合の一つにhead要素にスタイルを設定していく方法があります。 今回はその方法を使っていきます ダッシュボード ↓ 設定 ↓ 検索エンジン最適化 ↓ headに要素を追加 と移動してそこに記述していきます 試しにpタグのクラスblue1の背景色を青色にしてみましょう。 次のように記述します <style> p1.blue1{ background-color;blue; } </style> これで記事中でpタグのblue1というクラスを使うと青色…
ホームページやらブログの作成からだいぶ離れていたので タグやCSSの復習と勉強からしていきます。 勉強、復習期間は6カ月を予定しています 勉強していったらこのページも編集していきます。 タグは全部手打ち派です。 php,java,mysql,androidアプリ作成も中学時代はある程度できてたけど全て忘れました。笑 今回は文字に下線を引く方法とspanタグについてです。 ・下線を引く方法 文字に下線を引く場合は 下線を引きたい部分を<u>タグで囲みます。 <u>文字に下線を引く</u> そうすると次のようになります。 文字に下線が引かれました ・spanタグについて spanは簡単に言うと s…
うつ病なので外で働けないから家にいてお金を稼ぐ方法を模索しています。今から1年間以上は収益0再来年の1月からはブログとツイッターで月1~2万の収益を得るのを目標にしています。うちの生活コストは月2万円と外国のスラム街もびっくりの激安🤣なのでそれで十分だし、それまでは貯金をなるべく減らさないようにポイ活をしていく予定です★ブログのジャンルはまだ増える予定で現在 ポイ活(今は商人放浪記) 介護現場の実態 副業詐欺を暴く の3つのジャンルがありますが、 そこに加えて 趣味の勉強(大学受験とか) 夜のお散歩 さらに引きこもりの子供さんとか、内気な子供さん、塾に行けない母子家庭の子供とかを対象にして 無…
「ブログリーダー」を活用して、かなこさんをフォローしませんか？
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
