Clik here to view.
【css】【flexbox】レイアウト３分割
※自分用メモです① ３等分レイアウト（marginなし）<!-- ### sampleSection --><sectionid="sampleSection"class="sampleSection...
View ArticleClik here to view.
【初心者でもわかる】CSSだけで8角形を作る方法
どうも7noteです。あまり使う機会は少ないかもですが、CSSだけで8角形の作り方についてちょっと凝ったデザインにするときに役立つtipsを紹介。CSSだけで8角形を作ります。jsで動きとかつけたらおしゃれなサイト作れそう。cssだけで8角形を作るindex.html<divclass="octagon"><divclass="octagon_frame"></div&...
View Article備忘録 VS CodeとHTMLとCSSの使い方リンク集
前提HTMLやCSSを始める前にVS Codeをマスターするのが最優先おすすめリンクVS CodeVS Codeについてはこちらの動画でさっと勉強するのが良いかなVisual Studio Code入門 #01：環境設定と、VSCodeの起動方法いろいろEmmetめちゃ大事！これないとHTMLとCSSいまだにかけないかも(というかやりたくない)笑以下も結構まとまってるVisual Studio...
View ArticleClik here to view.
未使用のjavascript、cssのコードを特定する
はじめに開発が進むにつれ、jsファイルやcssファイルは何かとファイルサイズが膨れます。というのも過去に参照されていたが現在は使用されていないデッドコードが生まれがちだからです。未使用のコードを削除することでファイルサイズが小さくなり読込速度の改善したり、保守性がアップが見込めます。手順ブラウザの開発者ツールを利用することで、どのコードが実行されていないか簡単に調べることができます。開発者ツールを開...
View ArticleLaravel https環境下でCSSが反映されない
目的Laravelでオリジナルのcssファイルを作成しビューファイルに反映しようとしても一切されない問題を解決した話をまとめる原因Laravelアプリが可動しているWebサーバがHTTPS化されていたためcssファイルの読み込み方法が異なるため読み込まれなかった。原因と解決方法下記の様にasset()で記載するとhttps環境下だとCSSファイルを読み込むことができない。<linkrel="s...
View ArticleWordPressで外部からサイトトップにアクセスした時だけ全画面アニメーションを表示したい
やりたいことサイトトップにアクセスしたら全画面のCSSアニメーションを表示リロードでも表示サイト内からトップアクセスした時は表示しない実装フロントページの<body>の直下あたりに以下のタグを追加。header.php<?phpif(is_front_page()):?><divid="enter"><divid="enter-obj1"><p&...
View ArticleGatsbyでページごとに個別にCSSを読み込む方法
HTML, JavaScript, CSSで構築された既存のサイトを、Gatsbyで再構築しています。一般的なサイトでは、CSSの読み込みは<link rel="stylesheet" href="style.css">...
View ArticleClik here to view.
HSL / HSV より人間に寄り添った色表現 CIE L*C*h を使いたい
CIE L*C*h カラーモデルベースの色相環カラーピッカーを作りました。https://luncheon.github.io/lch-color-wheel/この記事はその経緯です。HSL 色表現と色相変数CSS で使える色表現の 1 つに HSL カラーモデルがあります。 HSL では色相（Hue）、彩度（Saturation）、輝度（Lightness）の 3 軸で色を表現します。色相を...
View Article[CSS] 親要素を無視して、子要素を画面いっぱいに広げる
containerで1024pxとかなっている時、背景色だけいっぱいに広げたい、とか言うときに使う。innerはcontainerと同じ幅に設定。コンテンツの横幅は揃って、ignore~の箇所の背景色のみ画面いっぱいになる。<divclass="container"><divclass="background-orange...
View ArticleClik here to view.
Sass(CSS) 等間隔に配置したい
前提SassのSCSS記法を用いる。index.html<divclass="wrap"><divclass="circle"></div><divclass="circle"></div><divclass="circle"></div><divclass="circle"></div>&l...
View ArticleSass for文で楽したい
前提SassのSCSS記法を用いる。前回の続き。https://qiita.com/mei0210/items/5fdeef361249aa3a2f9astyle.scss@mediascreenand(max-width:900px)and(min-width:701px){width:calc(100%/4);}@mediascreenand(max-width:1100px)and(min-w...
View ArticleVuetify使うとmarginやpaddingの調整がめっちゃ楽な件
VuetifyとはVuetifyとはVue.jsやNuxt.jsのプロジェクトで使用することのできるUIライブラリです。※Vuetify実際に私もよく使っていて、とても気に入っています。...
View Article[Vuetify] v-mainはまだ使わない方がいい？？
先日投稿したこちらの記事。※Vuetify 2.3.0からv-contentが非推奨になった。Vuetifyの公式GitHubのReleaseノートからも確認できるように、 Vuetify...
View ArticleClik here to view.
【初心者でもわかる】cssだけでスライドショー風の横スクロールできるカルーセルの作り方
どうも7noteです。CSSだけで作れるカルーセルの作り方カルーセルといえば、東京にあるとしまえんが最近閉園になりました。わたしはいったことがないのですがカルーセルエルドラドが有名らしいですね。このカルーセルという言葉はフランス語で回転台とか、回転木馬を意味する言葉で、日本でいうところのメリーゴーランド（これは英語）ですね。なのであまりカルーセルという言葉は聞き慣れないと思いますが、WEB業界では以...
View ArticleClik here to view.
transitionの働きについて
transitionは4つのプロパティを一括で指定できる。・transition-property -> アニメーションさせるプロパティを指定・transition-duration -> 時間（アニメーションが動いている間）・transition-timing-function -> タイミング・transition-delay ->...
View Articleviewportでレスポンシブしている時にPC版表示をする
環境初書：2020/09/08タイトルの付け方が適当な気がしてならないが、いいのが思いつかなかった前提<metaname="viewport"content="width=device-width, initial-scale=1.0,minimum-scale=1.0">viewportでdevice-widthを使用していて、cssで@media screen and...
View ArticleClik here to view.
css animationでいい感じに重力を再現する
// PC.pop-float-button{animation:pop-animation1.4s;animation-delay:1s;animation-timing-function:ease-in;}@keyframespop-animation{0%,100% {bottom:100px;}30% {bottom:115px;}50% {bottom:100px;}80%...
View Article