【初心者でもわかる】cssで使われる透明3種類の使い方
どうも7noteです。CSSで使う透明には大きく3種類あるので、使い分け方について解説。一言に透明、といってもcssでは透明にする方法が3つあります。・ opacity (プロパティ)・ transparent (色)・ rgba(0,0,0,0)...
View ArticleReact.js material-uiでアニメーション@keyframesを設定する方法
React.js material-uiでアニメーション@keyframesを設定する方法自分が設定する時に資料を掘って少し面倒だったので、メモとして残しておきます。選定としてReact.jsのフレームワークmaterial-uiを使っています。まずは下記コンポーネントを作成します。今回はこの<Box className={ classes.circle }...
View ArticleJavaScriptで「マウスが要素上に存在している時に、色が変化する実装」をする
マウスが要素上に存在している時に、色が変化する実装 詳細mouseoverイベントが発火した際にインラインスタイルを追加、 mouseoutイベントが発火した際にインラインスタイルを取り除くことによって実装する Q.インラインスタイルってなに?➟HTML要素の開始タグの中に、style属性を指定して、直接CSSのプロパティを指定する方法<divclass = "〇〇"style =...
View Articleijenims record 2021.02.24
Topics昨日作成した記事(ijenims record 2021.2.23)を、ようやくQiitaにアップすることができた。手間取った原因は、Qiitaへのアカウント登録が不十分であったようである。本日の学習内容freeCodeCamp:Basic CSS 100% complete!(色関係, Fallback,...
View Articlesassの大まかな理解
はじめに学習始めたての初心者のアウトプットなので内容も薄いとは思いますがそれでも見ていただいた方でご指摘があればよろしくお願い致します。今回はsassを利用して便利だと感じたものを大まかに投稿していきます。Sassとは・CSSを効率よく記述することができる言語・sassファイルはcssに変換される変数・変数を定義することができ、クラスに代入する事もできる。・変数は利用する箇所より、前で定義することに...
View ArticlePCとスマホで要素を入れ替えたい場合[レスポンシブ]
概要PC用のデザインを作った後にスマートフォンのデザインに着手し始めてしまったので、要素がPCのための配置になっており、どうにか楽に要素を入れ替えられないかなと思い調べたのでメモします。解決策flex-boxを使って、orderで順番を指定してあげることで解決することができました。index.html<divclass="parent"><divclass="child1...
View ArticleSassの機能でネストが最初に紹介されるけどあまり使わない方が良いと思う
はじめにSassの紹介って大抵最初の方に「セレクターをネストして書けるので見通しが良くなる!コード量が減る!」といった記述があるような気がします。ですが、自分はネストして書かない方が良いと思っているため、理由とともに記事にしました。この記事で分かることクラス名を&でつないでネストして書くデメリット 検索しづらいタグやクラス名をネストして書くデメリット...
View Articlehtmlとcssのメモ
いつか整理します1行が長いけどスクロールバーでなく折り返したい時関連するstylebody{word-wrap:break-word;white-space:pre-wrap;overflow-wrap:break-word;}などを設定する.white-spaceoverflow-wrap
View Article【CSS】BEMの命名ルール。名前が長い時の対応方法
個人メモです。BEMの命名ルールでは塊であるブロックは__、小変更を加えるモディファイヤーは--で表す。連続した単語は-でつなげる。(例: quality-control)この方法では、display: flexなどで入れ子構造の中に更に入れ子がある場合に、ブロック名が複数続いて名前が長くなってしまう。長い名前の例<div...
View ArticleLaravelでページごとに個別のcssを反映させたい
やりたいこと※私は初心者です.blade.phpファイルでは親レイアウトにlayouts/親.blade.php<!DOCUTYPEhtml><htmllang='ja'><head><!--省略--></head><body>@yield('content')</body><html>子.blade.p...
View ArticleCSSのアニメーションの基本
1.transiton本体に設定すること何に対してAnimationを適用させるか.box{transition-property:適用させる全てのcss;/* 適用させるCSSの例:transform, border-radius *//* 初期状態はall...
View Article[Rails6]Sprockets::Rails::Helper::AssetNotPrecompiled in エラーが出た
結論app/assets/config/manifest.jsファイルにコードを一行追加したら解決しました。app/assets/config/manifest.js//=link_tree../images//=link_directory../stylesheets.css#以下を追記//=linkapplication.css環境macOS CatalinaRuby 2.7.2Rails...
View Article[CSS] calc( ) の使い方
calc( ) とは?CSSのcalc( )関数は、プロパティの値を計算式で実行することができます。単位を揃える必要はなく、px, %, em, rem, vw, vhなどの相対単位でも、異なる単位の計算式で値を指定できます。レスポンシブ対応のWebサイトなどを制作するのに便利です。calcは calculation = 計算の略です使い方ルール1,...
View Article【初心者向け】transformを複数指定したい時は書き順に注意!
どうも7noteです。transformを複数書く時は書き順に注意!!!要素を回転、拡大縮小、傾斜、移動することできるtransformですが、複数指定することができます。まずtransformで使える指定の種類は以下の通り。書き方指定方法例移動translatetransform: translate(100px, 100px);回転rotatetransform:...
View Article[CSS] アイコンフォントとCSSでFCバ○セロナ風のユニフォームを表現する(画像未使用)
はじめにアプリの開発段階で作成したパーツの一部を抜粋し、Qiita用に編集して紹介します。今回はメジャーなアイコンフォントであるFontAwesome(以降、FA)とCSSのみで、サッカー好きなら誰でも知ってるあの有名なチームのユニフォームを表現してみました。モチーフは2019/20シーズンのホーム・ユニフォームです。クラブ史上初のチェック柄ということで話題となったもので、和風な表現ではあの特別な刀...
View ArticleQiitaのanalyzeのズレ(なおされた)
明らかに%の改行はいらない。動的生成だろう.css-1tdgsrのword-break: break-all;を初期化、又はここだけ適用しない様にすると治る。2021-02-26 現在12月ぐらいに限定記事にしてサポートに連絡してましたが、最近なおされたみたい。nowrap指定細かい対応感謝ですね
View Article【初心者でもわかる】ラジオボタンの選択で項目を出し分ける方法
どうも7noteです。選択したラジオボタンによって内容を出し分ける方法について。男性にだけ効きたい質問だったり、学生にだけに効きたい質問。または特定の条件にそって要素を出し分け質問項目を変える方法について書きます。今回サンプルで作ったのは普段検索エンジン何を使っているのかによって質問を出し分けるフォームです。※実際に送信ボタンの実装はしていませんので、あくまで出し分け部分のソースのみに特化した記事で...
View Articlehtml10行、js no need、css (と画像少し) だけでこんなことができるコレクション
動機Webフロントエンド開発で役立つサービスまとめ#Codepenおよび CSS Art Resourcesを読んだ。Codepenは、HTML、CSS、JavaScriptによるコード実行環境を提供するサービスです。このサービスの特徴の1として、CSSの作品がアートワークのように多く投稿されており、世界中のCSS職人による素晴らしいギャラリーを堪能することができます。その技術はもはや...
View Article【HTML/CSS】セレクタの種類
セレクタの種類をまとめてみました。以下のコードを例に整理していきます。index.html<divclass="parent"><pclass="child">子(親要素直下のp)</p><!-- ・・・① --><divclass="child"><!-- ・・・②...
View Article