overflowプロパティが効かない…について

結論は、
子要素にposition: absolute;があると効かないです。
親要素にposition: relative;を加えれば解決します。

overflowプロパティについてみていきたいと思います。

overflow:画像がボックスの要素内に内容が収まらない場合に、指定するプロパティです。

visiable:ボックスの要素からはみ出て表示される。
hidden:ボックス内に収まらない場合は、収まらなかった部分は非表示となる。スクロールバーも表示されない。
scroll:内容が僕すに収まらない場合、スクロールバーなどが表示される
auto:ボックスに収まらない内容をどう表示されるかは、ユーザーエージェントに依存する。
 ユーザーエージェント:ホームページを見るとき、各ブラウザが使用しているパソコンのブラウザやOSの情報を発信しています。この情報をユーザーエージェント(User-Agent)と言う
no-display:内容がボックスに収まらない場合は、display:noneが表示されたかのようにボックス全体が削除される。
no-content:内容がボックスに収まらない時は、visibility: hidden;が表示されたかのようにボックス全体が非表示となる。

以上です。

もりけん塾
もりけん先生ブログ

a(アンカータグ)タグ 擬似クラスについて

aタグに用いる擬似要素として、挙げられるのが…

  1. :link 未訪問リンク
  2. :visited 訪問済みリンク
  3. :hover カーソルが重なった時
  4. :active クリックしてから離される時まで

擬似クラスはセレクタに続けて指定します。半角スペースを入れると無効になります。

擬似クラスには、優先順位があります。(上記の順番で!!)

HTML
<p><a href=”#”>リンクテキスト</a></p>

css
a:link {・・・
}
a:visited {・・・
}
a:hover {・・・
}
a:active {・・・
}

:visited擬似クラスは、ブラウザに履歴が残っていると、色を変更しても確認はできません。

実際の制作では:link、:activeは指定せず下記のようにa要素と:visitedと:hoverのみで指定するケースが多くなっているそうです。

:visitedを指定しない場合はa要素の指定と同じになります。

:hover擬似クラスはa要素以外にも使用できます。主にJavascriptというプログラムと併用して利用される場合があるそうです。

最後に今回参考にさせて頂いた、サイト

aタグ内の画像の枠線について
aタグでimgタグを囲むと古いバージョンのブラウザでは1pxの青色のborderが付きます。これはブラウザのデフォルトcssでborderプロパティが設定されているためです。リセットCSSであらかじめimg要素のborderをなしに設定しておきます。

もりけん塾
もりけん先生ブログ

cssで要素を中央に配置する方法

cssを使って、画像を中央に配置したいときどうしますか?
今回は、それをいくつか紹介します。

早速行ってみます。

1、text-align: center;を使う(※インライン要素のみ)
2、margin: auto;を使う(※ブロック要素のみ)
3、img要素は、インライン要素なので、1、2を踏まえると、display: block;を使ってブロック要素にしてしまう。
4、display: flex;を用いる方法

まだ、いくつかありますが、よく使いそうなものをピックアップしました。

1、2、3、はそのままです笑

4、については、少し説明します。

HTML
<div class=”flex-Box”>
 <div class=”flex-Img”>
  <img src=”./img/hoge.jpg” />
 </div>
</div>

css
.flex-Box {
 display:flex
 justify-content: center;(boxを左端から右端へのレイアウト位置)
 justify-items: center;(boxを上から下へのレイアウト位置)
}

ちなみに、ベンダープレフィックスです(まだcssで試験的運用なcssプロパティということです。)

リファレンス:https://webkcampus.com/201501/949/

もりけん塾
もりけん先生ブログ

background-imageで画像をぼかさずフルサイズにする方法

background-imageで画像をぼかさずにフルサイズで表示する方法。

HTML
<div class=”img”>
 <img src=./img/a.jpg alt=”” width=”” height=”” />
 <img src=./img/a.jpg alt=”” width=”” height=”” />
 <img src=./img/a.jpg alt=”” width=”” height=”” />
</div>

css
img {
height: 100vh;
width:auto;
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
}

こんな感じです。
順番にみていくと、

1,height: 100vh
viewport heightと言って、1%=1vhです。
じゃあ、%使えばよくね?と思われるかもしれませんが…
簡単に言うと、子要素の%は、親要素の%に左右されます。

一方、viewport単位は、viewportの寸法を基準としているため、要素の幅、高さ、サイズをviewportに合わせて設定しなければならない状況でとても便利です。

2,width:auto;
セクションの横幅の指定です。他の要素の指定を基に自動算出させるためautoを指定します。

3,背景画像のサイズを指定しています。
autoは横幅を、100%は高さの指定になります。ここでは単位が%であるところに注意です。

4,background-position: center;
これは、要素いっぱいに画像を広げた際に、画像を中央に寄せる指定です。

5、background-repeat: no-repeat;
ただ単に、画像を繰り返すかどうかの設定です。
これは、背景画像を繰り返して使うときには、よく使います。

リファレンス:https://natsukimemo.com/css-fullscreen

もりけん塾
もりけん先生ブログ

クラス名,id名 命名について

HTML,cssで作品を作っていて思ったのが、意外と、クラス名、id名についての設定で時間をとることが、多くなりました。

ブロックなど親要素で使えそうなclass名

  • container : コンテナ
  • main : メイン
  • global : グローバル
  • home : ホーム
  • hero : でかいブロック。bootstrapのサンプルにある
  • inner : 中味。
  • outer : 囲っているもの。親。wrapperと同じ。
  • wrapper : 囲っているもの。親。

ブロックや子要素で使えそうなclass名

  • articles : 記事の一覧
  • comments : コメント一覧
  • contents : contentを複数囲むなら
  • users : ユーザーの一覧

フォーム要素で使えそうなclass名

  • form form要素関連
  • field input要素関連
  • radio radiobox要素関連
  • checkbox checkbox要素関連
  • submit 送信

基本的には日本語を英語に直せばいいようですが…笑

実際に、クラス名、id名の命名について調べました。
リファレンス:HTMLとCSSクラスでよく使う命名について

こういうクラス名やid名をつけるのは、慣れと、実際に作られているホームページを見て、実際に真似することが、上達の鍵ですね!!

以上です。

もりけん塾
もりけん先生ブログ

cssの基本単位として”rem”を使うと便利な件について

ホームページを作るときに、の幅の指定に困りませんか?

今回は、それを解決しようと思います。

width,heightの指定として、楽なのは、remです!!

remとは何か…

ルート要素(html要素)で指定した値を元に、フォントサイズ、幅、高さを指定できるものになります。

イメージがわかないと思うのでコードで見てみましょう。

html {
 font-size:15rem;
}

p {
 font-size:1.2rem;
}

strong {
 font-size:1.4rem;
}

お気づきの方もいるかもしれませんが、
htmlのfont-size:15remを元に計算します。
p要素であれば、15px x 1.2rem=18pxのような感じになります。
strong要素だれば、15px x 1.4rem = 21remという感じです。

では、rem指定だと何がいいのか?
答えは、

emや%だと<p>の中に<strong>があったときのように2重掛けが起こってしまうので、そのような煩雑なサイズの継承から逃れられます。

ただし、問題点があります。

それは、

Google Chromeでは「最小フォントサイズ」というものが存在するので、中途半端なサイズまでしか縮小できません。

例えば、
html {
 font-size: 1px;
}
p {
 margin-top:30rem;
}

のようにするとレイアウト崩れを起こします。

なので、
html {
 font-size: 15px;
}
p {
 margin-top:2rem;
}

のように、11〜20pxくらいが良いとされています。

あと、もう一つ注意点として、

remは比較的最近導入されたCSS3の単位で、IE9から対応しています。
ただし、IE10以下では一部バグあり(恐らく擬似要素のみ)とのことなので、あまりに気軽に使うと泥沼にハマる可能性があります。ご注意ください。

リファレンス:https://qiita.com/butchi_y/items/453654828d9d6c9f94b0

以上です。

もりけん塾
もりけん先生ブログ

Git GitHub について

Git GitHubでうまくいかなかったので記載しようと思います。
ちなみに、今回は、もりけん先生に教えていただいたgit cloneで作成してはいません…
次回に記事にします。

gitとgithubの違いについては、以下のリンクで調べました。
https://tech-blog.rakus.co.jp/entry/20200529/git#Git%E3%81%A8%E3%81%AF

※最初に注意することとして
ターミナルでgitを操作する場合、以後出てくるbranchの場所に注意すること!!
幹にあたるmasterなのか、branchを分けた枝で作業するのか…
移動は、git checkout “移動したいブランチの名”で移動可能

では、まず全体の流れです。

1,元々、作ってあったファイルをGitにあげるためにターミナルでGitにあげたいフォルダ(ここではaフォルダとする)へ行って”git init”と入力しました。

2、gitにaフォルダが登録され、
Initialized empty Git repository in /Users/sosukoipanda/a/.git/
という最後に.git/がついたコマンドが出ます。

3、ここから、GitHubに移って、新しいリモートリポジトリを作成します。
(下図のNEW Repositoryを選択してクリックして)

4、下図の画面になったら、上の四角の中に、フォルダ名(ここでは先ほどaとしました。)を入力します。
※これは、フォルダ名と、今回作成しようとしている四角の中のrepository nameはできれば同じ方がいいです。
何がなんだが分からなくなります。

5、2つ目の四角の”Initialize this repository with a README”はチェックを入れてください。
チェックすると何がいいのか…GitHubのリポジトリの初期化と、READMEファイルが作成でき、cloneがすぐにできるようになります。
cloneとは、羊のクローンのように同じデータを持った物をローカルリポジトリに作ります。
今回は別の方法ですが…

6、チェックができたら、下にある緑のcreate repository をクリックしてリポジトリを作成します。

それができたら、この今作ったリモートリポジトリとローカルリポジトリを連携させます。

7、下図を見て、まず、GitHub上で、作ったリポジトリの緑のcodeというボタンを押すと
git@github.com:xxxxx/xxxxxx.gitが表示されるので、それをコピーしてください。

8、先ほどコピーしたgit@github.com:xxxxx/xxxxxx.gitを
コマンドに貼り付けます。
git remote add origin git@github.com:xxxxx/xxxxxx.gitを入力してください。

9、git pull origin master をして、リモート上に作った情報をまず取得します。
このまま、git add → git commit → git push をすると、リモートとローカルとに差が出るので…

! [rejected] master -> master (non-fast-forward)
error: failed to push some refs to ‘git@github.com:yasu-pro/chef.git’
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: ‘git pull …’) before pushing again.
hint: See the ‘Note about fast-forwards’ in ‘git push –help’ for details.

が出ます。

なので、
git remote add origin git@github.comxxxx/xxxxxx.git
をして、git上にリモートリポジトリを作ったら、
git pull origin master をすること。

これで、ローカルリポジトリとリモートリポジトリを連携することができました。

10、ここから、htmlファイル,cssファイル,Javacriptファイルなどを変更して、
git add .(既存のファイルをステージングする)
git add –all (新規ファイルとかも含めて、ステージングする)

11、その後、ローカルリポジトリへあげるために、
git commit -m “コメントをここに入力”

12、さらに、ローカルリポジトリからリモートリポジトリへあげるために
git push origin head をする。

origin headの意味は、
・originは、git@github.com:xxxxx/xxxxxx.git でリモートのサーバー名のことです。
・headは、今いるところの先頭→つまり、ローカルリポジトリで一番新しいところのことです。

全体の流れ…

一番新しいところとは、
git commitをしていくとbranchという枝が伸びていきます。

青色の文字のgit checkout -b “ブランチ名”をすることで、枝をきるという表現をするようですが、枝が別れます。もちろんここで、作業をしてcommitすれば枝が伸びます。
で、それを、master branchにくっつける作業をします。それが緑色の文字のmergeです。

それが、写真では、一番下の○がファイルとして、一番新しい状態です。それを、リモートリポジトリにpushするというのが、流れです。

13、その後、GitHubへ行くとpullRequestという緑色のボタンが出ます。

pullRequestは、変更したコードをリポジトリに取り込んでもらうように依頼する機能です。

次に…

スクリーンショット 2014-12-17 23.21.10.png
https://qiita.com/samurai_runner/items/7442521bce2d6ac9330b

さらにpullrequestの緑色のボタンを押した後、
GitHub上で、上図の写真の緑のボタンMerge pull request を押すことで、リモートリポジトリでmergeされます。

ちなみに、これをすることで、GitHubの草が生えます!!

例えば、下図のように…

ローカルリポジトリでmergeせずに、1回commitして、枝(branch)を伸ばした状態で、pushした場合。
リモートリポジトリには、赤い四角の内容がpushされます。
ここで、先ほど ”GitHubでpullRequestして、その後のmerge pull requestを押すとリモートリポジトリでmergeがおきます。” と書きました。
GitHub上で、merge pull requestを実行すると赤い丸の段階になります。つまり、黄色い丸のところができます。

ただ、merge pull requestしたら勝手にリモートリポジトリはmergeがおきますが、ローカルリポジトリは、mergeされていませんよね…(赤い四角の内容)

つまり、ローカルと、リモートの間で、ずれが生じます。これをなくすために
ローカルリポジトリをリモートリポジトリと同じにする必要があります。
それをするのが、git pullになります。
14、git pullすれば、ローカルの黄色い点線部分ができて、ローカルと、リモートの差がなくなります。
これは、もちろん、pullRequestや、merge pull requestをした後にローカルで作業をしていたら、また、リモートの内容と違うじゃないかと怒られますので、その場合は、git stashしてください。

git stashとは、一旦変更した物を横の机みたいなところに避けるイメージです。
その後、git stashの内容を追加すれば、問題はありません。

これが一連の流れになります。(1〜13を順にやればGitHubに草を生やすことができます。)
ちなみに、gitを操作する場合は、自分のいる位置の確認。つまり、ブランチの位置の確認(git branchで確認)をしてくださいね!!git statusも忘れずに!!

リファレンス https://qiita.com/samurai_runner/items/7442521bce2d6ac9330b
       https://happy-making.com/study_log58/#toc11

2つ目のリンクは、同じ塾生のはるなさんのブログです。とてもわかりやすいです。

ここからは、僕がgit initを使って、エラーが出た内容で、どうやって解決したのかの備忘録です。

1〜10まで順調にできましたが…
11をした時、つまり、git push origin master をした時に

fatal: ‘origin’ does not appear to be a git repository
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

”orign”はgitリポジトリではないようです。
リモートリポジトリから読み取れませんでした。

正しいアクセス権があること、リポジトリが存在していることを確認してください。
(英訳…)

よくよく、調べてみると、8をやってませんでした。
git remote add origin git@xxxxx/xxxxxx.git

つまり、ローカルリポジトリとリモートリポジトリを連携できていませんでした。

これをした後に、
git push origin headをしたのですが…

Warning: Permanently added the RSA host key for IP address “xxxxxxxx” to the list of known hosts.
Enter passphrase for key ‘/Users/xxxxxxxxxx/.ssh/id_rsa’:
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

が出てきました。

/Users/xxxxxxxx/.ssh/id_rsa'のパスフレーズを入力:

のところが重要で、詳しく調べても分からなかったのですが、id_rsaの権限でつまずくことが多くあるみたいです。
解決策としては、一番最初にGitHubを登録した時にSSHのパスワードを設定したと思うのですが、それを入力しないと、いけないみたいです。

SSHのパスを入力したら、いけました。

その後、もう一度、git push origin headをすると今度は…

! [rejected] head -> master (fetch first)
error: failed to push some refs to ‘git@github.com:xxxxxx/xxxxx.git’
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., ‘git pull …’) before pushing again.
hint: See the ‘Note about fast-forwards’ in ‘git push –help’ for details.

! [拒否]ヘッド->マスター(最初にフェッチ)
エラー:一部の参照を 'git@github.com:xxxxxxxxx / xxxxx.git'にプッシュできませんでした
ヒント:リモートが行う作業がリモートに含まれているため、更新は拒否されました
ヒント:ローカルにはありません。これは通常、別のリポジトリのプッシュによって引き起こされます
ヒント:同じ参照に。最初にリモートの変更を統合することができます
ヒント:( 'git pull ...'など)再度プッシュする前。
ヒント:詳細については、「git push --help」の「早送りに関する注意」を参照してください。

とのことでした。(後半訳すのが面倒になったので、google先生にお願いしました。)

これの原因は、自分がリモートの変更をpullしてから、pushするまでの間に、他からのpushがあるなどしてリモートが変更されているためです。(そういえば一度、pushしてました。)
エラーメッセージが教えてくれているように、ブランチの先端がリモートのより後ろになっています。 ローカルの master ブランチを shared の master とマージしてあげる必要があります。 git pull でマージした後、改めてpushしましょう。

ここでの回答は、git pull origin masterと書いてありますし、この回答が多かったのですが…

自分は、git push -f origin masterでいけました。

意味は、リモートブランチがローカルブランチの派生元ではない場合も、ローカルブランチの内容で強制的に上書きする。

これには、リスクがありました。なぜなら、ローカルブランチの内容で強制的に上書きされてしまうので、本当に、上書きするローカルが正しいのかしっかりと確認する必要があります。

コマンドで行くと、実際に何が起こっているのか目で確認できないので、イメージしにくく、苦戦しますね…できるまで諦めないことですね…

以上です。

フロントエンドエンジニアになるために

フロントエンドエンジニアになると決めたのはいいけれど…
どのように進んでいくのか息詰まったので、整理します。

逆算して…

1.目標として、2021年3月までに就職をする。
2.それを達成するために、9月までに、以後記載する(HTML、CSS、JSの一部)をこなす。作品も作ること
3.順調に9月を迎えれば、引き続き、作品を作り、まとめる→もちろんGitHubにもあげる
順調に行っていなければここできちんと調整してこなすこと。
4.10月から就活をメインに切り替える。

具体的にどんなことをするのか…

HTML、CSSをほとんど忘れてしまったため、今一度、復讐することも含めなければいけません。

まず、もりけん先生の他の塾生の方に対する回答を参考にさせてもらいました。


 HTML
・サーバーから送られてきたファーストバイトをブラウザが受け取ってから描画されるまで
・解析、DOM構築、レンダリング、レイアウトフローなど
・SEO
・アクセシビリティ

 フォトショ・イラレ
・画像をスライスできる
・簡単な加工ができる
・バナーが作れる
・パスを自由に操れる
・バッジ処理ができる

 CSS
・flex, or gridで横並びができるようになる
・position absolteとrelativeの違いを理解できて、2つのwidthが違う要素で中央配置ができるようになる
・擬似属性とボーダーだけでアイコンを作ることができる
・media queryでスマホ対応できる
・display blockとinline-block, inlineの違い、できることを理解
を一旦目指す

 git(github)は
・変更をpushすることができ、github上でpullRequestをmergeできること
・リモートブランチからpullで変更を取り込むことができること

 JavaScript

もりけん先生のツイート
もりけん先生のツイート

まず、JavaScriptですることとして
・改訂新版JavaScript本格入門を読む(最低2周)
 →1回目は、さっと読んで、2回目に分からないところを重点的に!!

・JSでWEBで使われるような部品を一週間で一個作る。(毎日pullRequestして草を生やす。)
 →・スライドショー(完成→リファクタリングする)
  ・ドロワーメニュー
  ・タブ
  ・フォーム
  ・検索ボックス
  ・ページネーション

ここまでで、HTML、CSS、JSの基礎をやることになる。
つまり、これを、9月中には、終わらせること+作品を作ること!!

10月には、就活をメインに切り替え、就職すること。

その後は、フロントエンドエンジニアになるべく、また考えます。

なので、一旦ここを目処に行動しようと思っています。

JavaScript~クイズゲーム 修正2~

今日は、以前のタイピングゲームの修正です。

上記が以前のコードです。

ここの117行目のところが原因で、最後の問題を解いた後に、正常であれば、結果が出るのですが、それがでません。

まず、何が原因なのか考えるため、
console.log(“3”, typeof question[random] === “undefined”);
をしています。
”3”には特に意味がありません。(見やすくしているだけです笑)

これを実行したところ三問目を解いた後に、undifinedになりました。

理由としては、
読み込まれる順番として、quizStart()→counter()→count > maxだった場合textDeleat()→result()となるのですが、
問題をランダムに表示して、問題がかぶらないようにするために、
97行目で

function randomNotInclude() {
for (let k = min; k <= max; k++) {
while (true) {
let tmp = intRandom(min, max);
if (!randoms.includes(tmp)) {
randoms.push(tmp);
break;
}
}
}

で設定したとうりで、randoms.push(tmp);
より、randoms配列にかぶらない数字を入れています。
なので、問題も1〜4(配列ではindexの番号は0〜3)しかないので、結果画面に移っても、コードは実行されているので5問目(配列indexの番号が4のとき)のときは、値がないのでundefinedになるということでした。

JavaScript~クイズゲーム 修正1回目~

JSのクイズゲームでエラーがでたので、先生に質問しました。

問題のコードがこれです。↓↓

エラーを起こすときは、
問題をスタートして、ラジオボタンが表示されて、問題に答えるためにラジオボタンにクリックしたときに、change is not definedになりました。

理由としては、HTMLのフォームのラジオボタンの要素に、onchange=”change(this.value)” としていることが原因でした。

これの何が原因かというと、 ブラウザでJSが読み込まれる際に、DOMを生成してからJSが読み込まれます。HTMLにonchangeが記載されているため、ここでJSが発動し、index.jsが読み込まれる前に、onchangeが発動するためのエラーでした。

なので、これの解決方法として
・HTMLにonchangeを書くのではなく、index.jsにaddEventListernerを使い、設定する
ここでもうひとつ疑問に思ったのが、
index.jsが読み込まれる前に発動しているのなら、<head>内にindex.jsを入れればいいのでは?と考えました。

しかし、これは、getElementByIdが読み込まれる前、つまり、DOMを生成する前に、読み込まれるため、エラーがおきます。
この解決策が、前回記事にした、DOMContedLoadedです。

LoadがDOMを含め、画像など全ての外部ファイルなどを読み込むまで起動しないのに対して
DOMContedLoadedは、DOMを読み込んで、記載されている関数を読み込みます。

これを使うことで、getElementByIdが読み込みエラーを起こさずに、JSを読み込むことができます。

以上です。

もりけん塾
もりけん先生ブログ