CSSだけでフリーグラデーションっぽい背景を作る
これは何 フリーグラデーションっぽいグラフィックが使われる機会が増えているので、CSSだけでそれっぽい背景を作る方法をまとめました なお、あくまで「それっぽい」です よりリッチな表現を求めたい場合は素直にグラフィック制作ソフトで作った方が良いと思います また、記事投稿イベント「3000文字Tips - 知ると便利なTipsをみんなへ届けよう」への投稿記事でもあります 完成品 リポジトリとGitHub...
View Article【初心者でもわかる】疑似要素でアイコンを付けたらテキストと微妙にズレる時の対処法
どうも7noteです。疑似要素でテキストの横にアイコンを付けると微妙に位置がズレてしまう場合の対処法について解説 このように、テキストの前にアイコンを付けると微妙にズレてしまう場合に、いい感じに上下中央にもっていく方法を解説します。 「ちょっとズレてしまった例」 ソース index.html <p>テキスト</p> style.css p::before { content:...
View Articleかんたん！tailwindcssを使ったプログレスバーの作成方法
はじめに こんにちわ、dtakkiyです! あなたが上図の様なプログレスバーを作るとしたら、どのような実装をしますか？ 色々な実装方法が考えられますが、今回はtailwindcssのGridを使った方法を紹介したいと思います。 段階を踏みながら解説するので、順番に進めていけば誰でもプログレスバーを完成させることができると思います。 動作検証 以下の手順は、tailwindcss version...
View Article【CSS】li要素を横並びにする主な方法
はじめに サイト模写を行っていた時に、li要素を横並びにする方法がわからなかったのでまとめました。 今回紹介する以外にも横並びにする方法はありますが、今回は私が調べて使ってみた方法について書いています。 li要素を横並びにする主な方法 float: left; inline-block化 float: left; li要素をfloat:leftで横並びにする li{ float: left; }...
View Article当たり障りのないダミー動画、 ダミー画像、 ダミーテキスト
HTMLコーディングのときにとりあえずなにか入れておくためのもの。 動画 mp4 あんまり好きじゃないけどこれくらいしか見つからず。 もうちょっとかっこつけたフリーの動画はないものか。 YouTube 基本的に YouTube公式の動画を使えばいいけど、YouTuberの顔がどかーんと大きくサムネイルに使用されているものも多いのでこれが無難。 YouTube公式 - YouTube Music -...
View Article【CSS初心者】CSS基礎知識 総まとめ
CSSを学習する上で最低限必要な知識をまとめました。 「これからプログラミングを学習する方」や「基礎知識復習したいわ！」 って方の参考になればと思います！ CSSって覚えてもすぐ忘れてしまいますよね、、、 忘れてもすぐ取り出せるように、ここにまとめておきます!! 都度学んだことを更新していきます。 基礎知識 【CSS（Cascading Style Sheets）】...
View ArticleSCSSでアニメーション（初心者向け）
○SCSSでアニメーションを使うための方法をまとめました。 本当に初めて使う人向けのため、濃い内容ではありません。ご了承ください。 SCSSでアニメーションを使おうと思った時にヒットする記事が古いものばかりだったため、 今の条件で動く記事を書いてみました。 なお、scssのファイル構成はこちらの方のやり方を参考にさせていただいております。...
View ArticlescrollMagic スクロールでふわっと要素が出るやつ
ScrollMagicを使ってふわっと要素を出す方法 スクロールと連動させて何かをしたいならScrollMagic一択かなと自分は思っています。 自分が忘れないための備忘録 scrollMagicの公式のデモサイトはこちら https://scrollmagic.io/ サクッとデモだけ見たい人 サクッと実装だけみたい人は下記より見てください CodePenのリンク...
View Article色々書き比べた結果Tailwind CSSにしたという話
Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は？何いってんの？ って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。 はじめに 以前、Tailwind...
View Article【図解】どうして「vertical-align: middle;」でimg要素下の余白がなくなるのか？を解説してみた
HTML・CSSでコーディングしている際、img要素下に謎の余白が出てくることってありませんか？ これは、img要素にvertical-align: middle;を設定すれば解決します。 でも、 そもそもなぜこのような現象が起こっているのか なぜこれで解決するのか について理解している方は少ないのではないでしょうか。 この記事ではその辺りについて解説していきます。...
View Articleテーブルタグについて
テーブルタグを外すと、tdのテーブルの要素がはずれて、 テーブルではなく、列でcssを記載することができた。 列ごとで、しかも奇数の列にだけ色を付けるのをやってたんだけど テーブルタグついてるとテーブルごとだから、テーブルとテーブルの間は白になってて、列全体がその背景色になってくれなかった。 普通にtableタグをはずしたら一列ずつきれいにつくられた。
View ArticleCSSのcontentプロパティで画像を指定してサイズ調整する方法
使いどころ CSSの中で、画像URLの指定とサイズの指定を同時に行いたいとき。 @media screen and ( max-width: 600px )を使ってpcとモバイルで画像を切り替えたいとき。 imgの「widthとheightが効かない」とき。 方法 display: inline-block;が重要です。 index.html <a...
View Article基礎：HTMLとCSSで書くときのコツ
完全に個人的にマークアップを学習するにあたって、ここさえ押さえておけば、という部分を書き出しました！！ 本内容はHTMLとCSSの概念は理解したけど、実際に書いているときのポイントが掴めない方にオススメです。 また先にお伝えしておくと完全に自己満ですので、予めご了承ください😌 それじゃぁ、早速いきましょう！！！ ITリテラシー ローカルとクラウド...
View Article【jQuery】タブの作成方法
完成形 SCSSを使用 jQueryを使用 See the Pen RwpJKyX by c-koch0514 (@c-koch0514) on CodePen. HTML html <!----------------------- タブ -------------------------> <div id="tab" class="group"> <ul...
View Article【初心者でもわかる】borderは直線を引くだけじゃない！borderを使って出来ること6選+おまけ2つ
どうも7noteです。borderを使って直線を引く以外のできることをまとめました div { border: solid 1px #000; } これ以外使ったことない・・・なんてことありませんか？ 知ってるようで知らないかもしれない、borderでできることをいろいろまとめました。 「直線以外も引ける」 わりと基本的な事ですが一応。...
View ArticleReact+Material UIで、スタイルをJS in CSSで書く方法まとめ
株式会社ユニフェイスの大竹です。 製造実行システムIB-MesのWebアプリ版・IB-Mes SaaSのフロントエンドを担当しています。 IB-Mes SaaSではReact,TypescriptとMaterial UIを使っているのですが、毎回JS in CSSの書き方に詰まってしまうので、まとめました 以下の内容を読んで、 わかること:JS in CSSを利用したCSSの書き方...
View Articleそれでも私がTailwind CSSではなく、CSS Modulesを推す理由
https://qiita.com/Takazudo/items/78ee15564bfefdea844c こちらの記事がバズっていたので、読ませていただきました。 これまで主観的な印象と薄い議論で賛否が分かれていたTailwind CSSについてこれまでのcssの技術の変遷を踏まえて技術的にかなり踏み込まれた考察の上で選定の理由が書かれており、Tailwind...
View ArticleHTML,CSSのよく使うものまとめ
HTMLとCSSでよく使うものまとめ(雑) リンク 画像を表示 リスト（先頭に黒点） , リスト , 文字色 color:色; 文字の大きさ font-size:大きさpx; 書体 font-family:種類; 背景色...
View ArticleCSSの詳細度について
はじめに cssで装飾する場合に詳細度というものがあり、どのCSSプロパティが適用されるかを決める手段があるのでアウトプットしていきます。 適用されるstyleについて spanタグ まずは簡単に記述していきます。 index.html <!DOCTYPE html> <html lang="en"> <head> <!-- 省略 -->...
View Article外部のHTML,CSS,JavaScriptをRailsで表示させる。
自作のWebアプリケーションを作成するときに、あらかじめHTMLテンプレートでテンプレートを作成した後に、それをRailsのアプリケーションに反映させよう、と言う考えのもと、作成しました。 結論めっちゃ失敗した 簡単に失敗したところ記載します。 単純にassets/stylesheet/に配置 CSSは読み込んでくれました。 ただ中身に注意。...
View Article