発端 Electronで遊んでるのですが、動作確認したときに画面の上部に謎の隙間が・・・。 スタイル指定した記憶もないしなぜだろうと思い調べた。 結果 ブラウザにはbodyタグにデフォルトでmarginが指定されているらしい。 で、ほとんどのブラウザが8pxをデフォルトで指定している。 たしかに、Electronの開発ツールを見ると以下のようなスタイルが指定されていた。 bodyDefCss.css body { display: block; margin: 8px; } これはわからん・・・ ちなみになくしたい場合はcssやbodyのスタイルにmargin: 0pxを定義します。 override.css body { margin: 0px; } や override.html <body style="margin: 0px;"> みたいな感じですかね。 以上、 超簡単な記事でした。
Electronで遊んでるのですが、動作確認したときに画面の上部に謎の隙間が・・・。 スタイル指定した記憶もないしなぜだろうと思い調べた。
ブラウザにはbodyタグにデフォルトでmarginが指定されているらしい。 で、ほとんどのブラウザが8pxをデフォルトで指定している。
body
margin
たしかに、Electronの開発ツールを見ると以下のようなスタイルが指定されていた。
body { display: block; margin: 8px; }
これはわからん・・・
ちなみになくしたい場合はcssやbodyのスタイルにmargin: 0pxを定義します。
css
margin: 0px
body { margin: 0px; }
や
<body style="margin: 0px;">
みたいな感じですかね。
以上、 超簡単な記事でした。
グラデーションを使う グラデーションには、2つあって、 1.線形グラデーション 2.円形グラデーション さらにリピートすることもできる。 基本的な書き方はこう、 ベンダープレフィックスと若干違うかな。 方向は、角度での指定もできて（90degみたいな）。 上2つのサンプルのコード載せますね。 1. 2.
グラデーションには、2つあって、 1.線形グラデーション 2.円形グラデーション さらにリピートすることもできる。 基本的な書き方はこう、 ベンダープレフィックスと若干違うかな。 方向は、角度での指定もできて（90degみたいな）。 上2つのサンプルのコード載せますね。 1. 2.
CSSを使っていろんなものを動かしてみる 例えばこんなの See the Pen border animation by Ryoto kubo (@Ryotokubo) on CodePen. よくwebサイトで見かけると思いますが、実はCSSだけなんですね。 こういうのもそう。 See the Pen QPLmGX by Ryoto kubo (@Ryotokubo) on CodePen. 全てCSSのみです。 これを使えば要素にカーソルを乗せたとき画像を少し大きくしたり、時間差で色を変えるなんてこともできます。 転職を志しhtmlとCSSを学び始めると、行き着くとこはポートフォリオ作成だと思います。 その過程の中で「少しでも見た目を良くしたい」「凝りたい！」みたいな気持ちもあるかと思います。 そんなときCSS アニメーション使ってみましょう 尚、ここではややこしいコードの説明は割愛します。 興味がある方はgoogleで 「CSS アニメーション 」 「CSS animation」 「CSS animation まとめ」 などと調べてみてください。様々なパターンが見れて「あっ！これもCSSでできるんだ」と思う動きがあるはずです。 尚、コードの詳細が知りたい方は 「animation keyflames」 と検索してみてください。 animationで動きの設定を作ってあげて、keyflamesでどう動くのかを設定してあげるといった感じなのですが、設定にも種類があり設定次第では様々な動きがつけられますので。 では。
例えばこんなの
See the Pen border animation by Ryoto kubo (@Ryotokubo) on CodePen.
よくwebサイトで見かけると思いますが、実はCSSだけなんですね。
こういうのもそう。
See the Pen QPLmGX by Ryoto kubo (@Ryotokubo) on CodePen.
全てCSSのみです。 これを使えば要素にカーソルを乗せたとき画像を少し大きくしたり、時間差で色を変えるなんてこともできます。
転職を志しhtmlとCSSを学び始めると、行き着くとこはポートフォリオ作成だと思います。
その過程の中で「少しでも見た目を良くしたい」「凝りたい！」みたいな気持ちもあるかと思います。 そんなときCSS アニメーション使ってみましょう
尚、ここではややこしいコードの説明は割愛します。
興味がある方はgoogleで
「CSS アニメーション 」 「CSS animation」 「CSS animation まとめ」
などと調べてみてください。様々なパターンが見れて「あっ！これもCSSでできるんだ」と思う動きがあるはずです。 尚、コードの詳細が知りたい方は
「animation keyflames」
と検索してみてください。 animationで動きの設定を作ってあげて、keyflamesでどう動くのかを設定してあげるといった感じなのですが、設定にも種類があり設定次第では様々な動きがつけられますので。
では。
