スタイルガイドstorybook for html を使おうとした時に起こったエラーとその解決方法
storybook を初めて使ったのですが、公式ページに書いてある手順を通りにstorybookを起動しようとするとなぜかエラーが出たので、また同じことにならないよう、解決方法をメモしておきます。storybookを使うには、reactなど...
もち
スタイルガイド
しょーごさんの課題しょーごさんの 中級Ex課題 の備忘録
中級Ex課題でやってきたことを、忘れないようにするためにブログに残しておきます。もち自分が作った、中級Ex課題のサイトはこちらですユーザー名: mothi001パスワード: mothi001しょーごさんの課題についてはこちらをどうぞ！↓中級...
しょーごさんの課題しょーごさんの中級課題Exの 下層ページ の制作過程
下層ページはどのページもほぼ同じ構成をしていたので、同じパーツの部分はコンポーネントとして作成し、使い回すことでだいぶ楽になりました。メディアだけが作るのが難し目なので、メディアの解説をちょっとだけさせていただきます。メディアは、画像とテキ...
しょーごさんの課題しょーごさんの中級課題Exの plan と news の制作過程
planswiperを使いスマホの時はスライダーになるようにしました。銀ねこアトリエさんの記事が参考になりました！銀ねこアトリエさんの記事にも書いてありますが、jsのコードだけ書いておきます。import Swiper from "swip...
しょーごさんの課題しょーごさんの中級課題Exの intro と service の制作過程
intro縦書きにするために、writing-mode: vertical-rl;を指定。縦書き時のwidthとheighの仕様一番混乱したのが、縦書きの時はwidthとheightの仕様が逆転？することでした。縦書き時は、widthは10...
しょーごさんの課題しょーごさんの中級課題Exの header と mv(fv) の制作過程
header各種要素の並べ方ロゴ、グローバルナビゲーション、宿泊予約、ハンバーガーメニューの配置については、headerにdisplay: flex;と各子要素にmargin-leftを使い調整しています。flex と margin の関係...
CSScss でスムーススクロールを有効にしたときの位置調整とページ内検索には効かないようにする方法
もちjavascriptを使わずにスムーススクロールを実装できるscroll-behaviorを使った際に、ページ内検索などにも影響が出るのを防ぐ方法と、ヘッダーなどが被らないようにする方法をお伝えします。 scroll-behavior:...
CSSjavascript にほとんど頼らず css だけで滑らかなアコーディオンを作る
もちjsのプロパティ scrollHeight を使って、JQueryなしで滑らかなスクロールにしてみようと色々やってみたのですが、自力でやるのは無理そうだなと思い調べたら、jsを使わない滑らかなアコーディオンを作る方法を見つけたので備忘録...
CSSflex プロパティ と grow shrink basis について調べてみた
もちflexプロパティの仕様とgrow shrink basis について分かったことをお伝えします！flexプロパティの仕様について解説した後、grow shrink basis について解説していきます。flexプロパティ説明flexプ...
CSSborderにgradientを適用させる方法
もちborder の色をカラフルにする方法をお伝えします！ See the Pen Untitled by mothihuku (@mothi002) on CodePen.↓の二つを指定するとカラフルになります。border: 1...