HTML/CSS

widthをcalcで計算する

www.w3schools.com .info{ width: calc(50% - 32px); } 単位が違うときに便利だなと思いました。

デバイスにあわせて表示領域を設定する

metaタグでマークアップします PCに合わせてCSSでスタイリングしたあと、おおざっぱにでもスマホ用のCSSをスタイリングするため、HTMLのメタタグに以下を書き込みます。 <meta name="viewport" content="width=device-width, initial-scale=1"> このマークアップで、ざっくりとデバイスにあわせて表示されます。</meta>

divをbodyの子要素として表示

哲学の論文で、「二重の問いへの答え(のひとつ)」という文が出てきました。 この時、どれが問いなのか、どれが答えなのかということを整理したくなるのですが、前後を読んでもどれかわからず、結局要素を整理していくことになります。 同じように、html勉…

行のコピー

Shift+Alt+↓ ですね Macだったら Shift+Option+↓ です。

CSS animationでぐるぐる

.box{ width: 100px; height: 100px; background-color: #87ceeb; cursor: pointer; transition: 0.8s; } .circle{ background:pink; border-radius: 50%; transform: rotate(360deg); } ぐるぐるさせてみましたのメモ。 クロックが特にかわいいです bouncej…

ツイッターカードを確認

cards-dev.twitter.com サイト制作後、ツイッターにURLを書いてつぶやくとどんな感じでツイッターカードが出てくるかをチェックできます。 こんな感じになる予定。たぶんヘッダーに記載した画像と大きさがまだ浸透していない ツイッターカードのためにヘッダ…

VScodeでScssを自動コンパイル

下部の「Success!」がうれしい marketplace.visualstudio.com Live Sass CompilerとLive ServerをOnにしておけば大丈夫だと思います。

VSコード、自動保存にしておく

Ctrl+, でsettingに移動 コードを自動保存したい人にはおすすめです。 AfterDelay!