Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all 8519 articles
Browse latest View live
↧

【css】【flexbox】レイアウト３分割

September 6, 2020, 4:27 am
$
0
0

※自分用メモです

①　３等分レイアウト（marginなし）

スクリーンショット 2020-09-06 19.42.13.png
スクリーンショット 2020-09-06 19.42.25.png

<!-- ### sampleSection --><sectionid="sampleSection"class="sampleSection sectionPadding"><divclass="inner"><divclass="headingWrapper"><h2class="sectionHeading colorBlack">３等分レイアウト</h2><pclass="subHeading colorBlack">３等分レイアウト</p></div><divclass="sampleWrapper flexWrapper bg-info"><divclass="sampleItem trisectionItem_noGutter bg-primary"><pclass="test01">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem_noGutter bg-secondary"><pclass="test02">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem_noGutter bg-success"><pclass="test03">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div></div></div></section><!--End sampleSection -->
.trisectionItem{width:calc(100%/3);@includemq('sp_lg'){width:100%;&:last-of-type{margin-bottom:0px;}}@includemq('sp_sm'){width:100%;&:last-of-type{margin-bottom:0px;}}}.sampleItem{padding:20px;}

②　３等分レイアウト（margin均等）

スクリーンショット 2020-09-06 19.44.58.png
スクリーンショット 2020-09-06 19.45.12.png

<!-- ### sampleSection --><sectionid="sampleSection"class="sampleSection sectionPadding"><divclass="inner"><divclass="headingWrapper"><h2class="sectionHeading colorBlack">３等分レイアウト</h2><pclass="subHeading colorBlack">３等分レイアウト</p></div><divclass="sampleWrapper flexWrapper bg-info"><divclass="sampleItem trisectionItem bg-primary"><pclass="test01">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem bg-secondary"><pclass="test02">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem bg-success"><pclass="test03">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div></div></div></section><!--End sampleSection -->
.sampleWrapper.trisectionItem{width:calc((100%-200px)/3);margin-right:calc(200px/2);margin-bottom:40px;&:nth-of-type(3n){margin-right:0;}@includemq('sp_lg'){width:100%;margin-right:0;margin-bottom:40px;&:last-of-type{margin-bottom:0px;}}@includemq('sp_sm'){width:100%;margin-right:0;margin-bottom:40px;&:last-of-type{margin-bottom:0px;}}}.sampleItem{padding:20px;}

③　３等分レイアウト（margin均等＋アイテム間に線）

スクリーンショット 2020-09-06 19.54.06.png
スクリーンショット 2020-09-06 20.02.50.png

<!-- ### sampleSection --><sectionid="sampleSection"class="sampleSection sectionPadding"><divclass="inner"><divclass="headingWrapper"><h2class="sectionHeading colorBlack">３等分レイアウト</h2><pclass="subHeading colorBlack">３等分レイアウト</p></div><divclass="sampleWrapper flexWrapper bg-info"><divclass="sampleItem trisectionItem line_between bg-primary"><pclass="test01">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-secondary"><pclass="test02">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-success"><pclass="test03">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-primary"><pclass="test01">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-secondary"><pclass="test02">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-success"><pclass="test03">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div></div></div></section><!--End sampleSection -->
.sampleWrapper.trisectionItem{width:calc((100%-300px)/3);margin-right:calc(300px/2);margin-bottom:50px;&:nth-of-type(3n){margin-right:0;}@includemq('tab_sm'){width:100%;margin-right:0;margin-bottom:50px;&:last-of-type{margin-bottom:0px;}}@includemq('sp_lg'){width:100%;margin-right:0;margin-bottom:50px;&:last-of-type{margin-bottom:0px;}}@includemq('sp_sm'){width:100%;margin-right:0;margin-bottom:50px;&:last-of-type{margin-bottom:0px;}}}.sampleItem.line_between{position:relative;&:after{content:"";position:absolute;display:block;top:38%;//少し上下調整right:calc(-150px/2);height:40px;width:2px;background-color:red;}//３番目は非表示&:nth-of-type(3n){&:after{content:none;}}//ipad以下サイズでは非表示@includemq('tab_sp'){&:after{content:none;}}@includemq('sp_lg'){&:after{content:none;}}@includemq('sp_sm'){&:after{content:none;}}}.sampleItem{padding:20px;}

④　３等分レイアウト PC３列 タブレット２列スマホ１列 （margin均等）

スクリーンショット 2020-09-06 20.10.25.png
スクリーンショット 2020-09-06 20.10.45.png
スクリーンショット 2020-09-06 20.10.53.png

<!-- ### sampleSection --><sectionid="sampleSection"class="sampleSection sectionPadding"><divclass="inner"><divclass="headingWrapper"><h2class="sectionHeading colorBlack">３等分レイアウト</h2><pclass="subHeading colorBlack">３等分レイアウト</p></div><divclass="sampleWrapper flexWrapper bg-info"><divclass="sampleItem trisectionItem line_between bg-primary"><pclass="test01">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-secondary"><pclass="test02">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-success"><pclass="test03">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-primary"><pclass="test04">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-secondary"><pclass="test05">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-success"><pclass="test06">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-primary"><pclass="test07">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-secondary"><pclass="test08">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-success"><pclass="test09">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-primary"><pclass="test10">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-secondary"><pclass="test11">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem line_between bg-success"><pclass="test12">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div></div></div></section><!--End sampleSection -->
.sampleWrapper.trisectionItem{//PCは3列表示width:calc((100%-300px)/3);margin-right:calc(300px/2);margin-bottom:50px;&:nth-of-type(3n){margin-right:0;}//タブレットでは2列表示@includemq('tab_sm'){width:calc((100%-100px)/2);margin-right:100px;margin-bottom:50px;&:nth-of-type(2n){margin-right:0;}&:nth-of-type(3n){margin-right:100px;}&:nth-of-type(6n){margin-right:0;}}//スマホでは1列表示@includemq('sp_lg'){width:100%;margin-right:0;margin-bottom:50px;&:last-of-type{margin-bottom:0px;}}@includemq('sp_sm'){width:100%;margin-right:0;margin-bottom:50px;&:last-of-type{margin-bottom:0px;}}}.sampleItem{padding:20px;}

⑤　３等分レイアウト PC３列 タブレット２列スマホ2列 （margin均等）

スクリーンショット 2020-09-06 20.25.37.png
スクリーンショット 2020-09-06 20.25.44.png
スクリーンショット 2020-09-06 20.25.53.png

<!-- ### sampleSection --><sectionid="sampleSection"class="sampleSection sectionPadding"><divclass="inner"><divclass="headingWrapper"><h2class="sectionHeading colorBlack">３等分レイアウト</h2><pclass="subHeading colorBlack">３等分レイアウト</p></div><divclass="sampleWrapper flexWrapper bg-info"><divclass="sampleItem trisectionItem bg-primary"><pclass="test01">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem bg-secondary"><pclass="test02">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem bg-success"><pclass="test03">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem bg-primary"><pclass="test04">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem bg-secondary"><pclass="test05">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div><divclass="sampleItem trisectionItem bg-success"><pclass="test06">テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                    テキストテキストテキストテキストテキストテキスト
                </p></div></div></div></section><!--End sampleSection -->
.sampleWrapper.trisectionItem{width:calc((100%-100px)/3);margin-right:calc(100px/2);margin-bottom:30px;&:nth-of-type(3n){margin-right:0;}//タブレットは２列@includemq('tab_sm'){width:calc((100%-100px)/2);margin-right:100px;margin-bottom:30px;&:nth-of-type(2n){margin-right:0;}&:nth-of-type(3n){margin-right:100px;}&:nth-of-type(6n){margin-right:0;}}//スマホも２列@includemq('sp_lg'){width:calc((100%-40px)/2);margin-right:40px;//アイテム間隔調整margin-bottom:30px;&:nth-of-type(2n){margin-right:0;}&:nth-of-type(3n){margin-right:40px;//アイテム間隔調整}&:nth-of-type(6n){margin-right:0;}}@includemq('sp_sm'){width:calc((100%-40px)/2);margin-right:40px;//アイテム間隔調整margin-bottom:30px;&:nth-of-type(2n){margin-right:0;}&:nth-of-type(3n){margin-right:40px;//アイテム間隔調整}&:nth-of-type(6n){margin-right:0;}}}.sampleItem{padding:20px;}
↧
Search

【初心者でもわかる】CSSだけで8角形を作る方法

September 6, 2020, 4:37 am
$
0
0

どうも7noteです。あまり使う機会は少ないかもですが、CSSだけで8角形の作り方について

ちょっと凝ったデザインにするときに役立つtipsを紹介。

CSSだけで8角形を作ります。jsで動きとかつけたらおしゃれなサイト作れそう。

cssだけで8角形を作る

index.html
<divclass="octagon"><divclass="octagon_frame"></div></div>
style.css
.octagon{width:240px;height:240px;position:relative;background:#ccf;/* 8角形の色or画像 */}.octagon::before{content:'';width:0;height:0;border:35pxsolidtransparent;border-top-color:#fff;border-left-color:#fff;position:absolute;top:0;left:0;}.octagon::after{content:'';width:0;height:0;border:35pxsolidtransparent;border-top-color:#fff;border-right-color:#fff;position:absolute;top:0;right:0;}.octagon_frame::before{content:'';width:0;height:0;border:35pxsolidtransparent;border-bottom-color:#fff;border-left-color:#fff;position:absolute;bottom:0;left:0;}.octagon_frame::after{content:'';width:0;height:0;border:35pxsolidtransparent;border-bottom-color:#fff;border-right-color:#fff;position:absolute;bottom:0;right:0;}

結果
8kaku.ong.png

画像も入れれます。
8kakuimg.png

いっぱい並べておしゃれな背景にも。
bg.png

疑似要素を計4つ使い、四隅に背景色と同じ色を配置することで8角形に見せています。

三角形の大きさの計算ですが、borderの数字は大体横幅の7分の1くらいの数字を入れると、ほぼほぼきれいな8角形に見えます。

まとめ

6角形の方法もまた記事書きますね。
マウスカーソルでhoberした時、くるくる回転させるとかやってみたい。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

↧
↧

備忘録　VS CodeとHTMLとCSSの使い方リンク集

September 6, 2020, 10:30 am
$
0
0

前提

HTMLやCSSを始める前にVS Codeをマスターするのが最優先

おすすめリンク

VS Code

VS Codeについてはこちらの動画でさっと勉強するのが良いかな

Visual Studio Code入門 #01：環境設定と、VSCodeの起動方法いろいろ

Emmetめちゃ大事！これないとHTMLとCSSいまだにかけないかも(というかやりたくない)笑

以下も結構まとまってる
Visual Studio Codeのうれしい機能を使いこなして、初心者を最速で脱出する！《VSCode実践入門》

HTMLとCSSをEmmetで書いてみる！：Visual Studio Code

VS Codeのショートカットがまとまってる！コード書く前にこっちをやる！

【Mac版】 VisualStudioCode キーボードショートカット

拡張機能大事！これないと無理ゲー!

フロントエンジニア必須の拡張機能7選

VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか)

デバッグできるようにならないとどこでNGかわからん(これはRubyとかJSのためだけど)。

Rails用で場違いですが。。VS Codeの使用方法として。。

Visual Studio CodeによるRubyのデバッグ

HTML

このサイトみて主要なものをひたすらググってVS Codeで試す！

HTML5の主要タグ一覧

idとclassの違い

HTMLのdiv classとは？５分でわかる事例付き解説

idとnameの違い

input typeタグで、idとnameは同じ名前にしなければいけないの？

CSS

MarginとかPaddingとかの理解

これはChromeで検証ツールで試行錯誤するしかない！
見れば一髪！

CSSのwidthとheighの関係性がとても分かりやすかった。

CSSのwidth（幅）とheight（高さ）の指定方法をマスターしよう

CSSのdhisplayの概念がとても分かりやすくまとまっていた。

【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

おわりに

自分で書きたくないのでメモとしてリンクを貼った。良いサイトがあれば追記していこうと思う。

↧

未使用のjavascript、cssのコードを特定する

September 6, 2020, 3:04 pm
$
0
0

はじめに

開発が進むにつれ、jsファイルやcssファイルは何かとファイルサイズが膨れます。
というのも過去に参照されていたが現在は使用されていないデッドコードが生まれがちだからです。

未使用のコードを削除することでファイルサイズが小さくなり読込速度の改善したり、保守性がアップが見込めます。

手順

ブラウザの開発者ツールを利用することで、どのコードが実行されていないか簡単に調べることができます。

  1. 開発者ツールを開く（WindowsならCtrl＋Shift＋I、MacならCommand＋Option＋I）
  2. 縦の3点リーダ を選択
  3. More tools を選択
  4. Coverage を選択
  5. ページを再読み込み

image48.png

CoverageからJSやCSSのコードの使用率がわかります。

image46.png

赤いラインで表示されているコードが未使用のコードになります。
ただし、未使用だからと言って不要なコードとは限りません。

  • if/else の判定により片方だけ実行されるコード
  • エラーが発生した時に実行されるコード
  • 特定の操作をした際に実行されるコード
  • 特定の端末で表示した際に実行されるコード

など、未使用となった理由や背景を見極めた上でコードを削除しましょう。

↧

Laravel https環境下でCSSが反映されない

September 6, 2020, 5:17 pm
$
0
0

目的

  • Laravelでオリジナルのcssファイルを作成しビューファイルに反映しようとしても一切されない問題を解決した話をまとめる

原因

  • Laravelアプリが可動しているWebサーバがHTTPS化されていたためcssファイルの読み込み方法が異なるため読み込まれなかった。

原因と解決方法

  • 下記の様にasset()で記載するとhttps環境下だとCSSファイルを読み込むことができない。

    <linkrel="stylesheet"href="{{ asset('アプリ名ディレクトリ/publicディレクトリからCSSファイルまでのパス') }}">

  • 下記の様にsecure_asset()を用いることによりhttps環境下でもセキュアを保ったままCSSを読み込むことができる。

    <linkrel="stylesheet"href="{{ secure_asset('アプリ名ディレクトリ/publicディレクトリからCSSファイルまでのパス') }}"><!-- 少しだけ具体的に記載する --><linkrel="stylesheet"href="{{ secure_asset('/css/CSSファイル名') }}">

参考文献

↧
↧

WordPressで外部からサイトトップにアクセスした時だけ全画面アニメーションを表示したい

September 6, 2020, 7:36 pm
$
0
0

やりたいこと

  • サイトトップにアクセスしたら全画面のCSSアニメーションを表示
  • リロードでも表示
  • サイト内からトップアクセスした時は表示しない

実装

フロントページの<body>の直下あたりに以下のタグを追加。

header.php
<?phpif(is_front_page()):?><divid="enter"><divid="enter-obj1"><p><spanclass="line1">こ</span><spanclass="line2">ん</span><spanclass="line3">に</span><spanclass="line4">ち</span><spanclass="line5">わ</span></p></div></div><?phpendif;?>

JavaScriptを追加します。
<head>内もしくは、</body>の直前に追加してください。

header.php
<?phpif(is_front_page()):?><script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script><script type="text/javascript">$(function(){//top animation を実行if(window.performance){if(performance.navigation.type===1){// リロードされたtopAnime();}else{// リロードされていないvarref=document.referrer;// リファラ情報を得るvarhereHost=window.location.hostname;// 現在ページのホスト(ドメイン)名を得る// ホスト名が含まれるか探す正規表現を作る(大文字・小文字を区別しない)varsStr="^https?://"+hereHost;varrExp=newRegExp(sStr,"i");// リファラ文字列を判別if(ref.length==0){// リファラなしの場合topAnime();}elseif(ref.match(rExp)){// マッチした場合＝アクセス元が自サイト内の場合$('#enter').addClass('end');}else{// マッチしない場合＝アクセス元がサイト外の場合topAnime();}}}functiontopAnime(){if($('#enter').length){$('body').addClass('runanime');$('#enter p span.line1').delay(1000).queue(function(){$(this).addClass('run').css('opacity','1');});$('#enter p span.line2').delay(2000).queue(function(){$(this).addClass('run').css('opacity','1');});$('#enter p span.line3').delay(3000).queue(function(){$(this).addClass('run').css('opacity','1');});$('#enter p span.line4').delay(4000).queue(function(){$(this).addClass('run').css('opacity','1');});$('#enter p span.line5').delay(5000).queue(function(){$(this).addClass('run').css('opacity','1');});// アニメーションの終了処理$('#enter div#enter-obj1').delay(7000).queue(function(){$(this).addClass('outrun').css('opacity','0');});$('#enter').delay(8000).queue(function(){$(this).addClass('end');$('body').removeClass('runanime');});}}});</script><?phpendif;?>

トップページにアクセスした際のリファラなどを元に、アニメーションを実行する/しないを確定します。
delayの数字は、表示するパーツの数によって調整をしてください。

JavaScriptではclassを順番に追加していく処理しかしてません。細かいアニメーションはCSSで追加してください。

CSSは以下の通りに追加。

style.css
/* enter */#enter,#enterdiv{position:fixed;width:100vw;height:100vh;top:0;left:0;z-index:10000;}body.runanime{position:fixed;overflow:hidden;}body{position:relative;}#enterdiv#enter-obj1{opacity:1;background-color:#fff;position:relative;display:flex;justify-content:center;align-items:center;}#enterdiv#enter-obj1p{text-align:center;padding:0;margin:0;font-size:3em;}#enterdiv#enter-obj1pspan{display:inline-block;margin:05px;opacity:0;}#enterdiv#enter-obj1pspan.run,.run{-webkit-animation:topFadeIn2slinear1;animation:topFadeIn2slinear1;}#enterdiv.outrun{-webkit-animation:topBgOut2slinear1;animation:topBgOut2slinear1;}#enter.end{display:none;}@-webkit-keyframestopFadeIn{0%{opacity:0;}100%{opacity:1;}}@keyframestopFadeIn{0%{opacity:0;}100%{opacity:1;}}@-webkit-keyframestopBgOut{0%{opacity:1;}100%{opacity:0;}}@keyframestopBgOut{0%{opacity:1;}100%{opacity:0;}}

上記のアニメーションでは、文字を１文字ずつフェードインして、全部表示したらフェードアウトする形になっています。

アニメーションが表示されている間、bodyに追加するrunanimeのクラスですが、これはアニメーションの裏で表示されている画面をスクロールさせないための処理です。

サンプルは用意が難しいので割愛します。
実際に試しながら調整してみてください。

↧

Gatsbyでページごとに個別にCSSを読み込む方法

September 6, 2020, 7:50 pm
$
0
0

HTML, JavaScript, CSSで構築された既存のサイトを、Gatsbyで再構築しています。

一般的なサイトでは、CSSの読み込みは

<link rel="stylesheet" href="style.css">

でページごとに読み込むCSSを指定できますが、Gatsbyの場合は少し特殊だったのでメモを残します。

Gatsbyでの一般的なCSSの読み込み方法

  1. gatsby-browser.jsで読み込む
  2. importで読み込む
  3. CSSモジュールを使う

上記の1.の方法は、全ページで使用するCSSの読み込みに適しています。

2.の方法は一見ページごとに個別に読み込むかと思いきや、グローバルスタイルとして読み込まれるので全てのページに反映されてしまいます。

3.の方法は個別にCSSを指定する方法ですが、モジュール化して、要素ごとにclassNameを記述して・・・と既存コードの書き換えが面倒です。

これらの方法は、Gatsbyで推奨されている方法で、サイト高速化のためには取り組むべきことだと理解しています。
ですが、とりあえずGatsbyで動かしたいんだー、面倒なことは後から調整したいんだー！という方は以下の方法を試してみてください。

ページごとに個別にCSSを読み込む方法

結論から言うと以下の方法で、実現できます。

import React from "react"

export default () => (
       require("style.css")
)

各ページの export defaultの中で requireで読み込むことで、
ページごとに個別にCSSを読み込むことができます。

コンポーネント化していて、ページごとに.jsファイルがないという場合は、
下記のようにページ名で場合分けしてCSSを読み込み分けすることができます。

 import React from "react"
 import { withPrefix } from "gatsby"

 export default ({location}) => (
        if (location.pathname == withPrefix ("/pageName/")){
            require("pageName.css")
         }
 )

以上、急場しのぎ的な方法ですが、お試しください。

↧

HSL / HSV より人間に寄り添った色表現 CIE L*C*h を使いたい

September 6, 2020, 10:00 pm
$
0
0

CIE L*C*h カラーモデルベースの色相環カラーピッカーを作りました。
lch-color-wheel
https://luncheon.github.io/lch-color-wheel/

この記事はその経緯です。

HSL 色表現と色相変数

CSS で使える色表現の 1 つに HSL カラーモデルがあります。 HSL では色相（Hue）、彩度（Saturation）、輝度（Lightness）の 3 軸で色を表現します。

色相を CSS カスタムプロパティ（変数）にすれば、彩度と輝度を固定して色相だけ変えることが簡単にできます。

.btn{background-color:hsl(var(--hue),100%,60%);border:2pxsolidhsl(var(--hue),100%,40%);}.btn:hover{box-shadow:008pxhsl(var(--hue),100%,40%);}.outline{background:white;color:hsl(var(--hue),100%,40%);}.primary{--hue:210;}.accent{--hue:330;}
<buttontype="button"class="btn primary">Primary</button><buttontype="button"class="btn accent">Accent</button><buttontype="button"class="btn primary outline">Primary Outline</button><buttontype="button"class="btn accent outline">Accent Outline</button>

スクリーンショット 2020-09-07 11.14.16.png
CodePen

それで、以前、色相環を利用したカラーピッカーを作りました。彩度と明るさを固定して色相を選ぶ、あるいは色相を固定して彩度と明るさを調整するのに最適化しています。（このカラーピッカーは HSL ではなく HSV カラーモデルを採用しています。 HSL モデルのカラーピッカーは私のメンタルモデルに合いませんでした。 HSL と HSV とで色相は同じ値になるので「彩度と明るさを固定して色相を選ぶ」という目的には適います。）
reinvented-color-wheel
https://luncheon.github.io/reinvented-color-wheel/

ところが HSL + 色相変数というアイディアは思ったほどうまくいきませんでした。

同じ輝度でも、黄色や黄緑は明るく、青や紫は暗く見えます。たとえば先ほどのボタンの例を .accent { --hue: 100; }にすると...
スクリーンショット 2020-09-07 11.10.19.png
同じ「明るさ」には感じられないと思います。黄緑のボタンの白い文字「Accent」はコントラストが弱くて非常に読みづらくなっています。

HSL / HSV カラーモデルでは、結局は色相に合わせて輝度 / 明度も調整する必要があるのです。
色相を変えるたびに明度の調整が必要となるようでは、カラーピッカーの使い勝手としてもよろしくありません。

CIE L*C*h カラーモデル

そんな私の悩みを解決するのが CIE L*C*h カラーモデルです。 L* は明度（Lightness）、 C* は彩度（Chroma）、 h は色相（hue）を表します。というとまるで HSL や HSV と同じように聞こえますが、 CIE L*C*h 色空間は人間の知覚に合わせて設計されているそうです。私は色に詳しいわけではないので詳しい解説はできませんが、実際に利用してみると使い勝手が全然違います。
CIE L*C*h 色空間は CIE L*a*b* 色空間から軸の取り方を変えた派生です。 CIE L*C*h の解説記事はあまり見当たりませんでした。

Wikipedia からこの記事にとって重要な部分を引用します。

RGBやCMYKとは異なり、Lab色空間は人間の視覚を近似するよう設計されている。知覚的均等性を重視しており、L成分値は人間の明度の知覚と極めて近い。したがって、カラーバランス調整を正確に行うために出力曲線を a および b の成分で表現したり、コントラストの調整のためにL成分を使ったりといった利用が可能である。

そんなわけで冒頭の話に戻るのですが、 CIE L*C*h カラーモデルベースの色相環カラーピッカーを作りました。
lch-color-wheel
https://luncheon.github.io/lch-color-wheel/

CIE L*C*h カラーモデルを採用したことで、知覚的な明るさを維持したまま色相を変えられるようになりました。プライマリカラーが決まっている状態でアクセントカラーを選ぶような用途では HSL や HSV カラーモデルのカラーピッカーより活躍すると思います。

CSS で CIE L*C*h 色表現が利用可能に（いずれなるかもしれない）

CSS にも lch()色関数が提案されています。

CSS Color Module Level 4 （日本語訳）
https://triple-underscore.github.io/css-color-ja.html

色相を CSS カスタムプロパティにすれば、彩度と明度を固定して色相だけ変えることが簡単にできるようになるかもしれません。

さらには color-adjust(peru lightness -20%);のように色を調整できるようになるかもしれません。

CSS Color Module Level 5 （日本語訳）
https://triple-underscore.github.io/css-color5-ja.html

でもこれらはまだもう少し先の話。

↧
Search

[CSS] 親要素を無視して、子要素を画面いっぱいに広げる

September 7, 2020, 1:22 am
$
0
0

containerで1024pxとかなっている時、
背景色だけいっぱいに広げたい、とか言うときに使う。

innerはcontainerと同じ幅に設定。
コンテンツの横幅は揃って、ignore~の箇所の背景色のみ画面いっぱいになる。

<divclass="container"><divclass="background-orange ignore-parent-width"><divclass="ignore-parent-width-inner"></div></div></div>
.container{width:1024px;min-width:1024px;}.background-orange{background-color:#FFF6F5;}.ignore-parent-width{// 親要素を無視して子要素の幅をいっぱいに広げる https://tecb.jp/blog/1517width:100vw;position:relative;left:50%;transform:translateX(-50%);.ignore-parent-width-inner{width:1024px;min-width:1024px;margin:0auto;}}// スマホ表示@media(max-device-width:480px){.container{width:100%;min-width:100%;}.ignore-parent-width{// 親要素を無視して子要素の幅をいっぱいに広げる https://tecb.jp/blog/1517width:100vw;position:relative;left:50%;transform:translateX(-50%);.ignore-parent-width-inner{width:100%;min-width:100%;margin:0auto;}}}
↧
↧

Sass(CSS) 等間隔に配置したい

September 7, 2020, 1:36 am
$
0
0

前提

SassのSCSS記法を用いる。

index.html
<divclass="wrap"><divclass="circle"></div><divclass="circle"></div><divclass="circle"></div><divclass="circle"></div><divclass="circle"></div><divclass="circle"></div><divclass="circle"></div><divclass="circle"></div></div>
style.scss
.wrap{display:flex;flex-wrap:wrap;width:30%;background:skyblue;.circle{width:80px;height:80px;border-radius:50%;background:blue;}}

スクリーンショット 2020-09-06 14.42.20.png

水色の範囲は画面幅に合わせて３０％としているので、可変である。
ここで実現したいことは、

  • 青丸が等間隔に並ぶ
  • 水色の四角の左右に青丸との間隔が無いようにする
  • 下の段の青丸は上の段の間隔に合わせて左詰めにする
  • 画面幅を変えても、上の条件を満たすようにする

試行錯誤① justify-contentでなんとかしたかった

https://developer.mozilla.org/ja/docs/Web/CSS/justify-content

style.scss
.wrap{display:flex;flex-wrap:wrap;justify-content:space-between;width:30%;background:skyblue;.circle{width:80px;height:80px;border-radius:50%;background:blue;}}

justify-content: space-between; を追加。

スクリーンショット 2020-09-06 14.45.06.png

◎条件を満たしている項目

  • 青丸が等間隔に並ぶ
  • 水色の四角の左右に青丸との間隔が無いようにする

×満たしていない項目

  • 下の段の青丸は上の段の間隔に合わせて左詰めにする

↑を満たすには、justify-contentでは無理そう。

試行錯誤② メディアクエリで頑張る

メディアクエリで青丸の幅を画面サイズに合わせて変える。

style.scss
.wrap{display:flex;flex-wrap:wrap;// justify-content: space-between;width:30%;background:skyblue;.circle{width:calc(100%/3);height:80px;border-radius:50%;background:blue;@mediascreenand(max-width:900px)and(min-width:701px){width:calc(100%/4);}@mediascreenand(max-width:1100px)and(min-width:901px){width:calc(100%/5);}@mediascreenand(max-width:1300px)and(min-width:1101px){width:calc(100%/6);}@mediascreenand(max-width:1500px)and(min-width:1301px){width:calc(100%/7);}}}

video9_6.gif

画面幅を変更しても、条件を満たす配置になった！

画面幅1500pxまでしか書いていないので、もっと増やしたい...
でも、いちいち書くの面倒なので↓

Sassでfor文を書く

style.scss
@mediascreenand(max-width:900px)and(min-width:701px){width:calc(100%/4);}@mediascreenand(max-width:1100px)and(min-width:901px){width:calc(100%/5);}@mediascreenand(max-width:1300px)and(min-width:1101px){width:calc(100%/6);}@mediascreenand(max-width:1500px)and(min-width:1301px){width:calc(100%/7);}

上で地道に書いたこのコードをSassのfor文を使って書いてみる。

次回に続く。https://qiita.com/mei0210/items/ed468882579a6d3d902e

↧

Sass for文で楽したい

September 7, 2020, 1:35 am
$
0
0

前提

SassのSCSS記法を用いる。

前回の続き。https://qiita.com/mei0210/items/5fdeef361249aa3a2f9a

style.scss
@mediascreenand(max-width:900px)and(min-width:701px){width:calc(100%/4);}@mediascreenand(max-width:1100px)and(min-width:901px){width:calc(100%/5);}@mediascreenand(max-width:1300px)and(min-width:1101px){width:calc(100%/6);}@mediascreenand(max-width:1500px)and(min-width:1301px){width:calc(100%/7);}

max-width 1500pxまでメディアクエリで書いた。
max-width 2900pxまで同じように書いていきたい。
地道に書いていくのはつらいので...

for文で書く

style.scss
@for$ifrom0through10{@media(max-width:$i*200+900px)and(min-width:$i*200+701px){width:#{100%/($i+4)};}}

これだけ！

cssにコンパイル↓

style.css
@media(max-width:900px)and(min-width:701px){.wrap.circle{width:25%;}}@media(max-width:1100px)and(min-width:901px){.wrap.circle{width:20%;}}@media(max-width:1300px)and(min-width:1101px){.wrap.circle{width:16.66667%;}}@media(max-width:1500px)and(min-width:1301px){.wrap.circle{width:14.28571%;}}@media(max-width:1700px)and(min-width:1501px){.wrap.circle{width:12.5%;}}@media(max-width:1900px)and(min-width:1701px){.wrap.circle{width:11.11111%;}}@media(max-width:2100px)and(min-width:1901px){.wrap.circle{width:10%;}}@media(max-width:2300px)and(min-width:2101px){.wrap.circle{width:9.09091%;}}@media(max-width:2500px)and(min-width:2301px){.wrap.circle{width:8.33333%;}}@media(max-width:2700px)and(min-width:2501px){.wrap.circle{width:7.69231%;}}@media(max-width:2900px)and(min-width:2701px){.wrap.circle{width:7.14286%;}}

for文とても便利。

参考

https://hacknote.jp/archives/917/

↧

Vuetify使うとmarginやpaddingの調整がめっちゃ楽な件

September 7, 2020, 3:54 am
$
0
0

Vuetifyとは

VuetifyとはVue.jsやNuxt.jsのプロジェクトで使用することのできるUIライブラリです。
※Vuetify

実際に私もよく使っていて、とても気に入っています。
Vuetifyの書き方は少し特殊なので慣れるまではちょっとややこしいかもしれませんが、慣れるとパパッとUIの実装ができるのでオススメです！

本題

本題のmarginやpaddingの設定ですが、
実際どんな感じで書くのかというと、こんな感じ。

index.vue
<divclass="my-5"/>

ん？....マイ？ - 5？

って感じですよね。

実はこれは一文字一文字に意味があります。

property

感の鋭い方はもうお分かりかもしれませんが、
最初の「m」はmarginの「m」です。

ということは...

paddingの場合は「p」と書きます。

それだけです。

direction

そして、次の「y」という文字。
これはy軸方向の「y」という意味です。
つまり上下を対象に適用させるということです。

となると、「x」は左右を対象とします。

他にも、
・「t」 Top
・「b」 Bottom
・「l」 Left
・「r」 Right
・「a」 全方向
などがあります。

※「-（ハイフン）」に関してはただのハイフンです。
　特に意味はありません。

size

最後の「5」という数字、これはsizeを表すもので、
「1」が4pxを表しています。

なので「5」の場合は5×4で20pxです。

つまり「my-5」は？

上下にマージンを20px適用するという意味になります！

ネガティブ margin・padding

そして個人的にめっちゃイイ！と思ったのが、
ネガティブ（マイナス）な値も設定できるという点です！

これはとても便利！！

ネガティブを設定するには、
size（数字の部分）の前に、「n」を追加します。

なので「my-n5」と書くと、
上下にネガティブマージンを20px適用するという意味になります。

最後に

少しでもVuetifyに興味を持っていただけましたでしょうか？

Vuetifyを使うと直接タグ内に書けるので、
わざわざCSSをstyleに分けて書かなくて済みますし、
コード量も肥大化しにくく且つ、開発スピードも上がるのでメリットは大きいかと思います！

また今回紹介したmarginとpadding以外にもたくさんの機能があるので、他の機能も是非見てみてください。
ある程度のことはVuetifyで再現できるかと思います。
※Vuetify

ただVuetifyも完璧ではないので、
私も基本Vuetifyで書いて、どうしてもVuetifyでは再現できないところに関してだけCSSを書いているという感じで開発しています。

ご参考になれば幸いです！

最後までご覧下さり、ありがとうございました。

↧

IEでheight:autoが効かない場合の対応＝min-height:1pxを指定する

September 7, 2020, 7:29 pm
$
0
0

IEでimgにheightを指定すると…CSSで height:autoが効かないようです。
最近、imgにheightを指定するのでバグに気づきました。

解決方法

そんな場合のかんたんな解決方法を見つけました。
このようにimgタグにwidthとheightを指定した場合…

HTML
<imgclass="hoge"src="hoge.png"width="1200"height="800">

IE対応は min-width:1pxを指定すればOKでした。

CSS
.hoge{width:auto;max-width:100%;height:auto;min-width:1px;/*IE対策*/}

imgタグにwidthとheightを指定する理由

imgタグにwidthとheightを指定すると読み込みスピードが早くなります。
その場合にIEのCSS指定にコツがあることを知りませんでした。

参考記事にもっと詳しいwidthとheightを指定するメリットが掲載されています。

参考URL

【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver
https://parashuto.com/rriver/development/img-size-attributes-are-back

↧
↧

[Vuetify] v-mainはまだ使わない方がいい？？

September 7, 2020, 7:19 am
$
0
0

先日投稿したこちらの記事。
※Vuetify 2.3.0からv-contentが非推奨になった。

Vuetifyの公式GitHubのReleaseノートからも確認できるように、
Vuetify 2.3.0からv-contentがv-mainに変更されました。
※後方互換性はあるのでv-containが使えなくなるというわけではないです。あくまでも非推奨になるということです。

ということだったので私もv-mainに変更していたのですが、なんとそのv-mainの影響で現在開発中のアプリに不具合が発生しました。。

状況を説明すると、
元々v-contentだったところをv-mainに変更して、ローカルでは何も問題なく表示がされていたのでそのまま本番にもあげたのですが、本番でアプリを確認するとレイアウトが崩れてしまっていたのです。

v-mainの情報がまだ少ないので、今現在何が原因かはまだ特定できていません。
とりあえず仕方なくv-contentに戻しました。。

また原因が判明したら、更新します。

とりあえず今はまだv-mainにしない方がいいかも。。
（Warningがいちいち出てくるのめんどくさいですが）

↧

【初心者でもわかる】cssだけでスライドショー風の横スクロールできるカルーセルの作り方

September 7, 2020, 7:06 am
$
0
0

どうも7noteです。CSSだけで作れるカルーセルの作り方

カルーセルといえば、東京にあるとしまえんが最近閉園になりました。
わたしはいったことがないのですがカルーセルエルドラドが有名らしいですね。

このカルーセルという言葉はフランス語で回転台とか、回転木馬を意味する言葉で、日本でいうところのメリーゴーランド（これは英語）ですね。
なのであまりカルーセルという言葉は聞き慣れないと思いますが、WEB業界では以下のようなデザインのことを、まるで回転しているかの様に見えることからカルーセルと呼びます。

carousel.png

スライドショーにしようと思うとjavascriptなども使わないといけなかったりしますが、今回のカルーセルはCSSだけでできるので簡単。さっそく作り方を解説。

作り方

index.html
<ul><li><imgsrc="sample.gif"alt=""><p>テキストが入るよ</p></li><li><imgsrc="sample.gif"alt=""><p>テキストが入るよ</p></li><li><imgsrc="sample.gif"alt=""><p>テキストが入るよ</p></li><li><imgsrc="sample.gif"alt=""><p>テキストが入るよ</p></li><li><imgsrc="sample.gif"alt=""><p>テキストが入るよ</p></li></ul>
style.css
ul{overflow-x:auto;/* 横幅が画面からはみ出たら横スクロールさせる */white-space:nowrap;}ulli{display:inline-block;/* 要素を横並びにする */width:130px;}ullip{text-align:center;}

基本的にはスマホ用になります。
PCの場合だと横スクロールバーが出てしまいますが、スマホなら指で横にスライドさせることができます。
このカルーセルなら、要素がはみ出ていても、スマホの画面全体がスクロールされるのではなく、カルーセルになっている個所のみが横スクロールされるのが特徴です。

carousel.gif

まとめ

画像付きの情報を載せたり、テーブル（表など）をスクロールで見れるようにさせたりする時に使えます。
数行書くだけなので簡単に実装できるところがポイントですね。

もっとこだわった動きを入れたい場合はjavascriptを使ってスライドショーを導入するといい感じになるかも！

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

↧
Search

CSSを使って音を置き去りにする速さで背景を斜めにする。

September 7, 2020, 7:33 am
$
0
0

一瞬で背景を斜めにします。刮目せよ。
デモ: https://codepen.io/tt113/pen/XWdVGbL?editors=1100

実装

html
<divclass="box"></div>
css
.box{height:600px;background:linear-gradient(175deg,#fac70052%,#1394CF52%);}

結果

スクリーンショット 2020-09-07 23.26.53.png

解説

cssにはlinear-gradient関数というグラデーションを生成する関数があり、それを使って実装している。

引数の指定方法は様々だが、今回は１つ目の引数(175deg)はグラデーションの角度、

2つ目・3つ目の引数はグラデーションの色、始まる位置を指定している。

参考文献

↧

transitionの働きについて

September 7, 2020, 8:45 pm
$
0
0

transitionは4つのプロパティを一括で指定できる。

・transition-property -> アニメーションさせるプロパティを指定
・transition-duration -> 時間（アニメーションが動いている間）
・transition-timing-function -> タイミング
・transition-delay -> 時間（アニメーションが開始するまでの間）

初期値は以下の通り
・transition-property: none;
・transition-duration: 0s
・transition-timing-function: ease;
・transition-delay: 0s;

まとめて表現すると
transition: none 0s ease 0s;

それぞれのプロパティの詳細については以下のURL似て詳しく記載されている。
https://haniwaman.com/css-transition/

↧
↧

viewportでレスポンシブしている時にPC版表示をする

September 7, 2020, 8:51 pm
$
0
0

環境
初書：2020/09/08

タイトルの付け方が適当な気がしてならないが、いいのが思いつかなかった

前提

<metaname="viewport"content="width=device-width, initial-scale=1.0,minimum-scale=1.0">

viewportでdevice-widthを使用していて、cssで@media screen and (max-width: 600px)のような感じでレスポンシブウェブデザインに対応させている場合

javascriptで動的変更する

…ことが出来る。しかも一行で

document.getElementsByName("viewport")[0].setAttribute('content','width=1080, initial-scale=1.0,minimum-scale=1.0');

document.getElementsByName("viewport")で、metaタグを取得する事が可能なのでsetAttributeでcontent箇所を書き換える。
（[0]なのは、viewportという名前はおそらくこれしかないだろうという観点から。もし他の要素にviewportという名前を付ける場合は、単純に[0]にするとバグが生じるかもしれない）

注意点

viewportを書き換える形の場合、スマホの横幅に合わせてサイズが細かくなるわけではなく、
画面外に伸びてサイズが変更されるので（下の図の感じ）、cssでvwを使ってサイズを指定している箇所はレイアウトが崩れる。

 |---------------------------------------------| //width=1080に設定した時
 |------------------| // スマホ画面（400くらい？左右にスクロールが出来るようになる）

参考

もう逃げない。HTMLのviewportをちゃんと理解する

↧

ヘッダーぽいものを作る

September 8, 2020, 1:10 am
$
0
0 
<!DOCTYPE html><html><head><metacharset="utf-8"><title>SiteName</title><linkrel="stylesheet"href="stylesheet.css"></head><body><divclass="header"><divclass="header-logo">SiteName</div><ul><li>何を勉強すべきか</li><li>HTML何もわからん人へ</li><li>CSSも何もわからん人へ</li></ul></div></body></html>
@charset"UTF-8";.header{width:100%;height:90px;background-color:#00FF00;color:#fff;}.header-logo{font-size:36px;float:left;padding:20px40px;}.headerli{float:left;padding:33px20px;list-style:none;}

できたもの

スクリーンショット 2020-09-08 16.32.13.png

https://github.com/aki0207/header

こちらを参考にさせていただきました。
Progate

↧

css animationでいい感じに重力を再現する

September 8, 2020, 3:40 am
$
0
0 
// 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% {bottom:108px;}}// SP.float-button-sp{animation:pop-animation-sp1.4s;}@keyframespop-animation-sp{0%,100% {bottom:30px;}30% {bottom:40px;}50% {bottom:30px;}78% {bottom:35px;}}
↧
Viewing all 8519 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>