今さら聞けないHTML 2021年01月03日

今さら聞けないHTML 2021年01月03日
目次

nth-child()とnth-of type()の違い

##結論
順番を数えるときに指定した要素のみを数えるかどうか

##それぞれの挙動の違い
例として以下のようなコードを使用します。

“`html

国民の祝日

1月

元日

成人の日

2月

建国記念の日

天皇誕生日

3月

春分の日


“`

ブラウザ表示は以下のようになります。
ブラウザ表示

今回はpタグに対して指定をしていきたいと思います。
nth-child()とnth-of type()共に3番目を指定して色を変えてみます。

“`css

p:nth-child(3) {

JavaScript のコードを整形する

以下のサイトを利用した。

Online JavaScript Beautifier (v1.13.0)
https://beautifier.io/

## コードを貼って、 Beautifully Code で整形
![スクリーンショット 2021-01-03 10.46.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27486/ed5ecd0a-7da0-a6ab-4561-ea3c5a275fce.png)

## いろいろできる
### フォーマットが指定できる
![スクリーンショット 2021-01-03 10.53.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27486/f7d13ee6-2c23-85b4-c41e-6544fbc1c4fd.png)

こうなる。
![スクリーンショット 2021-01-03 10.40.57.png](https://qiita-image-store.

CSS素人の僕が考える最強の左寄せ右寄せCSS

CSSは簡単にかじった程度の者ですが、ブロック要素を1行に左寄せおよび右寄せに配置したい場合のCSSってどう書くのが一番最強なのか検討してみました。
※ここでの「最強」とは私が考え・感じる「いい感じ」な表現方法になります。
もっと素敵な方法があるかもしれません。皆様他素敵な方法あったら教えてください。

# 発端

プロジェクトで作成された 1 行に左寄せ右寄せができるようになったスタイルテンプレートが読みにくくて仕方ない気がして気になってしまった。

# やりたいこと

次のように、div タグの中に左寄せ右寄せができる領域を表現する div タグがあり(以下例であればalign-leftとalign-right)。そこにボタンなどを追加していけば左寄せの領域は左に、右寄せの領域は右にボタンが配置される。

“`html:HTML

左寄せ領域


textareaの最初に、空白スペースが出来てしまう問題の解決法

htmlでコードを書く際に、下記のように”改行”をしていたことが原因でした。

“`

“`

“`

“`

下のコードのように訂正したら、最初の空白は無事直りました。

「おかしなりんご」ゲーム

1.はじめに

この記事のターゲットは「HTML、CSS、JavaScriptを一通り学んだけど何をしたらいいかわからない人」向けです。
この記事を見ることで以下の項目の悩みを解決できると思います。

  • プログラミング一通り経験したけど何をしたらいいのか
  • JavaScriptでできることは?
  • 簡単なゲームを作りたい

2.作者紹介

プログラミングを初めて2ヶ月の「大学3年生」です。
スキルセットとしては以下のような感じです。

  • HTML&CSSがだいたい分かる
  • JavaScriptは少しわかる(機能を見てある程度推測できる)
  • ちょっとしたデータサイエンスに関する知識

最近は模写を中心に独学しています。

3.アプリ概要