Clik here to view.
Clik here to view.
【初心者でもわかる】ちょっと浮くボタンの作り方と、押した風のボタンの作り方
どうも7noteです。2種類の動きアリのボタンの作り方。ランディングページ（LP）や訴求が強いページなどでもよく使われる、動くボタンを作っていきます。今回は2種類のボタンを作っていきます。ふわっと浮くボタン押した風になるボタンふわっと浮くボタンの作り方index.html<spanclass="btn">ふわボタン</span>style.css.btn{color:#333...
View ArticleClik here to view.
【jQuery】モーダル（表示・非表示）、送信ボタンを押すとwindowアラートを表示させる。
はじめに 年々、様々な企業・地方公共団体のサイトの作りこみが洗練されてきている気がします。ちょっとした地元のお店でも動的でリッチなホームページを持っていたり。 そのようなサイトを作るうえで必須のフロントエンド言語の力をつけたいと感じたため、今回はjQueryの記事を上げたいと思います。...
View ArticleLaravel7 でCSSが読み込めない
Laravel 7.25.0です。CSSの場所： Laravel/public/css/app.cssHTMLの場所 Laravel/resources/views/layouts.blade.php問題点何故かCSSが読み込めなかった。解決<link rel="stylesheet" href="/css/app.css"> を<link rel="stylesheet"...
View Articleswiperでエラーが出ないのに、意図しない動き
なんか動きがきもいコンソールエラーとか吐いてない、意味わかんない原因はeasingでした必死にjsと睨めっこしたって、開発画面を凝視してエラー探したってあるわけない。だってeasingはcss animationで上書きして指定するんだもの。感想アニメーションをどっちに任せるか、迷うところ。厳密に定義して、readmeに書いた方がいい。（コレに限らず、どっちの言語でも表現できるようなやつは）...
View Articleスクロールダウンしたときにヌルッとでてくるヘッダーの作り方
はじめにWeb制作をしていくなかで、スクロールダウンをしたときにヘッダーとは異なるヘッダーを常時だしておきたいときに、こちらの方法で実装しました。備忘録として、メモを残しておきます。コードの書きかたclass名はjsが適用されるときはプリフィックスとして、jsを付けています。index.html<divid="js-header"><divclass="js-header__men...
View Articleクイズアプリを作ってみた
クイズアプリを作りましたhttps://siruba75.github.io/Rabbit_Quiz/ドットインストールのクイズアプリを作る講座を見て、一度選択肢をクリックすると回答が出てきてそこでクイズが終わってしまうのが残念に感じ、選択肢を選べるようにするにはどうすればいいのかを自分なりに考えましたこちらがソースコードですhttps://github.com/siruba75/Rabbit_Qu...
View Article画像の間の隙間
画像の中に隙間ができてチョベリバ( *｀ω´)cssの親子要素に以下を加えいました.top-logo-class{ position: fixed; text-align:center;//加える } .header-image{ width: 100vw; height:20vh; vertical-align:top;//加える直りましたーー
View ArticleClik here to view.
【Laravel】public/css内のCSSを読み込まないエラー 〜 net::ERR_CONNECTION_CLOSED〜
【背景】AWSからVagrantにローカル環境を変えて、開発を行う。 Viewを作成時に、コンパイルしたcssを読み込もうしても、Viewに反映されず行き詰まる。【状況の確認】Bladeファイルのheadタグ内にCSSを読み込む記述がされているか確認。<link href="{{ secure_asset('css/app.css') }}" rel="stylesheet">...
View Article（初心者向け）CSSホバーアニメーションの実装方法
この記事で得られるものCSSのホバーのアニメーションの実装の考え方がわかるCSSでホバーのアニメーションの実装方法を順を追って理解できる考え方が理解できるため、サンプルコードのコピペではなく応用したコードが書ける想定読者CSSのセレクタ、プロパティの基本は知っているが、ホバーアニメーションを書こうと思うと混乱する方動くものは書けるが、正しい綺麗な書き方を知りたい方コードレビューでプロパティの重複や不...
View Article【初心者向け】select要素にプレースホルダーを付ける方法と付けられない理由の考察
どうも7noteです。select要素のプレースホルダーについて。ちょっと変な矛盾しているタイトルですが、ご了承ください。先日、デザインに合わせてコーディングをしていた時のことなのですが、select要素にplaceholderのような見た目を付ける場面に出会いました。私もいろいろ調べてみたのですが、厳密にはselect要素にplaceholderを指定できません（指定しても何もなりません）。とりあ...
View Article【HTML&CSS】CSSで使う単位とその意味
プログラミング勉強日記2020年10月20日px,%,emなどサイズを指定する単位はたくさんあって、それぞれの違い理解しておかないといけないと思ったのでまとめる。ピクセル単位(px) ピクセルはサイズを固定する単位。1ピクセルは画面上ではドット1個で表示する。 ピクセル単位は柔軟性に欠けるのでfont-sizeの設定には向いてない。Em単位(em)...
View ArticleClik here to view.
レスポンシブWEBデザイン
レスポンシブWEBデザインについて目的レスポンシブWebデザインとは何か理解することWebサイトをレスポンシブ対応にする方法を理解すること下記3行目の部分<head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,...
View ArticleCSS Containmentとcontent-visibilityによるパフォーマンス改善
概要Chrome85にて実装されたcontent-visibilityプロパティーと、それに関連するCSS Containmentという仕様について調べたメモです.間違い等ありましたらご指摘いただけると幸いです.Browser SupportChrome 85 ~Edge 85 ~CSS ContainmentCSS...
View Articleリンクを押したときに青から紫ではなく、別の色に変える方法
はじめに結論：疑似クラスで解決できる疑似クラスとは疑似クラスとは、指定の要素が特定の状態である場合にスタイルを適用させるセレクタ。【初心者向け】CSSの擬似要素と擬似クラスを理解しよう！解決方法リンクの状態によって解決方法は2種類。既にリンク先に訪問したことがある状態 ⇒ :visited疑似クラスリンク上にフォーカスがある状態 ⇒ :focus疑似クラス既にリンク先に訪問したことがある状態...
View ArticleドットインストールEmment CSS編
Emmetチートシートhttps://docs.emmet.io/cheat-sheet/ドットインストールEmmethttps://dotinstall.com/lessons/basic_emmet_v3/5030108 margin,paddingを展開してみよう 09 CSSのプロパティを展開してみよう08margin,paddingを展開してみようmmargin: ; ppadding:...
View ArticleBEM(Block Element Modifier)とは
HTMLのクラス名を好き勝手書いてしまうと、共同での開発で修正しづらいという問題が起きてしまいます。そこで、後から改修しやすい設計にする手法の一つであるBEMについて解説していきます。BEMとはBlock, Element, Modifierの頭文字をとってBEMという名前になっています。BEMの書き方Block, Elementはアンダースコア二つでつなぎます。 Element,...
View Article【HTML/CSS基礎】インライン要素とブロック要素/widthとheight
まずインライン要素とブロック要素と聞いて何を思い浮かべます？僕>>width/heightが決めれたり、横いっぱい伸びたり、隣に並んでくれたりする要素？値？でしょ！びっくりするくらいざっくりとでしか覚えてません。。その都度、ネットで調べて適宜対応しています。しかし！！！もう頭の中に入れて、調べたくない、、、調べる時間がもったいない、、、そんな気がするので、備忘録として残します。アウトプッ...
View ArticleRailsにBootstrapを導入!!
RailsにBootstrapを導入する方法を説明致します。手順は、とても簡単ですのでご参考にどうぞ！！手順は、４つあります。手順1.Bootstrapのインストール 2.SCSSファイルの作成 3.JSファイルの修正 4.Rails（Puma）の再起動1.BootstrapをgemでインストールRailsでBootstrapを使う場合は、gemを使ってインストールする方法が一般的です。...
View ArticleClik here to view.
【作ってみた】CSSだけで、右から左に流れる文字。簡単作成ツールも紹介！
どうも7noteです。CSSで流れる文字の作り方。きれいな液晶パネルが増えてきたので、電光掲示板のようなものは少し減ってきたのかな？と思いますが、電光掲示板にあるような右から左に流れる文字をCSSで再現する方法です。こんなやつソースindex.html<divclass="text"><p>次は〜〇〇駅 次は〜〇〇駅...
View Article
