【初心者でもわかる】1行で複数の値が書けるCSSプロパティ一覧と書き方
どうも7noteです。transformを複数設定する時など、複数指定する時の方法まとめ初心者の頃にすぐに書き方を忘れてしまったので、忘れてもいいようにまとめます。アルファベット順で並べています。background➡半角スペース[ ]とスラッシュ[ /...
View Articleセレクターについて改めて勉強し直した①
はじめにCSSを使って、装飾をしているといっつもクラス名に対してスタイルを適用させていて、別にできていないわけではないけど、これって全ての要素に対してクラス名を付けなきゃいけない形になってしまっていました。なんか効率が悪いというか、クラス名をつけるまでも無いような要素もあるし…とモヤモヤしていたので、クラス名を付けずに、スタイルを思うままに適用させる方法は無いかと、調べました。本日から何日かに分けて...
View Article【CSSアニメーション】transitionのイージングにease-inやease-outを適当に設定するのはやめましょう
はじめにこの記事は普段transition-timing-functionの値になんとなくease、ease-in、ease-out、ease-in-outを設定している方に読んでいただきたい内容になります。アニメーションが苦手という方も、この記事で紹介する6つのポイントを抑えることで普段気づいていたけど対処法がわからなかったアニメーションの違和感の解消方法を学んでいただければ幸いです。イージングの...
View ArticleClik here to view.
よくある電気のスイッチみたいなのをCSSで作ってみた（ロッカスイッチ）
どうも7noteです。スイッチを作りました。またまた唐突に思い立って、もしかしたらそれっぽいのが作れるのではと思い作ってみました。使い所は少ないかもしれないですが、どこかのサイトの作成の参考になればいいなと思います。作り方index.html<labelclass="rocker"><inputtype="checkbox"value=""name="rocker"><...
View ArticleClik here to view.
線を描くようなSVGのラインアニメーションの作り方
web制作でちょこちょこ見かける線が描かれるアニメーション、実は少ないコードで実装できるので解説します。完成形はこんな感じ作り方IllustratorでSVGを作成今回はFacebookとTwitterのアイコンをアニメーションさせます。 100px四方のアートボードを作成して、それぞれにアイコンを置きsvgで書き出し保存方法は以下です [ファイル] > [別名で保存] >...
View Articleセレクターについて改めて勉強し直した②
はじめに昨日の投稿の続きです。セレクターについて改めて勉強し直した①ここからは逆引き方式でクラス名は違うんだけど、同じスタイルを適用させたいhtml<divclass="section">テスト</div><pclass="content">テスト</p>css.section,.content{}クラス名とクラス名の間に「,」を入れる。親要素の中の子...
View ArticleClik here to view.
%とcalcで画像flexboxレスポンシブ対応。
画像コンテンツのレスポンシブ対応をする際に、コンテナのサイズ計算で考えてしまうのでメモようにまとめてみました。完成イメージイメージ的にはこんな感じです。サイズがバラバラな画像を、CSS同じサイズにして、さらに画像間の余白も計算に入れたサイズにします。メリットとしてはツール等で画像のトリミングが不要になるのと、余白調整でlast-childとか特殊な指定がなくなります。コード<h2>横に並...
View ArticleClik here to view.
VSCode拡張機能(自動ブラウザリロード)
HTML CSS JavaScript 学習効率化Live Serverの使い方使用環境: macOSエディタ: VSCodeLive ServerとはVSCode上のファイルの変更を監視して、ブラウザを自動でリロードしてくれるVSCodeの拡張機能です。通常VSCode使ってプログラミング学習をする場合、ファイルを編集 -> ブラウザをリロード ->...
View ArticleClik here to view.
CSSアニメーションを使って、Webブラウザに流れ星を流したい
tl;dr(Too Long, Don't Read)HTML/CSSを使って、Webブラウザに流れ星を流してみました 完全に再現はできないので、過度な期待はしないでください笑成果物は以下の通りです https://boring-swartz-8cf676.netlify.app/ソースコードはこちらから確認できます主に以下の4点のCSSの機能を用いて流れ星を実装しました CSS...
View Articlemap要素でループ処理！【SCSS】
まずmapって何？マップとはリストの各要素がkey&value（key1:value1）になったものです。もう少し解像度を上げてご説明いたします。$map:(key1: value1,key2: value2,key3: value3);このようにしてmap変数を定義して$mapの中にプロパティと値を格納することができます。@...
View Articlecss(styleタグ)をjavascriptで追加する
// styleタグを作成 var styleTag = document.createElement('style'); // styleタグに記載するcssを記入 styleTag.innerText = ` p { color:red; } `; // 作成したstyleタグを挿入...
View ArticleCSS変数（カスタムプロパティ）が便利だった
ずっとSassの変数と同じだろうと思いスルーしていました。試しに使ってみたところ、Sassではできない便利な変数の利用方法を発見できたので、仕様をまとめてみました。変数の宣言と値の定義変数の宣言 先頭にハイフンを2つ --付けて任意の名前を記述する大文字・小文字が区別される値の定義 コロン :で区切って値を記述するスコープ...
View Article特定の要素だけフェードイン表示のタイミングがおかしい…そんな時に確認するポイント（画像編）
症状要素をフェードイン表示する際に、ある要素だけ表示されるタイミングがおかしいという不具合が発生しました。具体的には、その要素だけコンマ何秒か遅れて表示されてしまいます。これによって、スムーススクロールでその要素にリンクする際に、スクロールがカクつくという症状が現れました。調べてみたところ、「あーそんなこともあるのか、、、」という理由だったので、備忘録がてら残しておきます。原因フェードイン表示させる...
View ArticleClik here to view.
[備忘録]「box-sizing: border-box;」の有無
本記事の目的resetcssに含まれていてフロント実装中あまり意識しない、box-sizing: border-box;の有無によってどのようにレイアウトが変化するかを確認する。事前準備boxsizing.htmlとboxsizing.cssという名前のファイルを以下の様に用意した。boxsizing.html<!DOCTYPE...
View ArticleClik here to view.
【初心者でもわかる】ふきだしでアピールしてくるボタンの作りかた
どうも7noteです。ただのボタンじゃなくアピール強めのボタンを作ります。ボタンの作り方はいろいろありますが、ここで紹介するボタンはこのような動きのあるボタンです。見本ふきだしがふわふわしてアピールするボタンの作り方index.html<divclass="btn"><ahref="#"><imgsrc="button.png"alt="ボタン"></a&g...
View ArticleProgateでHTML,CSSを学んでみた（2日目）
概要Web開発に興味が出てきたのでとりあえず一通り必要そうなものを触ってみることにしました。ただ触るだけだと忘れてしまいそうなのでメモとして学んだことを書いてみます。ここにあるコードはほぼ全てProgateで出てきたものです。CSSによるタグ付けある特定の要素にのみCSSを適用したい場合はタグをつける。例えば以下のように書くと、hogeとmogeのみが赤色になる。...
View Articleセレクターについて改めて勉強し直した③
はじめに昨日の投稿の続きです。セレクターについて改めて勉強し直した②今回も逆引き方式で親要素の直後の子要素にのみスタイルを適用させたいHTML<h1>テスト</h1><p>テスト1</p><p>テスト2</p>CSSh1+p{}h1要素の直後のp要素にのみスタイルが適用される。2つめのp要素にはスタイルが適用されない。要素名は違...
View ArticleClik here to view.
Qiitaアイコンをhtmlに挿入したい
はじめにこの画像かわいいですよね！！まだまだですが，ポートフォリオ作るときにQiitaのリンクをはろうと思ったのです．ただ，公開されてるのがこれだけなので，とりあえず，貼るのにちょうどいい画像に変換してから，乗っけました．３Dペイントとかも使えるみたいですがよくわからなかったのでpythonで画像加工のプログラムを書きました．たぶん大丈夫だと思うのですが，これがガイドライン的にアウトだったら教えてく...
View ArticleClik here to view.
placeholderが表示されないinputにplaceholderを表示させる
この記事についてtype="date"にplaceholderを指定しているのに表示されず困った事があったので、その原因と解決方法や調査結果をまとめた記事です。placeholderが表示されなかったコードindex.html<inputtype="date"placeholder="placeholder">解決したコード疑似要素を使うと表示できるようになります↓ See the...
View Article
