diff --git a/info/FAQ.html b/info/FAQ.html new file mode 100644 index 0000000..6c46494 --- /dev/null +++ b/info/FAQ.html @@ -0,0 +1,166 @@ + + +Junior-Doctor Chokai Academy + + + + + + + + + + + + + + +

FAQ・アドバイス集

+
+

操作・コマンド編

+
+
Emacsの画面が2画面になって見にくい
+
C-x 1を押す
+
+
+
ファイル名を間違えてプログラムを作成した
+
emacsでC-x C-wを押すとファイル名を書き換えられる
+
+
+
プログラムを実行する、作成するときの文字打ち
+
最初の文字をある程度打ち込み、Tabキーを押す
+
+
+
カーソルを合わせるとき
+
マウスやパッドではなく、キーボード右下の矢印キーを使う
+
+
+
プログラムの最初の2行目を書くのがめんどくさい
+
1行目は書かなくてはならない
+ 　　　2行目は書かなくて良い(勝手に打ってくれるから) +
+
+
+
プログラムの2行目の「#-*- coding:utf-8 -*-」にemacsutf8が保存のときに打たれる
+
C−x C-m f utf-8-emacs [Enter]
+
+
+
プログラムが見にくい
+
C-SPCで範囲指定をしてからC-iを押すと範囲内のインデント(段落)をそろえることができる無駄な空白の行を入れない
+
+
+
スライドにある\(円マーク)を打ちたい
+
\と￥は一緒
+
+
+
プログラムが終わらない(∞ループになった)
+
C-cを何回か押す
+
+ +

入出力処理編

+
+
文字が変数に入らない
+
ダブルコーテーション(””)をつける
+
+
+
％が最後にでてくる
+
print("～～\n")またはputs("～～")と書く
+
+
+
%dや%sがそのまま出てくる
+
printfで出力する
+
+
+
プログラムに空白を出力したい、段落を付けたい
+
print("\n")またはputs("")を段落を付けたい場所に書く
+
+ +

演算編

+
+
nil
+
nilは値が何もないときに出てきます。配列などで指定したところに値があるかを確認しましょう
+
+ +

制御構造編

+
+
breakやredoが反応しない
+
whileの中にないと反応しません
+ while
+ 　～～
+ 　redo
+ end
+ のようになっているか確認する +
+
+
+
elseのときにしか次に進まない
+
+ if
+ 　～～
+ else
+ 　～～
+ 　次にしたいこと
+ end
+ になっているかも +
+
+ +

配列編

+
+
配列に値を入れたい
+
<<またはpushを使う
+ 配列名<<値
+ 配列名.push(値) +
+
+
+
配列の値を取り出したい
+
shiftまたはforを使う
+ 先頭の値を取り出すとき
+ 配列名.shiftを使う
+ 一定数、全部取り出すとき
+ for 変数 in 配列名
+
+
+
+
配列から値を取り除きたい
+
配列名.dekete_at(x)(xは取り除きたい値の添字)で取り除くことができる
+
+ +

メソッド定義(def)編

+
+
defの中の値をdefの外で使いたい
+
基本的にdefの中と外では違う世界になっている + 一応retrunする値をgetsで取得できるが無駄にプログラムを書くことになるのでお勧めはしない +
+
+
+
どんな時に使うのか?
+
くり返し使いたい時に使う
+
+

エラーメッセージ編

+
+
error.rb:6: warning: found
+
error.rbの6行目にエラーがある
+
+
+
`= literal' in conditional, should be ==
+
if a = 0 と書いてあるが == にするべき
+
+
+
syntax error, unexpected end-of-input
+
endが足りないか多いかのどっちか
+
+
+
`printf': too few arguments (ArgumentError)
+
printfの中に%sや%dはあるが代入する変数がない
+
+
+
invalid value for Integer()
+
printfの中に%dがあり、整数ではないものを出力しようとしている
+
+
+ + + + \ No newline at end of file diff --git a/info/index.html b/info/index.html index eda8678..a655e3a 100644 --- a/info/index.html +++ b/info/index.html @@ -24,7 +24,7 @@
  • ZOOMの使い方
  • jitsi meetの使い方
  • VirtualBox環境の使い方
    • -
  • FAQ集
    • +
  • FAQ集
    • diff --git a/jdinit.js b/jdinit.js index 01a77aa..6ebf0aa 100644 --- a/jdinit.js +++ b/jdinit.js @@ -30,7 +30,7 @@ header.classList.toggle("scroll-nav", window.scrollY > 0) }); window.addEventListener("DOMContentLoaded", function(){ - const faqs = document.querySelectorAll("dl.faq-list"); + const faqs = document.querySelectorAll("div.faq-list dl"); console.log(faqs); faqs.forEach(faqs => { faqs.addEventListener("click",()=> { diff --git a/jdmain.css b/jdmain.css index 70f3bc8..1b9ac27 100644 --- a/jdmain.css +++ b/jdmain.css @@ -822,7 +822,9 @@ margin: 3rem 0; width: 100%; } -dl.faq-list{ +div.faq-list{width: 100%;} + +div.faq-list dl{ position: relative; left: 50%; transform: translateX(-50%); @@ -837,51 +839,51 @@ border-radius: 10px; transition: .3s; } -dl.faq-list:hover{ +div.faq-list dl:hover{ box-shadow: 0 0 8px gray; cursor: pointer; } -dl.faq-list.act{ +div.faq-list dl.act{ border-radius: 10px; background-color: #8fcfb5; transition: .3s; } -dl.faq-list dt{ +div.faq-list dl dt{ width: 100%; font-size: 1rem; padding: 15px; } -dl.faq-list dt::before{ +div.faq-list dl dt::before{ padding:0 1rem 1rem; font-size: 1.5rem; color: #e02f3b; content: "Q"; } -dl.faq-list dt::after{ +div.faq-list dl dt::after{ font-size: 1.5rem; float: right; transition: .3s; content: "＋"; } -dl.faq-list dt.question::after{ +div.faq-list dl dt.question::after{ transform: rotate(-45deg); } -dl.faq-list dt.question{ +div.faq-list dl dt.question{ color: white; } -dl.faq-list dd{ +div.faq-list dl dd{ width: 100%; max-height: 0px; overflow: hidden; transition:max-height .4s ease; } -dl.faq-list dd::before{ +div.faq-list dl dd::before{ padding:0 1rem 1rem; font-size: 1.5rem; color: #007a9f; content: "A"; } -dl.faq-list dd.faq-show{ +div.faq-list dl dd.faq-show{ max-height: 300px; transition:max-height .8s ease; } @@ -907,52 +909,51 @@ /*------------------------------------------ media -------------------------------------------------*/ @media screen and (max-width: 746px){ - .section-title{ - font-size: 1.55rem; - } - #home h3{ - font-size: 1.2rem; - } - #home p{ - font-size: 1.1rem; - line-height: 1.85; - } - .aiming_top{ - max-width: 500px; - } -} -@media screen and (max-width: 746px){ -.section-title { - font-size: 1.75rem; - position: relative; - display: inline-block; - margin-bottom: 50px; -} -.section-title::before{ - background-image: none; - vertical-align: baseline; - content: ''; - position: absolute; - bottom: -20px; - display: inline-block; - width: 60px; - height: 5px; - left: 50%; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); - background-color: rgb(255, 153, 0); -} -.section-title::after{ - display: none; -} - header.scroll-nav{ - background: white; - box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); - align-items: center; - } - .header-nav .sp-logo{ - display: block; - } + .section-title{ + font-size: 1.55rem; + } + #home h3{ + font-size: 1.2rem; + } + #home p{ + font-size: 1.1rem; + line-height: 1.85; + } + .aiming_top{ + max-width: 500px; + } + + .section-title { + font-size: 1.75rem; + position: relative; + display: inline-block; + margin-bottom: 50px; + } + .section-title::before{ + background-image: none; + vertical-align: baseline; + content: ''; + position: absolute; + bottom: -20px; + display: inline-block; + width: 60px; + height: 5px; + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + background-color: rgb(255, 153, 0); + } + .section-title::after{ + display: none; + } + header.scroll-nav{ + background: white; + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); + align-items: center; + } + .header-nav .sp-logo{ + display: block; + } .header-nav nav ul{ display: none; } @@ -962,36 +963,131 @@ #home-about h2{ font-size: 1.6rem; } - #home-about .home-items h3{ - font-size: 1.2rem; - } - #home-about .home-items p{ - font-size: 1.1rem; - line-height: 1.85; - } - .aiming_top{ - max-width: 600px; - } - .qa_list label{ - font-size: 17.5px; - z-index: 1; - } - .qa_list .ans{ - margin-top:10px; - font-size: 17.5px; - } - .qa_list .ans span{ - font-size: 19px; - } - .info-item{ - flex-direction: column; - margin: 0 auto; - } - .iframe-wrap{ - padding-top: 50px; - width: 100%; - } + #home-about .home-items h3{ + font-size: 1.2rem; + } + #home-about .home-items p{ + font-size: 1.1rem; + line-height: 1.85; + } + .aiming_top{max-width: 600px;} + .qa_list label{ + font-size: 17.5px; + z-index: 1; + } + .qa_list .ans{ + margin-top:10px; + font-size: 17.5px; + } + .qa_list .ans span{font-size: 19px;} + .info-item{ + flex-direction: column; + margin: 0 auto; + } + .iframe-wrap{ + padding-top: 50px; + width: 100%; + } } +@media screen and (max-width: 1024px){ + #hamburger-menu{ + opacity: 0; + position: fixed; + } + label .buns{ + position: fixed; + top: 0.8em; + right: 1em; + z-index:3; + height: 2em; + width: 2em; + } + label .buns::before, + label .buns::after, + label .buns .patty { + position: absolute; + left: 0; + width: 100%; + height: 4px; + border-radius: 5px; + background: #333; + content: ""; + transition:all .3s; + } + label .buns::before{ + top: 0; + transform-origin: top left; + } + label .buns .patty{top: 45%;} + label .buns::after{ + bottom: 0; + transform-origin: bottom left; + } + .header-nav nav ul{ + position: fixed; + top: 0; + left: 0; + bottom: 0; + z-index: 2; + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: flex-start; + transform: translateX(-120%); + } + .bd-no{display: none;} + .header-nav nav ul::before{ + position: absolute; + top: 0; + bottom: 0; + left: 0; + z-index: -1; + width: 25em; + background: rgb(172, 255, 234); + transform: skewX(-20deg) translateX(-200%); + transform-origin: bottom left; + transition: transform.3s; + content: ""; + } + + .header-nav nav ul li{ + margin: 1em 1em; + padding: 0.2em 1em; + transform: translateX(-120%); + transition: all .3s, transfrom .5s; + transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); + } + + #hamburger-menu:checked + label .buns::before, + #hamburger-menu:checked + label .buns::after{width: 130%;} + #hamburger-menu:checked + label .buns .patty{transform: scale(0);} + #hamburger-menu:checked + label .buns::before {transform: rotate(45deg);} + #hamburger-menu:checked + label .buns::after {transform: rotate(-45deg);} + #hamburger-menu:checked ~ nav ul{transform:translateX(0%);} + #hamburger-menu:checked ~ nav ul::before {transform: skewX(-20deg) translateX(-60%);} + #hamburger-menu:checked ~ nav ul li{transform: translateX(0);} + #hamburger-menu:checked ~ .light-dark{ + background: #000; + opacity: .5; + position: fixed; + left: 0; + top: 0; + height: 100%; + width: 100%; + } + + /* ------------fag--------- */ + div.faq-list dl{width: 85%;} + div.faq-list dl dd,div.faq-list dl dt{ + width: 100%; + font-size: 1rem; + } + div.faq-list dl dt::after, + div.faq-list dl dd::before, + div.faq-list dl dt::before{font-size: 1.2rem;} + /* ------------fag-end--------- */ +} + /* メモ ！わかりやすく、探しやすく、再利用しやすく、拡張しやすくする １ h２タグにはsection-titleというclass名をつけて全てのページを共通化させる diff --git a/testpage/index.html b/testpage/index.html deleted file mode 100644 index 0f08149..0000000 --- a/testpage/index.html +++ /dev/null @@ -1,163 +0,0 @@ - - -Junior-Doctor Chokai Academy - - - - - - - - - - - - - - -

    FAQ・アドバイス集

    - -

    操作・コマンド編

    -
    -
    Emacsの画面が2画面になって見にくい
    -
    C-x 1を押す
    -
    -
    -
    ファイル名を間違えてプログラムを作成した
    -
    emacsでC-x C-wを押すとファイル名を書き換えられる
    -
    -
    -
    プログラムを実行する、作成するときの文字打ち
    -
    最初の文字をある程度打ち込み、Tabキーを押す
    -
    -
    -
    カーソルを合わせるとき
    -
    マウスやパッドではなく、キーボード右下の矢印キーを使う
    -
    -
    -
    プログラムの最初の2行目を書くのがめんどくさい
    -
    1行目は書かなくてはならない
    - 　　　2行目は書かなくて良い(勝手に打ってくれるから) -
    -
    -
    -
    プログラムの2行目の「#-*- coding:utf-8 -*-」にemacsutf8が保存のときに打たれる
    -
    C−x C-m f utf-8-emacs [Enter]
    -
    -
    -
    プログラムが見にくい
    -
    C-SPCで範囲指定をしてからC-iを押すと範囲内のインデント(段落)をそろえることができる無駄な空白の行を入れない
    -
    -
    -
    スライドにある\(円マーク)を打ちたい
    -
    \と￥は一緒
    -
    -
    -
    プログラムが終わらない(∞ループになった)
    -
    C-cを何回か押す
    -
    - -

    入出力処理編

    -
    -
    文字が変数に入らない
    -
    ダブルコーテーション(””)をつける
    -
    -
    -
    ％が最後にでてくる
    -
    print("～～\n")またはputs("～～")と書く
    -
    -
    -
    %dや%sがそのまま出てくる
    -
    printfで出力する
    -
    -
    -
    プログラムに空白を出力したい、段落を付けたい
    -
    print("\n")またはputs("")を段落を付けたい場所に書く
    -
    - -

    演算編

    -
    -
    nil
    -
    nilは値が何もないときに出てきます。配列などで指定したところに値があるかを確認しましょう
    -
    - -

    制御構造編

    -
    -
    breakやredoが反応しない
    -
    whileの中にないと反応しません
    - while
    - 　～～
    - 　redo
    - end
    - のようになっているか確認する -
    -
    -
    -
    elseのときにしか次に進まない
    -
    - if
    - 　～～
    - else
    - 　～～
    - 　次にしたいこと
    - end
    - になっているかも -
    -
    - -

    配列編

    -
    -
    配列に値を入れたい
    -
    <<またはpushを使う
    - 配列名<<値
    - 配列名.push(値) -
    -
    -
    -
    配列の値を取り出したい
    -
    shiftまたはforを使う
    - 先頭の値を取り出すとき
    - 配列名.shiftを使う
    - 一定数、全部取り出すとき
    - for 変数 in 配列名
    -
    -
    -
    -
    配列から値を取り除きたい
    -
    配列名.dekete_at(x)(xは取り除きたい値の添字)で取り除くことができる
    -
    - -

    メソッド定義(def)編

    -
    -
    defの中の値をdefの外で使いたい
    -
    基本的にdefの中と外では違う世界になっている - 一応retrunする値をgetsで取得できるが無駄にプログラムを書くことになるのでお勧めはしない -
    -
    -
    -
    どんな時に使うのか?
    -
    くり返し使いたい時に使う
    -
    -

    エラーメッセージ編

    -
    -
    error.rb:6: warning: found
    -
    error.rbの6行目にエラーがある
    -
    -
    -
    `= literal' in conditional, should be ==
    -
    if a = 0 と書いてあるが == にするべき
    -
    -
    -
    syntax error, unexpected end-of-input
    -
    endが足りないか多いかのどっちか
    -
    -
    -
    `printf': too few arguments (ArgumentError)
    -
    printfの中に%sや%dはあるが代入する変数がない
    -
    -
    -
    invalid value for Integer()
    -
    printfの中に%dがあり、整数ではないものを出力しようとしている
    -
    - - \ No newline at end of file diff --git a/testpage/responsive.css b/testpage/responsive.css index ee7b24c..bf74124 100644 --- a/testpage/responsive.css +++ b/testpage/responsive.css @@ -1,4 +1,4 @@ -@media screen and (max-width: 1024px){ +/* @media screen and (max-width: 1024px){ #hamburger-menu{ opacity: 0; position: fixed; @@ -63,7 +63,6 @@ transition: transform.3s; content: ""; } - .header-nav nav ul li{ margin: 1em 1em; padding: 0.2em 1em; @@ -71,10 +70,6 @@ transition: all .3s, transfrom .5s; transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } - - /* .header-nav nav{ - transform: translateX(-120%); - } */ #hamburger-menu:checked + label .buns::before, #hamburger-menu:checked + label .buns::after{ width: 130%; @@ -105,21 +100,21 @@ top: 0; height: 100%; width: 100%; - } + } */ /* ------------fag--------- */ - dl.faq-list{ - width: 90%; + /* div.faq-list dl{ + width: 850%; } - dl.faq-list dd,dl.faq-list dt{ + div.faq-list dl dd,div.faq-list dl dt{ width: 100%; font-size: 1rem; } - dl.faq-list dt::after, - dl.faq-list dd::before, - dl.faq-list dt::before{ + div.faq-list dl dt::after, + div.faq-list dl dd::before, + div.faq-list dl dt::before{ font-size: 1.2rem; - } + } */ /* ------------fag-end--------- */ -} +/* } */