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.アプリ概要
スクロールで要素がふわっと表示される「ScrollReveal.js」を使ったら、動かなかった件を解決した
自身のポートフォリオサイトで、ポートフォリオ作品の部分を、スクロールしたらふわっと表示されるアニメーションを取り入れたかったので、「ScroalReveal.js」を使って実装しようとしました。
##ScroalReveal.jsとは
スクロールして要素が画面に表示されたら、指定したアニメーションを実行してくれるJavascriptライブラリです。
ふわっと要素を表示させたり、下から表示させたり、遅れて表示させたりなどを簡単に実装することができる優れものです。##ScroalReveal.jsの使い方
まず[こちら](https://liginc.co.jp/500530)の記事を参考に実装しました。
リンク先:[ScrollReveal.jsを使ってスクロールしたらふわっと表示される動きを作ってみよう](https://liginc.co.jp/500530)###1.ライブラリを読み込み
まず、ライブラリを`script`タグで読み込み。“`HTML:HTML
【初心者でもわかる】太文字をさらに太く表示するCSSの裏技
# どうも7noteです。太字を更に太く見せる技。
***「太字効果の、`font-weight: bold;`よりももっと太く見せたい。」***
そんなときに使える、ちょっとした裏技を紹介します。
![sample02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/8dd9e2d4-47aa-805b-3d92-6d99e6d11ace.png)
## 文字に縁取りをつけて太く見せる方法(あまり綺麗でない)
```style.css .big { text-shadow: /* 縁取り1pxを同じ色でつける */ 1px 0 0 black, 0 1px 0 black, -1px 0 0 black, 0 -1px 0 black; } ```
**結果**
![sample01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/f52d5
X-Frame-Options: DENY/SAMEORIGINでも iframe で表示する回避策
## Overview
標題の通り、`X-Frame-Options: DENY` or `SAMEORIGIN` でも iframe で表示する JS module を使ってみたのでメモ。
## X-Frame-Bypass
これを使えばできる(すべてのページが表示できるわけではありません)。
https://github.com/niutech/x-frame-bypass
### Note that:
* すべてのページが表示できるわけではありません。 * 例えば CAPTCHA が入ってたりするとダメです。 * 踏み台にしている proxy から html を取得してこれないとダメみたいです。
## How to use?
使い方は [README](https://github.com/niutech/x-frame-bypass/blob/master/README.md) に書いてある通りとてもシンプル。
JS module を読み込んで iframe タグに `is="x-frame-bypass"` を付けるだけ。
## Try
Chromeの謎挙動であけおめ
# 次のコードをChromeかEdgeで実行してほしい
```html