LaravelでSassを反映させる方法と反映されない時の対処
はじめに LaravelでSassを導入する流れと、実際に私がbladeに反映されずつまづいて改善した流れを書いていきます！ ※既にnpm installが実行された後の内容です。 この記事の内容 Sass導入の流れ Sassが反映されない時の対処 環境 Docker Laravel8.48.2 Sass導入手順 webpack.mix.jsの確認...
View Article《初心者必見》１番最初のJavaScript！#2
目標 JavaScriptで定数を利用し、四角形から丸に変化する図を作成できようになる。 必要知識 HTML、CSSの基礎(Progate) 環境 ・Mac ・VS Code ①divタグ（四角形）を３つ用意 <body> <div class = "box" id="target1"></div> <div class = "box"...
View Articledisplay:flex;と最小限のJavaScriptでシンプルなレスポンシブハンバーガーメニューの実装
スタジオみずたまでWebサイト制作のお仕事をいただいた際に、レスポンシブなハンバーガーメニューをシンプルに実装できたので、知見を共有します。 目標物 PC表示では小型ロゴ＋ナビゲーションメニュー スマホ・タブレットでは大型ロゴ＋ハンバーガーメニュー HTML <link>でfontawesomeを読み込んでいます。その他特筆すべき部分はありません。 <!DOCTYPE...
View Articleリストのaタグを親要素いっぱいにして上下中央揃えにする方法
リストのaタグを親要素いっぱいにして上下中央揃えにする方法 試したこと HTML <div class="wrap-contents"> <ul class="layout div2 nav"> <li class="layout-item"><a...
View Articledisplay: table;での要素の並び替えについて
使い方 横並びにしたい子要素を持つ親要素にdisplay:table;を記述し、子要素にdisplay:table-cell;を記述することで適用させることができる。 内容はhtmlのtable要素を使用したテーブルレイアウトと同じでcssでできるようにしたものです。 高さを揃えた横並びのレイアウトや、縦方向の中央揃えがより簡単にできるようになる。 コードの例 ruby.rb <div...
View Article無料で自動翻訳してくれる機能をwebにいれこむ
入り 翻訳機能ってなってくると、ロケールファイルをつくっていて人力で翻訳するパターンか、GoogleTranslateだったりやDeepLなどのAPIをつかって自動で翻訳する方法があるかと思います。 まずは、いろいろのパターンのメリット・デメリットを書いて行こうかと思います。 いろいろな方法に対してのメリット・デメリット ロケールファイル 人力でコツコツ翻訳ファイルをつくっていくやり方 メリット...
View Article【ネタ】CSSセレクタで複数条件を短く指定するトリック？
適切なタイトルが思いつかなかったので適当。(良いタイトルの編集リクエストください) 最初に言っておくと、この書き方は単純に分かりにくいし使用を推奨するわけじゃないです。 CSSはsass使うなら使う意味なにもない。 JavaScriptでquerySelectorAll使うときとかたまに便利かもしれない。 説明 ※説明の為に単純化してるので意味はありません。:nth-childとかは使いません。...
View Article《初心者必見》１番最初のJavaScript！＃３
目標 JavaScriptのみで、四角形から丸に変化する図を１００個作成できようになる。 必要知識 HTML、CSSの基礎(Progate) 環境 ・Mac ・VS Code ①HTMLを使用せず、JavaScriptのみで繰り返し処理のfor文を用い四角形を１００こ作成。<body> <script> 'use strict' //...
View Articleinput:hiddenを少し便利にする
最近input:hiddenを使う機会があったので良い方法がないか模索 注意 初投稿なので至らないところがあると思いますが、過不足がありましたらコメントをお願い致します。 コードを使う場合は、ご自由に採用・改変してご利用ください。 ご利用に対するあらゆる影響に関して責任は持てません。 目標 input:hiddenを少し扱いやすくする。...
View ArticleSass(サス) 大学生がまとめてみた
Sassを勉強したきっかけ 大学２年生のryousukeです！！ 自分のアルバイト先で、案件のモックアップをすることになり 受け身になりますが、先輩からSassが便利だからオススメということでSassの勉強を始めました。 メモ代わりに、適当にQiitaの方にまとめてみました。(メモ代わりなので、色とか付けてないです笑) Sassとは 一言で表わすと、SassとはCSSを拡張した言語です。...
View Article[CSS] 孫セレクタってないの…？
CSSど初心者なのですが、孫セレクタってないのかな…と無意味に悩んだのでメモっておきます。 「CSS 孫セレクタ」「CSS セレクタ 孫」的な検索をかけると、サジェストにワードが出るのに検索結果にそれっぽい内容の記事が一切ヒットしない！ 子孫セレクタについてのページばっかりヒットします。 この記事がヒットするようになったらいいですね。 孫セレクタ＝子セレクタ＋全称セレクタ＋子セレクタ...
View Articleブロック要素の高さ
現状 HTMLとCSSを始めたばかり。懸命に見本サイト模倣中 問題点 インライン要素／ブロック要素の区別が曖昧で、高さにつまづきがち 覚えるべきこと ・ブロック要素（height:auto) heightの指定がない限り”高さは内包する要素に依存する” ※中身の要素に合わせるプロパティ ・display:block／inline-block／table 高さ指定可能...
View Articleレスポンシブのときfont-sizeを可変対応させるCSS/SCSS
レスポンシブサイトでするっと可変するfont-size 最近はハードが増えたので、メディアクエリで区切るとクライアントさんに怒られる。 うっかり1行でも増えようものなら、デザイナーさんが「デザインと違う」と嘆く。 特にタブレットカンプがないときの「いい感じになるよう頼みます」は厄介だ。いい感じとは？ CSSでcalcが使えるようになったおかげでvwの使い勝手は大変良いが、可変域が広いと面倒だ。...
View Article【CSS】親要素を超えて画面幅いっぱいまで子要素を表示する方法
概要 子要素に下記のmarginを指定することで画面幅最大で表示ができる 前提 親要素がmargin: 0 auto;などで画面中央寄せとなっていること ※親要素の中央を起点としてmarginを取るため、子要素の表示が範囲がおかしくなる(子要素のmarginをいじってみるとわかる) サンプルコード <div class="parent"> <div...
View Article【CSS】背景固定のパララックスデザインをお手軽に実装する方法
概要 backgroundプロパティをいくつか指定するだけ背景固定のパララックスデザインを実装できます。 前提 今回は背景は動かさず固定が前提です。 サンプルコード <div class="parallax"></div> <style> .parallax { /* 基本設定 */ background-image: url('指定画像パス');...
View ArticleCSS 親要素の背景色が表示されない
”親要素の背景色が指定できなくなった場合”の解決策リスト 親要素ボックスに高さ heightを指定 (子要素がその高さを超えてしまった場合はレイアウトが崩れる) 親要素ボックスに overflow: hidden; を指定 (子要素の高さに依存する) 親要素ボックスにclearfixを指定 (親要素ボックスの下にさらにボックスを作るイメージ） 親要素ボックスに float:left; を指定...
View ArticleRailsで架空のCafeのHPを作ってみよう!【1日目】
概要 基本Railsの記法に則り書いていきます！ １から全ての説明ではなく その中であれ？どうやるの？と 疑問に思った点や実装に困った箇所を ピックアップして紹介していきます♩ 設定と準備 ・Rails ・HTML ・CSS ・Javascript(jQuery) ↑上記の言語とフレームワークを使い 架空(自分で考えたテキトーなもの)のCafeの HPを作っていこうと思います！ 1日目で躓いた箇所...
View ArticleChrome の印刷で レイアウト のオプションが表示されず縦横選べないケース
いつからこうなってたのかわからない。 非表示になってしまうダメパターン @page { size: A4; } @page { size: landscape; } auto にすると表示される @page { size: auto; } 参考
View Article【CSS】ホバーでボタンの背景にグラデーションをかける方法
CSSでbackgroundにグラデーションをかけるには、ちょっとした仕掛けが必要です。 こちらを参考にしたのですが、グラデーションがかかった状態から別色のグラデーションへの変化しか解説がなかったので、無色からグラデーションへの変化をメモとして残しておきます。 参考 https://www.tsukimi.net/css_gradient_hover_animation.html <a...
View Article