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

初心者によるプログラミング学習ログ 232日目

$
0
0

100日チャレンジの232日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

232日目は


FlaskでWebアプリ開発中にCSSが反映されない問題を解決する

$
0
0

FlaskでWebアプリを開発している。その際、WebブラウザにCSSがキャッシュされてしまう問題に、どう対処するか考えてみた。

HTML内でCSSをリンクする際、style.css?v=12などのように手動で、更新日時やバージョンを付け加えている場合がある。しかし、せっかくPythonを使っているので、これを自動で解決してもらいたい。

模範解答

検索してみると模範解答は、以下のように、url_forを書き換えると良いという回答だ。

app.py
@app.context_processordefoverride_url_for():returndict(url_for=dated_url_for)defdated_url_for(endpoint,**values):ifendpoint=='static':filename=values.get('filename',None)iffilename:file_path=os.path.join(app.root_path,endpoint,filename)values['q']=int(os.stat(file_path).st_mtime)returnurl_for(endpoint,**values)

そして、テンプレートでは、以下のようにリンクする

hoge.html
<linkrel= "stylesheet"type= "text/css"href= "{{ url_for('static',filename='style.css') }}">

コンテキストプロセッサーの、url_forを上書きするテクニックだ。エンドポイントにstaticが指定された時に、ファイル更新日を付け加えるというテクニックだ。

ちなみに以下が元ネタの英語ページ。日本の他のブログでもこれを参考に紹介されていた。
(参考) https://stackoverflow.com/questions/21714653/flask-css-not-updating

この回答に不満というか、Flaskのurl_forに不満

ただし、いつも思うのだが、静的なリンクを書くだけなのに、url_forを使うのは長い。手間だ。Flaskでは、静的ファイルを配置するのは/static以下とデフォルトで決まっているので、CSSを配置するパスも既に決まっているはず。つまり、静的ファイルを埋め込むだけなのに、url_forを使うのは、かなり面倒に感じる。

そこで、手抜きして、以下のようにする方法を考えてみた。

手抜き回答 - 半分失敗の例

最初にフィルタを使う方法だ。

app.py
@app.template_filter('staticfile')defstaticfile_filter(fname):path=os.path.join(app.root_path,'static',fname)mtime=str(int(os.stat(path).st_mtime))return'/static/'+fname+'?v='+str(mtime)

テンプレートは以下のように書く。

hoge.html
<linkrel="stylesheet"type="text/css"href="{{ 'style.css' | staticfile }}">

模範解答より、ずっとエレガントにできた。

とは言え、この方法では、テンプレートエンジンによって、HTMLがキャッシュされてしまっているため、瞬時にキャッシュが更新されないのが問題だ。それでも、一応、style.css?v=xxxのようになる。

手抜き回答 その2 context_processorを追加する

やはり、模範解答を咀嚼して、context_processorを利用するようにするのはどうかと考えた。

app.py
@app.context_processordefadd_staticfile():defstaticfile_cp(fname):path=os.path.join(app.root_path,'static',fname)mtime=str(int(os.stat(path).st_mtime))return'/static/'+fname+'?v='+str(mtime)returndict(staticfile=staticfile_cp)

そしてテンプレートは以下の感じ

hoge.html
<linkrel="stylesheet"type="text/css"href="{{ staticfile('style.css') }}">

これなら、キャッシュされず、瞬時に値が反映されるし、それほど見た目が悪くないから良いかな?

所感

Flask + jinja2の組み合わせ、気軽に使えて、拡張も楽々でお気に入り。
得た知見は、以下の通り。

  • フィルタにすると、テンプレートを変更しないと内容が書き換わらない。
  • コンテキストプロセッサーを使うと、テンプレートへの埋め込み処理の以前に実行されるので、常に値が最新にできる。

特定要素のwidth基準のサイズ指定 by css&js

$
0
0

vwは便利ですけど、画面全体の幅基準なので、responsiveに幅の変化する要素を基準にはできませんね。
以下はそれをjsで実現するものです。

css
:root{--base1:0;}.title-box{position:relative;}.welcome{font-size:calc(var(--base1)*8vw);margin-top:calc(var(--base1)*17vw);}.title{font-size:calc(var(--base1)*12vw);line-height:calc(var(--base1)*12vw);margin-top:calc(var(--base1)*3vw);}
html
<divdata-calc-base="base1"class="title-box"><divclass="welcome">ようこそ!</div><divclass="title">種子島へ!</div><imgsrc="/img/tanegasima/top.jpg"></div>
js
$(window).on('load resize',()=>{$('[data-calc-base]').each(function(){document.documentElement.style.setProperty('--'+$(this).data('calc-base'),$(this).width()/$(window).width());});});

inspired by
https://flex-font.com/how_to/

FLOCSS設計ってどんなんだっけ?となった時に思い出せる簡単なメモ

$
0
0

概要

Found Layout Object CSSの略で、OOCSSやBEM、SMACSSの流れを受けて考案されたCSS設計思想

FLOCSS

Foundation

  • サイト全体のデフォルトスタイルを定義する
  • _reset.scss, _base.scss, _mixin.scss, _variables.scss

Layout

  • Objectの配置を決める
  • ページ単位で唯一の存在になるのでidセレクタを使う
  • 構造に関わる部分でProjectごとの整列用にflexfloat解除につかったり、sitewidthを定義したりする程度の記述
  • _header.scss, _sidebar.scss, _footer.scss

Object

  • Component
    • 再利用可能なパーツ
    • プレフィックスにc-をつける(.c-btn, .c-btn_primary)
  • Project
    • Componentにするほどでもないパーツ(個々のページの中でしか使わない、1回しか使わないなど)
    • プレフィックスにp-をつける(.p-article, .p-article__title)
  • Utility
    • 汎用クラスで単一のスタイルを持つ
    • プレフィックスにu-をつける(.u-clearfix, .u-block)

命名規則ではBEMと同じ規則が用いられている

ディレクトリ構成

FLOのそれぞれの構造に合わせ、ディレクトリ構造も分割することでメンテナンスしやすくなる

css
|-- foundation
|   |-- _base.scss
|   |-- _reset.scss
|-- layout
|   |-- _main.scss
|   |-- _sidebar.scss
|-- object
    |-- component
    |   |-- _button.scss
    |   |-- _grid.scss
    |-- component 
    |   |-- _articles.scss
    |   |-- _profile.scss
    |-- component 
        |-- _clearfix.scss
        |-- _margin.scss
        |-- _text.scss

sample.html
<!-- flocss.html --><h1>FLOCSS</h1><!-- 以下、layout idセレクタを使う --><divid="countainer"><!-- 以下、component(module) c-を使う --><ulclass="c-menu">  <!-- FLOCSSではmodifierをつける時マルチクラスパターンを基本とする --><liclass="c-menu__item c-menu__item--large">link</li><liclass="c-menu__item c-menu__item--active">active</li></ul></div>
style.scss
.c-menu{list-style-type:none;&__item{width:80px;margin-bottom:5px;color:#4486F7;border:1pxsolid#4486F7;text-align:center;&--large{width:100px;}&--active{color:#fff;background-color:#4486F7;}}}

jQueryにおけるthisを使用する理由

$
0
0
個人的メモなので悪しからず。
main.js
$(function(){$('#header').on('mouseover',function(){$(this).css('color','#333');});});

例で使われているon()メソッドのようにメソッドの第2引数に命令を渡すメソッドではその命令内でthisを使用できます。
なので上記のコードで使われているthisには#headerが格納されている。

main.js
$(function(){$('#header').on('mouseover',function(){$(this).css('color','#ebc000');});$('#text').on('mouseover',function(){$(this).css('color','#ebc000');});});

header直下のthisにはheaderが格納されtext直下のthisにはtextが格納されます。

thisを使用する理由

・処理のパフォーマンスの向上
・関数に複数のセレクタを指定した場合に処理を分けられる

1つめの「処理のパフォーマンスの向上」に関しては$()関数が実行されるとブラウザはHTMLから要素を集める処理を行うため繰り返し実行された場合CPUに負荷がかかり処理に時間がかかる場合がある。
しかしthisを使用すると取得済みの要素を使い回せるのでHTMLから要素を集める処理を短縮できます。

2つめの「関数に複数のセレクタを指定した場合に処理を分けられる」は以下のコードをご覧ください。

sumple.js
$(function(){$('header, #text, footer).on('click,function(){$('header, #text, footer).css(
            backgroundColor: '#4182fd'
        );
     });
});

上記のコードだと関数に指定されている3つのセレクタのいずれかの要素にクリックすると全ての要素にcssメソッドが適応されてしまう。

sumple.js
$(function(){$('header, #text, footer).on('click', function() {
        $(this).css(
            backgroundColor: '#4182fd'
        );
     });
});

thisを使用するとthisにはクリックした要素のみが格納されることになる。
例えばheaderをクリックするとheaderのbackgroundのみが変更される。

以上個人的メモでございました。

Safariで別ページからのページ内リンクの位置がずれる問題はJSの影響だった

$
0
0

スマートフォンのコーディングをしていた時、
別ページからのページ内リンクを実装していたら、
一部リンクのみ勝手に1000pxくらい下にスクロールされて、位置がずれてしまった。

すでに実装してあったJSを全て削除してから試してみると、ちゃんと動いたので、
JSの機能を一つずつコメントアウトしてクリックを試してみたところ、
bxSlider部分が影響していることがわかった。

※bxSlider(スライダープラグイン)
https://bxslider.com/

原因

PCのChromeのエミュレーターは、bxSliderが整形し終わった後の高さを見込んでページ内リンクの位置を割り出すのに、
SafariはbxSliderが整形する前の高さを元にページ内リンクの移動をするようで...。

bxSlider 整形前
bxSlider 整形後

どう対処したか

bxSlider部分を囲んでいるタグに、整形後を見込んだheightoverflow: hidden;を前もってかけておくと、
bxSliderの整形での高さのずれが出にくく、解決しました!

.section-member-list-wrap{/* スライダーするリストを囲うタグのclass */height:235px;overflow:hidden;}

その他の抜粋ソースコード

<nav><ul><li><ahref="/index.html">Top</a></li><li><ahref="/index.html#vision">Vision</a></li><li><ahref="/service.html">Service</a></li><li><ahref="/index.html#company">Company</a></li><!-- ←問題のリンク --></ul></nav><section>
// コンテンツ内容は略
</section><sectionid="vision"><!-- ←ここへはちゃんとたどり着く -->
// コンテンツ内容は略
</section><section><divid="js-list-member"class="section-member-list-wrap"><ulclass="list-member"><li><figure><img></figure><h3>名前1</h3></li><li><figure><img></figure><h3>名前2</h3></li><li><figure><img></figure><h3>名前3</h3></li></section><sectionid="company"><!-- ←ここはずれる -->
// コンテンツ内容は略
</section>
jQuery(function(){'use strict';// bxSliderjQuery('#js-list-member .list-member').bxSlider({mode:'horizontal',moveSlides:1,slideMargin:12,infiniteLoop:true,slideWidth:154,minSlides:3,maxSlides:3,speed:300,pager:false,controls:false,});});

動作確認環境

iOS 13.3 Safari

Webサイト制作で役立つカラーコードサイト5選

個人的にオススメしたいTech系YouTuberたち

$
0
0

僕は普段から『Qiita』以外にもプログラミングの情報収集を
『YouTube』で行っているので今回は
個人的にオススメしたいTech系YouTuberの方々と彼らの動画ベスト③を
紹介していきたいと思います!(独断と偏見が入っています笑)

①KENTA / 雑食系エンジニアTV

https://www.youtube.com/channel/UC_HLK-ksslL-Z_2wiIZDlMg

  • もう既にご存知の方も多いと思いますが、KENTAさんはプログラミングのみならずIT業界(自社開発、受託、SES等)に関しても深い知見があり今まで見てきたTech系YouTuberの中でもダントツに質の高い情報を提供されている方です。彼の動画はどの動画も有益だと思いますが中には忙しい方もいると思います。そこで、個人的に特にオススメしたい彼の動画ベスト③を発表します!

【第一位】モダンなIT企業を見極める7つの技術的チェックポイント

https://www.youtube.com/watch?v=Aw8w9qSdZtY

  • 就職される方や転職される方がモダンなIT企業を見極める際に重要となるチェックポイントを提示してくださっています!普通に有料級の情報だと思うのですがそれがYouTubeでタダで見れてしまうので恐ろしいですね(笑)

【第二位】良い質問をする技術 〜質問テンプレートのススメ〜

https://www.youtube.com/watch?v=P6yRjOyM4jU

  • 個人的に思う優秀な人の共通点が「質問力」が高いということ。「質問力」に自信のない方は見ておいて損はないかと思います!

【第三位】Web系自社開発企業さんへの転職に必要なポートフォリオのレベルとは

https://www.youtube.com/watch?v=N0yetny4Zco

  • Web系自社開発企業さんへの転職が難しくなってきている現実を知るのに有益かと思います!

ちなみにですが、僕は彼の雑食系エンジニアサロンに今月入会しました!
月額980円で参加できるサロンにしては
かなり質の高いコミュニティなのでは?と思います!

具体的に《サロンのどういう所が良いと思ったのか》と言うと、

①サロン内で技術に関して質問できる環境が整っていること
②アウトプット報告でサロン内のメンバー間で互いに高め合う環境があること
③ポートフォリオを見せ合いレビューし合う環境があること

(人によっては技術に関しての質問なんてteratailがあるから
不要と思う方もいるかもしれませんが、個人的な感想を言うとあのサービスのユーザーは
結構質問が無視されているケースも見かけるので何とも言えない感じがします。)

続いて二人目のTech系YouTuberを紹介していきます!

②【人生逆転エンジニア】アップスターツ

https://www.youtube.com/channel/UCczh4w4k5cjuZBKFqlIF3kw

  • コンテンツの内容はどちらかというと初心者向きな感じがします! ポップなBGMを聞きながら楽しい雰囲気で情報をインプットできるかと思います!

【第一位】【年代別】プログラミング学習のゴールを教えます

https://www.youtube.com/watch?v=Zh7njKsR_U0

  • なぜこの動画を第一位に選んだのかというと 学習には「ゴール」を設定するべきだという持論があるからです。 「ゴール」を決めて「逆算」して学習していきましょう!

【第二位】エンジニアなら知っておきたいGoogle検索のコツ

https://www.youtube.com/watch?v=S22Bs-G5bZU

  • エンジニアとして働く以上「情報検索能力」いわゆる、「ググり力」も 大事な基礎スキルになってきます。その「ググり力」を身に着けるのに 良いヒントを提示してくれている動画ですので時間がある時に 是非とも視聴することをお奨めします。

【第三位】エンジニアが良く使う便利ショートカットキーを紹介!【13個】

https://www.youtube.com/watch?v=Yt92zqwCdyc

  • ショートカットキーもエンジニアが効率的にプログラミングするための 重要なスキルの一つなので是非とも習得してしまいましょう!

続いて、三人目のTech系YouTuberを紹介していきます!

③進撃する人【現役エンジニア】

https://www.youtube.com/channel/UC3mMWAA1Lo3rwMorseTcn2g

  • プログラミングスクールの実態や転職活動で経験したこと、SESの闇など 面白くて有益な情報を提供してくださる方です!

【第一位】プログラミング学習でおすすめの教材を紹介しよう

https://www.youtube.com/watch?v=vvAqUvek-60

  • 進撃する人が実際に使ったことのあるプログラミング学習教材 (progate, Udemy, ドットインストール, Techpit)で 各々の特徴とオススメ度を語ってくれています!

【第二位】未経験エンジニアが転職をするならwantedlyが最強な件について

https://www.youtube.com/watch?v=YgHvdxUdI0Q

  • なぜwantedlyがオススメなのかを語ってくれています! 個人的に面白いと思う自社サービスをリリースしている企業さんも多いので 是非とも使ってみてほしいと思います!

【第三位】転職サイトでSESを見分ける方6つの方法とは!?

https://www.youtube.com/watch?v=UM1kajpU4JI

  • SESを見分ける際に使えるかなり有益な情報を発信してくださっています!

最後に四人目のTech系YouTuberを紹介していきます!

④くろかわこうへい【渋谷で働くクラウドエンジニアTV】

https://www.youtube.com/channel/UCX30pfp4p82rIiSJmBygADw

【第一位】未経験ループ脱出4つの基本戦略「未経験からIT業界に飛び込んだとき」を振り返る

https://www.youtube.com/watch?v=_kDIvVYy81U

  • 自分自身も就職活動をしている過程で認識したことですが、 日頃からQiita等の技術ブログでアウトプットしていることを 重視している企業さんは増えてきていると思います!

【第二位】未経験でも渋谷エンジニア業界のベテラン勢を簡単に追い抜ける2つの理由と給料に現れない市場価値

https://www.youtube.com/watch?v=TvHtaealnzg

  • 彼曰く、AWS や Docker や Git できれば kubenertes を習することで ベテランエンジニアとの差別化を図れるとのことです!

【第三位】バックエンドエンジニア5分類と意外と狙い目のポジションである3つの理由

https://www.youtube.com/watch?v=ujUFOi49Rwc&t=3s

  • なぜバックエンドエンジニアがオススメなのかを論理的に 分かりやすく解説して下さっています!

【番外編】

しまぶーのIT大学

https://www.youtube.com/channel/UCti6dG0zSAetLGGYcgNML4Q

  • 個人的に応援しているTeck系YouTuberです! プログラミングだけでなく起業やスタートアップ界隈の情報も提供して下さる方なので 興味のある方はチャンネル登録をしておくことをオススメします!

とだこうき

https://www.youtube.com/channel/UCzZiw3exu_81WvN3DKRNXTA/videos

  • 最近YouTubeの活動をストップされているので番外編に入れさせて頂きましたが 彼の発信しているコンテンツもなかなか有益なのでは?と思います!

マコなり社長

https://www.youtube.com/channel/UC7I3QTra4_kC4TSu8f7rHkA

  • マコなり社長はエンジニア出身で現在株式会社divの代表取締役として 会社を経営されておられる方です! 番外編に入れた理由ですが プログラミングに関する情報発信はほとんどされていないからです。 コンテンツの内容は「自己啓発」が多い印象です。 少しでもより良い自分になりたい方は 彼のYouTubeチャンネルを登録してみるのをオススメします!

迫 佑樹

https://www.youtube.com/channel/UCKxnXboujhwy7osAwu75-2w

  • 大学在学中にプログラミングのインターンに参加したり、 プログラミングのコンテストに参加して受賞したり、起業して自身で Skill HacksやFront Hacksなどのプログラミング学習教材を作ったり、 YouTubeで情報発信したりなど多方面で活躍されておられる凄い方です! 番外編に入れた理由ですが、プログラミングに関する情報発信というより 内容が「ビジネス」寄りだからです。ただ内容自体は 見ていて個人的には勉強になるな~と思いながら勝手に勉強させてもらっています!

やまもとりゅうけん

https://www.youtube.com/channel/UCp60qNFmqRy7Q5ymP20dsGw

  • やまもとりゅうけんさんは数あるTech系YouTuberの方々の中で 「フリーランスエンジニア」になることを推奨されています! 彼も迫 佑樹さんと同様に内容が「プログラミング」というよりは「ビジネス」寄り だったので番外編に入れました。ただ発信されているコンテンツは勉強になる内容が 多いので「プログラミング」だけでなく「ビジネス」も!という方にはオススメです!

以上で「個人的にオススメしたいTech系YouTuberたち」の紹介を終えます!
この記事を読んでくれた読者の方に少しでも参考になれれば嬉しいです(^^)


visual studio code ショートカット Ctrl+/ が作動しません

$
0
0

visual studio code ショートカット Ctrl+/ が作動しません。
スクリーンショットのEditメニューを見るとCtrl + /にはきちんと割り当てられているのですが、ショートカットキーが使えないと困ります。どういった対処方法があるでしょうか。
visual studio code を再インストールするとかになってしまうのでしょうか?
 PCは LENOVO ideapad330で、昨年購入した機種です。
何か対処方法をご存じの方は教えてもらえませんでしょうか。

【WordPress】 Gutenberg関連のCSSまとめ

$
0
0

はじめに

Gutenberg(ブロックエディタ)対応のテーマを作成するために、CSSを設計しようと思ったのですが、

  • 読み込まれるCSSの数が多い
  • どのように読み込む/読み込まれるのか
  • フロント側、エディタ側どちらで読み込まれるのか

などこんがらがるポイントが多かったので、まとめてみました。

style.min.css

フロント側で自動的に読み込まれる最初のCSS。

各ブロックの基本的なレイアウトを定義しており、特にブロックエディタ用のCSSを用意していなくても、ある程度いい感じに表示してくれるのはこのCSSのおかげ。

以下のように、wp_dequeue_styleで無効化する事も出来ます。

functions.php
functionmytheme_enqueue(){wp_dequeue_style('wp-block-library');}add_action('wp_enqueue_scripts','mytheme_enqueue');

ただし、例えばテキストの中央寄せ( .has-text-align-center)などの基本的なスタイルすら適用されなくなるので、全ブロックをフルカスタマイズしてやろうという本気の方以外は、有効にしたままの方が良いです。

theme.min.css

フロント側で読み込まれる二つ目のCSS。

style.min.cssに加え、もう少し見栄え良くスタイルを整えてくれます。

こちらは style.min.cssと異なり、add_theme_support( 'wp-block-styles' );で手動で読み込む必要があります。

コードもそれほど多くないので、読み込まずに自前でスタイルを用意してもよいと思います。

load-styles.php

エディタ側で自動的に読み込まれる最初のCSS。

ブロックエディタ含め、管理画面全体のCSSが定義されています。

style-both.css

※ファイル名は任意

アクションフック enqueue_block_assetsを使うと、フロント側・エディタ側両方で読み込まれます。

functions.php
functionmytheme_enqueue_both(){wp_enqueue_style('style-both',get_template_directory_uri().'/style-both.css');}add_action('enqueue_block_assets','mytheme_enqueue_both');

フロント側・エディタ側を同時にスタイリング出来るので便利そうですが、前述した通り、

  • フロント側で読み込まれるCSSは style.min.css(+ theme.min.css
  • エディタ側で読み込まれるCSSは load-styles.php

と、標準で読み込まれるCSSが違います。

スタイリングのされ方も若干異なるので、一つのCSSプロパティ・値で見え方を完全に統一させることは難しいです。

また、エディタ側のエディタ部はeditor-styles-wrapperというクラス名でラップされており、フロント側のコンテンツ部は独自のセレクタ( .post-contentとか)でラップするはずなので、共通のセレクタを使う事が出来ません。

とはいえ、セレクタに要素名( h1とか)を使うと、エディタ側・フロント側とも想定外のパーツにスタイルが当たってしまう懸念があります。

一つの用途として、ブロックにスタイルを適用した時に「is-style-XXX」といったクラス名がエディタ・フロントともに自動付与されるので、双方のブロックスタイルの見え方を共通のCSSで管理したい、といったケースに使えるのではないかと思います。

style.css

※ファイル名は任意

フロント側で読み込まれるCSS。

アクションフック wp_enqueue_scriptsを使って読み込みます。

functions.php
functionmytheme_enqueue(){wp_enqueue_style('mytheme-style',get_template_directory_uri().'/style.css');}add_action('wp_enqueue_scripts','mytheme_enqueue');

フロント側で、 style.min.css(+ theme.min.css)の次に読み込まれるCSSです。

一般的に、ヘッダー・フッター・サイドバー等のコンテンツ部以外をスタイリングするためのサイトのベースとなるCSSや、リセットCSS、各種ライブラリのCSSなどを読み込みます。

block-editor-style.css

※ファイル名は任意

アクションフック enqueue_block_editor_assetsを使うと、エディタ側で読み込まれます。

functions.php
functionmytheme_enqueue_block_editor(){wp_enqueue_style('mytheme-block-editor-style',get_template_directory_uri().'/block-editor-style.css');}add_action('enqueue_block_editor_assets','mytheme_enqueue_block_editor');

読み込み順は、

  • load-styles.phpの後

  • enqueue_block_assetsで読み込んだCSS( style-both.css等)の前

となります。

また、enqueue_block_assetsと名前が似ているので紛らわしいですが、

  • enqueue_block_assetsで読み込み → フロント側・エディタ側両方で読み込まれる

  • enqueue_block_editor_assetsで読み込み → エディタ側で読み込まれる

という違いがあります。

エディタ側のブロックをスタイリングするためのCSSとして使われます。

editor-style.css

※ファイル名は任意

クラシックエディタでも使われるエディタ側のCSSで、以下のコードで読み込みます。

functions.php
add_theme_support('editor-styles');add_editor_style('editor-style.css');

読み込み順は、

  • load-styles.phpの後

  • enqueue_block_assetsで読み込んだCSS( style-both.css等)の後

  • enqueue_block_editor_assetsで読み込んだCSS( block-editor-style.css等)の後

と、一番最後に読み込まれます。

特徴として、各セレクターの直前にブロックエディタ全体を囲っている .editor-styles-wrapperというクラスが自動的に挿入されます。
( セレクタがbodyの場合は、 .editor-styles-wrapperに置き換わる )

このCSSいついては使い所がまだ分かっていませんが、クラシックエディタ向けのスタイルを書いたりしたら良いんじゃないかと思います。

まとめ

フロント側

順番ファイル名自動/手動読み込み方・特徴
1style.min.css自動wp_dequeue_style( 'wp-block-library' ); で無効化出来る
2theme.min.css手動add_theme_support( 'wp-block-styles' ); で読み込む
3style-both.css
(ファイル名は任意)
手動アクションフック(enqueue_block_assets)内で読み込む
4style.css
(ファイル名は任意)
手動アクションフック(wp_enqueue_scripts)内で読み込む

エディタ側

順番ファイル自動/手動読み込み方・特徴
1load-styles.php自動-
2block-editor-style.css
(ファイル名は任意)
手動アクションフック(enqueue_block_editor_assets)内で読み込む
3style-both.css
(ファイル名は任意)
手動アクションフック(enqueue_block_assets)内で読み込む
4editor-style.css
(ファイル名は任意)
手動add_editor_style( 'editor-style.css' ) で読み込む
※各セレクタの先頭に、editor-styles-wrapperというclassが自動で付与される

個人的にオススメしたいHTML/CSSの学習教材

$
0
0

この記事では僕が今まで購入してきた中で
個人的にオススメしたいHTML/CSSの学習教材を三つ紹介していきたいと思います!

①よくわかるHTML5+CSS3の教科書

https://www.amazon.co.jp/よくわかるHTML5-CSS3の教科書【第3版】-大藤幹/dp/4839965471

HTML/CSSを学ぶ人が最初に取り組むのに個人的にオススメな一冊です!
内容自体が教科書みたいな感じでHTML/CSSの基礎が網羅されています!

②HTML5/CSS3 モダンコーディング

https://www.amazon.co.jp/HTML5-CSS3モダンコーディング-フロントエンドエンジニアが教える3つの本格レイアウト-スタンダード・グリッド・シングルページレイアウトの作り方-吉田真麻-ebook/dp/B0176GNY26

一冊目のHTML/CSSでは紹介されていなかったモダンなコーディングをする方法
(Font Awesomeの使い方等)を教えてくれる実用的な技術書です!
僕自身ポートフォリオを作成した時に重宝したので本当にオススメです!

③[HTML/CSS/JavaScript]フロントエンドエンジニアになりたい人のWebプログラミング入門

https://www.udemy.com/course/html-css-js/

Udemyで分かりやすいと評判のTaniguchi Makotoさんの講座です!
特に参考になったことは
「CSSの詳細度」、
「真っ黒の文字は強すぎて見にくい」といった「デザインに関するアドバイス」、
「アクセシビリティの観点に立つことの重要性とその具体的アプローチ等」、
「『メソッド』」と『プロパティ』の区別の仕方」 
などで、多くの重要な事柄を学習できました!


紹介は以上となります! 如何でしたでしょうか?

紹介されている教材がかなり少ないかもしれませんが
最初はこれ位がシンプルで良いのでは?と個人的に思います!

参考になれれば嬉しい限りです(^^)

未経験から始めるHTML/CSS ~float編~

$
0
0

はじめに

2020年2月より未経験ながらHTML/CSSをProgateにて学習を開始ました。
その中で、HTML/CSSを学習するに当たって私自身が疑問に思ったことを纏めてみました。
私が疑問に思った事が、今後お互いの学習に役立てれば良いと考えqiitaを始めました
今回はその2回目、floatについて説明して行きます。

対象者

  • ProgateでHTML/CSSを学習中の方

自己紹介

こんにちは。
私は現在27歳で、4年間半導体業界でテストエンジニアとしてSierにて働いております。
この度半導体業界の不景気により仕事がない状態が続いており2月29日を持ちまして退職、
また脱Sierを目指し学生時代に興味があったweb関係の仕事に就こうと考えている者です。

floatとは?

floatの役割はブロック要素を縦から横にする際にします。
というのもブロック要素は要素を縦並びする性質があります。

スクリーンショット 2020-02-10 23.24.59.png

そのためブロック要素を横にする際に必要なのがfloat: leftです。
実際にfloatにleftを掛けてみましょう。

index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>  float  </title><linkrel="stylesheet"href="style.css"></head><body><divclass="red"></div><divclass="blue"></div></body></html>
style.css
.red{background-color:red;float:left;width:200px;height:200px;}.blue{background-color:blue;float:left;width:200px;height:200px;}

上記のソースコードを実施すると、divタグ要素を左寄せで横にする事ができましたね。
これを利用する事で横並びのメニューバーなども作る事ができます。

スクリーンショット 2020-02-10 23.13.40.png

次にblueのブロック要素にfloat: rightを掛けてみましょう。

style.css
.red{background-color:red;float:left;width:200px;height:200px;}.blue{background-color:blue;float:right;width:200px;height:200px;}

上記のソースコードを実施すると、divタグ要素を右寄せで横にする事ができましたね。
float: leftが左寄せ、rightが右寄せと忘れないにしましょう。
スクリーンショット 2020-02-11 0.42.34.png

子要素と親要素

次に子要素と親要素にfloatをかけた際にお互いにどういう影響を与えるか確認します。
その前に、floatを掛けない状態ではどうなるでしょうか。

index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>  float  </title><linkrel="stylesheet"href="style.css"></head><body><divclass="parent">    <divclass="child"></div>  </div></body></html>
style.css
.parent{background-color:red;width:200px;height:200px;}.child{background-color:blue;width:100px;height:100px;}

子要素、親要素両方ともブロックレベルなので縦並びでまた子要素は親要素に抱合されます。
スクリーンショット 2020-02-11 6.05.13.png

では親要素にfloatを掛けた際に子要素がどのような挙動をするか見てしましょう。
親要素のみにfloat: rightを掛けてみます。

style.css
.parent{background-color:red;width:200px;height:200px;float:right;}.child{background-color:blue;width:100px;height:100px;}

子要素は親要素の影響を受け一緒にfloat: right、つまり親要素と共に右寄せしました。
スクリーンショット 2020-02-11 6.25.48.png

次に子要素のみにfloat: rightを掛けた際に各要素はどうなるでしょうか。

style.css
.parent{background-color:red;width:200px;height:200px;}.child{background-color:blue;width:100px;height:100px;float:right;}

子要素は親要素内で右寄せになりましたが、親要素は子要素の影響を受けません。
この子要素と親要素の関係を覚えて行くとfloatさせた際のレイアウト崩れを防止できますので
忘れないようにしましょう。

おわりに

学習中にふと「要素を右寄せにした際に、意図しない要素まで右寄せしレイアウトが崩れる」
事があり、今回疑問に思ったのでfloatさせた際にの親要素と子要素の関係を調べてみました。
私の経験が皆さんの役に立てれば幸いです。

未経験から始めるHTML/CSS ~float解除編~

$
0
0

はじめに

2020年2月より未経験ながらHTML/CSSをProgateにて学習を開始ました。
その中で、HTML/CSSを学習するに当たって私自身が疑問に思ったことを纏めてみました。
私が疑問に思った事が、今後お互いの学習に役立てれば良いと考えqiitaを始めました
今回はその3回目、float解除について説明して行きます。

対象者

  • ProgateでHTML/CSSを学習中の方

自己紹介

こんにちは。
私は現在27歳で、4年間半導体業界でテストエンジニアとしてSierにて働いております。
この度半導体業界の不景気により仕事がない状態が続いており2月29日を持ちまして退職、
また脱Sierを目指し学生時代に興味があったweb関係の仕事に就こうと考えている者です。

その前にfloatとは?

floatの記事については前回書きましたので下記を参照下さい。
未経験から始めるHTML/CSS ~float編~

float解除の前に

float解除の説明前にこちらのソースを見てください。
こちらのプログラムは子要素のみにheightを適用し親要素にはheightを適用していません。
さてこのプログラムの実行結果はどうなるでしょうか。

index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>  float  </title><linkrel="stylesheet"href="style.css"></head><body><divclass="parent">    <divclass="child"></div>  </div></body></html>
style.css
.parent{background-color:red;}.child{background-color:blue;width:100px;height:100px;}

下記が実行結果です。親要素にheightを適用していませんが抱合の関係にあるので、
子要素に応じて親要素の高さが変動します。
スクリーンショット 2020-02-11 9.09.44.png

では次にfloatを子要素に指定し親要素にheightを指定しなかったらどうなるでしょうか。

index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>  float  </title><linkrel="stylesheet"href="style.css"></head><body><divclass="parent">    <divclass="child"></div>  </div></body></html>
style.css
.parent{background-color:red;}.child{background-color:blue;width:100px;height:100px;float:left;}

下記が実行結果です。何と親要素が消えてしまいました。
実は、floatを子要素に指定し親要素にheightを指定しないと親要素の高さが0になリます。
では、親要素に高さを認識させるにはどうしたら良いでしょうか?
そこで出てくるのがfloat解除です。

スクリーンショット 2020-02-11 9.22.05.png

float解除

前置きが長くなりましたがfloatを解除する3つの方法を説明します。

  1. float直後の要素にclear:bothを適用。
  2. 親要素にoverflow:hiddenを適用。
  3. 親要素にclearfixクラスを適用。

1. float直後の要素にclear:bothを適用

progateのHTML/CSSの単元で出てきますがclear:bothを使用するとそれ以降の要素は
floatの影響がなくなります。一番シンプルですが、人よっては毎回float直後の要素に
clear:bothを使用するのでソースが冗長的で美しくないと感じる方もいるでしょう。

index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>  float  </title><linkrel="stylesheet"href="style.css"></head><body><divclass="parent">    <divclass="child"></div><divclass = "floatRelease"></div><!--毎回書くとソースが冗長--></div></body></html>
style.css
.parent{background-color:red;}.child{background-color:blue;width:100px;height:100px;float:left;}.floatRelease{clear:both;}

2. 親要素にoverflow:hiddenを適用

clear:bothより冗長でないですが注意しないといけない点があるので個人的は推奨しません。
overflow:hiddenは子要素が親要素をはみ出した際に表示されないという欠点があるからです。
position: relativeとabsoluteを使用した際に注意が必要です。

index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>  float  </title><linkrel="stylesheet"href="style.css"></head><body><divclass="parent">    <divclass="child"></div></div></body></html>
style.css
.parent{background-color:red;overflow:hidden;}.child{background-color:blue;width:100px;height:100px;float:left;}

3. 親要素にclearfixクラスを適用

上記2つと違い特にデメリットがないで使い易いです。

index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>  float  </title><linkrel="stylesheet"href="style.css"></head><body><divclass="parent clearfix">    <divclass="child"></div></div></body></html>
style.css
.clearfix::after{content:"";display:block;clear:both;}.parent{background-color:red;}.child{background-color:blue;width:100px;height:100px;float:left;}

おわりに

Progateではfloatの解除はclear:bothが使用されいますが、
web上ではclearfixが多用されていたので解除方法にどういうものがあるか気になり調べました。
clearfixはデメリットがなさそうなので個人的には一番お勧めです。
またCSS3からはflexboxという新しいモジュールがあるので、煩わしいfloatを使わなくて良いので
興味がありましたら調べてみてください。
私の経験が皆さんの役に立てれば幸いです。

これからの時代、CSSではなくSCSSを使おう

$
0
0

前書き

CSSは計二回のアップデートにより、様々な特殊かつ高度なデザインが可能になりました。しかしその反面、理想とするデザインを実現するためには面倒な微調整を何回も繰り返さなければなりません。

ところが最近、"Sass"というデザイン業界の常識を覆す(というほどでもない)新たなスタイル記法が開発されています。
Sassでは、"Mixin"をはじめ、"Each"や"While"など様々な便利な記法をサポートしており、非常にスピーディーに開発ができるでしょう。

インストール

Sassは当然、そのままでは実行できません。そこでCSSにコンパイルして利用しなければなりません。

まず、Rubyをインストールしてください。これがないとSassはコンパイルできません。
次に、コマンドプロンプトで"gem install sass"と入力してください。これで(多分)SCSSのコンパイラがインストールできます。

確認するために、コマンドプロンプトに"sass"と入力してください。
何かが表示されたらインストールは成功です。

コンパイルしてみよう

まず、すでにあるCSSファイルをSassに逆コンパイルするには、こちらのサイトがおすすめです。
CSS2Sass

それから、SassをCSSにコンパイルするには、先ほどインストールしたコンパイラを使います。

sass style.scss:style.css

Sass記法とSCSS記法

Sassには、標準的なSCSS記法(おすすめです)と、Sass記法があります。
主な違いはインデントのやり方です。

style.sass
.redcolor:#FFFbackground:#F00
style.scss
.red{color:#FFFbackground:#F00}

基本的なやり方

まず、このような場合、

index.html
<divclass="outline"><divclass="inline"></div></div>

SCSSではこのように表記します。

style.scss
.outline{background-color:#F00;color:#FFF;padding:10px;.inline{background-color:#00F;color:#FFF;padding:10px;}}

次に"Mixin"という特殊な記法があります。

style.scss
@mixinhoge{color:#FFF;padding:10px;}.outline{@includehoge;background-color:#F00;.inline{@includehoge;background-color:#00F;}}

さらには、"For"という記法があり、省略するのが便利です。

style.scss
@for$varfrom0through3{.mb#{$var}{margin-bottom:5px*$var;}}

このコードが、コンパイル後にはこうなります。

style.css
.mb1{margin-bottom:5px;}.mb2{margin-bottom:10px;}.mb3{margin-bottom:15px;}

ほかにもいろいろあります(説明するの飽きた)

参考文献

この記事では書ききれなかったことがここに書いてあります(投げやりかよオイ)
Sassについて - 気まぐれ引きこもりんご80%
Sassの基本機能まとめました - Tree
Sassを使ってCSSを爆速コーディング!Sassの導入方法と使いかた。
gulp を使って自動でsass を自動コンパイルできるようにする

最後に

この記事を見て、"いいね!"と思ったら、いいねボタンを押してください。
強制はしませんが、押してくれると筆者もすごく喜びます。

ではまたの機会に。次回作にもご期待ください。

ScrollReveal+CSSアニメーションでWebページをちょっとだけオシャレにしてみる

$
0
0

この記事は「納期1日だけどオシャレなアニメーションもつけてイイ感じにして:innocent:」と言われた人間が、頑張って工夫したことをまとめたものです。

タイトルにあるScrollRevealとは

ScrollRevealはスクロールアニメーション系のJavascriptライブラリです。
jQuery不要、CSS不要で手軽にスクロールアニメーションを実装できます。

事前準備

まずHTMLでscrollreveal.jsを読み込みます。

HTML
<script src="/js/scrollreveal.min.js"></script>

そして、アニメーションさせたい要素に任意のclassを設定します。

HTML
<divclass="anime">アニメーションさせたい要素</div>

ここではclass="anime"を使うことにしました。

やりたいこと

  • ページをスクロールすると要素がフワっと出てくる
  • 要素がフワッと出てきた後で、要素内のアイコンが動く

やりたいこと① ページをスクロールすると要素がフワっと出てくる

「事前準備」で用意したアニメーションさせたい要素に対してアニメーションを実装します。

Javascript
ScrollReveal().reveal('.anime');

1行書いただけ。お手軽です。

もう少し動きを変えたい場合はオプションも設定できます。

Javascript
ScrollReveal().reveal('.anime',{duration:1000,//アニメーションの長さdelay:500//アニメーションの遅延});

試しに動かすとこんな感じ↓


See the Pen
ScrollReveal-sample01
by tricolorebox (@tricolorebox)
on CodePen.


やりたいこと② 要素がフワッと出てきた後で、要素内のアイコンが動く

さて、こまった!

スクロールで要素が出てきた後で、アクセントとしてアイコン画像を動かしたいのですが(※イメージとしてはauトップページ)細かいアニメーションには対応していません:disappointed_relieved:

アイコンのアニメーションをよく観察すると...?

アイコンは背景画像として読み込まれているようです。
CSSアニメーションでアイコンのスプライト画像をパラパラ漫画のように1コマずつ動かしていました。これを組み合わせられないかな:thinking:

アニメーション終了に任意のclassを付与する

ここで先ほどのScrollRevealの話に戻ります。
ScrollRevealではafterRevealというオプションでコールバックを設定できます。
これにより、アニメーション後に任意の関数を実行することが可能です。
これを利用してアニメーションが終わったら、is-visibleというclassを付与します。

Javascript
ScrollReveal().reveal('.anime',{afterReveal:function(el){el.classList.add('is-visible');}});

このような書き方になります。

CSSでアイコン用のアニメーションを設定する

最後にアイコン用のアニメーションを設定します。
繋がったアイコン画像を読み込んでアニメーションを設定します。
今回は1コマ96x96として、用意したのはこんな感じのイラスト↓
sample_anim.png

そしてCSSでis-visibleのclassがついた要素の子要素にアイコンのアニメーションを設定します。

HTML
<divclass="anime"><divclass="icon"></div><divclass="inner">アニメーションさせたい要素</div></div>
CSS
.icon{background:url(/img/sample_anim.png)no-repeat00;width:96px;height:96px;margin:0auto;}.is-visible.icon{animation:parapara1ssteps(8)3;/*1秒間8コマのアニメーションを3回繰り返す*/}@keyframesparapara{to{background-position:-768px0;/*アイコン幅96x8コマ=768px*/}}

どうでしょうか、ちょっと可愛くなったかな...

See the Pen ScrollReveal-sample02 by tricolorebox (@tricolorebox) on CodePen.

最後に

アニメーション部分だけのまとめになりましたが、実際お仕事ではスマホ用・PC用で別々にスクロールアニメーションを設定しました。
アニメーションのタイミング等があとで調整しやすいライブラリを選べると自分も楽できますよ:v_tone2:


Chrome version 80 以降 grid-layout の 1fr の挙動が変わります

$
0
0

TL;DR

Chrome 80 以降は grid 項目に最小値が設定されていないと、表示崩れが発生する場合があります。
具体的には grid-template-columns 等に 1fr で指定している箇所が影響します。

回避方法: 下記のように、minmax を用いて最小値を設定してください

Before

grid-template-columns:1frauto1fr;

After

grid-template-columns:minmax(0,1fr)autominmax(0,1fr);

参考サイト

詳細はこちらで
https://codepen.io/MadeByMike/full/LYVYXbv

Railsで個別にCSSを適用させる方法

$
0
0

結論

config/initializers/assets.rbに
'Rails.application.config.assets.precompile += %w( user.css )'
を追加することで解決した。
いろいろ調べてもわからなかったが、エラーが出たときの指示に従ったら解決したので、赤い文字がたくさん出てきても焦らずに対処すれば問題ないということがわかった。

背景

htmlやcssの勉強は対してしていなかったものあり、デザインをいじることに抵抗があった。
そんなとき、Bootstrapが便利だと職場のエンジニアの方々からきき、デザインに全く手が回っていないサービスにBootstrapの実装を試みた。

Bootstrapをいろいろ探していると無料のテーマというのがあることを知った。
元々ワードプレスでブログを書いていたことがあったので、ワードプレスのテーマと非常に似ているなと感じた。

Bootstrapのテーマを探すとサイト丸ごとをデザインできるようなものもあったが、Bootstrapについてよくわからないし、せっかく実装したslickを使ったJQueryの動きに影響が出ても嫌なので、作ってすらいなかったログインページをまず作り、そのページにだけBootstrapのデザインを反映させようとした。

苦悩

htmlのページにcssを読み込む方法は知っていたつもりだったが、user.scssというscssファイルの読み込みがどうしてもできずにいた。
同じcssのコードをapplication.scssに貼り付けるとサイト全体に反映されてしまうが、これだとちゃんとログイン画面もお洒落なデザインになっていた。
どうにかしてログイン画面にのみデザインを反映させたいと思い、いろいろ調べてみたが、compileがどうとか、
= require_tree . と= require_selfの順番がどうとかがたくさん出てきて、困った。
諦めてteratailで質問をするためにどのようなエラーが出ているのかを確認しようと、htmlに読み込みのためのコードを書き、ブラウザで確認した。
すると
「Asset was not declared to be precompiled in production.
Add Rails.application.config.assets.precompile += %w( user.css ) to config/initializers/assets.rb and restart your server」と丁寧に書いてあり、
言われた通りに丸々コピーしてassets.rbに記載したのち、リスタートするとログイン画面だけお洒落になった。
ファイルはscssなのに、なんでcssなのだろうと思いながら、scssに変更してサーバーを起動させたが、問題なく立ち上がった。cssとscssにはそんなに違いはないんだろうと勝手に解釈して終わった。なんとかうまくいってよかった。

学び

プログラミングを初めてから作業中の癖になっていたことが2つあり、1つはエラーが出たりわからなかったりするとすぐに調べるようになったこと。もう一つがteratailで誰かに助けを求めようとすることだった。が、そもそもどんなエラーなのか、しっかり突き詰めていないと調べて出てきた解決策が自分の課題とマッチしているのか判断ができないし、teratailで質問するにしても質問された側も状況の把握がうまくできない、何よりエラーの説明に答えがある場合がある、ということを今回の経験から学んだ。

CSSぴえんチャレンジ

$
0
0

CSSぴえんチャレンジって何?

正確には「HTMLとCSSでぴえんの絵文字を再現できるか」というチャレンジを勝手に作って勝手にやりました。

ぴえんの絵文字がわからない?チャレンジ結果をご覧ください。

チャレンジ結果

See the Pen pien by niko (@rorome15nikomu) on CodePen.

_人人人人人人人人人人_
> これがぴえんだ! <
 ̄Y^Y^Y^Y^Y^Y^Y^Y^Y ̄

おわりに

皆さまも息抜きや力試しに#CSSぴえんチャレンジやってみてはいかがでしょうか?

もっとクオリティの高いぴえんができたら##CSSぴえんチャレンジでツイートしてください!
全力でリツイート&いいねします。

私のTwitterはこちら

お付き合いいただきありがとうございました!

[Web] 要素を分割せずに済むグリッチエフェクト ~SVGフィルターのキホン~

$
0
0

Note: この記事に掲載しているCodePenはSVGフィルターを使用しており、ChromeとFirefox以外のブラウザーでは正常に表示されない可能性がある。

概要

この記事は👇の記事にインスパイアされたものである。

CSSでグリッチっぽい表現をやる

グリッチエフェクトを表現するには文字や画像を横にスライスして横方向に少し位置をずらす必要がある。上の記事はスライスごとにHTMLの要素を用意するという方法をとっており、同じテキスト(or 画像)を持った要素をスライスの数だけ用意する必要がある。ここではSVGフィルターを用いた、要素1個で済むグリッチエフェクトを紹介する(厳密には、<svg>とフィルター要素を除いて1個)。このエフェクトはテキストや画像、SVGで表現できるあらゆる図形に適用できる。

最終的には👇のようなものができる(ループ可)。横に分割してずらすだけでなく、色収差エフェクトを加えることでよりぽくなっている。

glitch

CodePenのデモ👇(普通にテキストをマウスで選択するができる)

CodePenで開く

この記事は、SVGフィルターやアニメーションの簡単な説明とサンプルコードから始めて、少しずつコードを構築していく形を取る。

SVGフィルター

SVGはベクター形式の画像であり、HTMLの<img>タグで外部SVGファイルを表示させることができるだけでなく、HTML内に直接SVGを書くことができる。また、SVGの中にはテキストや四角形、円などいろいろな図形を含めることができるが、それらに対してフィルター効果を付与することができる。

フィルターは普通<svg>内の<defs>内で宣言する。フィルターは一度宣言すれば何度も参照でき、同じページ内の別の<svg>からでも参照することができる

svgfilter-def.png

<filter>の中では"ぼかしフィルター"や"色変換フィルター"などの基本的なフィルター処理(フィルタープリミティブ)を組み合わせることで、全体として一つのフィルターを定義する。今回用いるフィルタープリミティブは<feOffset><feColorMatrix><feBlend><feMerge>の4つである。これ以外にもいくつかあるが、ここではこの4つだけ説明する。

<feOffset>: オフセット

これは非常に単純で、入力画像をx軸、y軸方向に指定した長さだけ平行移動(オフセット)させるものである。

See the Pen SVG feOffset Filter by righteous (@righteous_github) on CodePen.

後で説明するが、ここでは<filter>primitiveUnits="objectBoundingBox"が指定されているため、dxdyに指定した値はフィルターが適用されている要素の幅、高さに対する割合となる。今の場合、dxが0.1なので<image>の幅200に0.1を掛けた20だけx軸方向に移動することになる。

<feColorMatrix>: 行列による色変換

これは入力画像の各ピクセルのRGBA値を行列によって変換するものである。数式で表すと👇のようになる。$R,G,B,A$が入力の各ピクセルのRGBA値であり、$R',G',B',A'$が出力の値である。単にRGBAの列ベクトルに指定した行列を掛けるだけなので、行列の乗算を知らない人はぜひ調べてみてほしい。実際指定できるのは$a_1$から$a_{20}$の部分だけであり、これらをvaluesに並べて指定する。

\begin{bmatrix}
R'\\
G'\\
B'\\
A'\\
1
\end{bmatrix} = 
\begin{bmatrix}
a_1 & a_2 & a_3 & a_4 & a_5\\
a_6 & a_7 & a_8 & a_9 & a_{10}\\
a_{11} & a_{12} & a_{13} & a_{14} & a_{15}\\
a_{16} & a_{17} & a_{18} & a_{19} & a_{20}\\
0 & 0 & 0 & 0 & 1\\
\end{bmatrix}
\begin{bmatrix}
R\\
G\\
B\\
A\\
1
\end{bmatrix}

例えば次のような行列を指定すれば、入力画像の緑成分だけ取り出すことができる。

\begin{bmatrix}
R'\\
G'\\
B'\\
A'\\
1
\end{bmatrix} = 
\begin{bmatrix}
0 & 0& 0& 0& 0\\
0 & 1& 0& 0 & 0\\
0 & 0& 0& 0 & 0\\
0 & 0& 0& 1 & 0\\
0 & 0 & 0 & 0 & 1\\
\end{bmatrix}
\begin{bmatrix}
R\\
G\\
B\\
A\\
1
\end{bmatrix} = 
\begin{bmatrix}
0\\
G\\
0\\
A\\
1
\end{bmatrix}

See the Pen SVG feColorMatrix Filter by righteous (@righteous_github) on CodePen.

<feBlend>: ブレンド

これは画像編集ソフトにおけるレイヤーのブレンドと同じようなもので、2つの入力画像を指定したブレンドモードで合成する。👇はdarkenモードでブレンドしたものである。

See the Pen SVG feBlend Filter by righteous (@righteous_github) on CodePen.

<feComposite>: 合成

これは<feBlend>と同じようなものであるが、ブレンドモードは固定でnormalで合成する(画像編集ソフトにおけるレイヤーのデフォルトのブレンドモードと同じである)。ただし<feBlend>と違い、3個以上の入力画像を指定できるため、コードがコンパクトになる。下は画像の上に緑色の四角を重ね、さらに透明度0.5の青色の四角を重ねている。

See the Pen SVG feMerge Filter by righteous (@righteous_github) on CodePen.

フィルタープリミティブの適用範囲の指定

<filter>とすべてのフィルタープリミティブは、フィルターを適用する範囲をxywidthheightで指定することができる。例えば<feOffset>を適用すると元の要素の範囲をはみ出すことになるため、それも表示されてほしいならば<filter>の範囲を要素の範囲より広めに取る必要がある。親切にも<filter>の範囲のデフォルト値はx="-10%"y="-10%"width="120%"height="120%"となっており、少しはみ出しても表示されるようになっている。<filter>の範囲をはみ出すような範囲をフィルタープリミティブに指定しても意味はない。

補足: <filter>primitiveUnits属性について

フィルタープリミティブで指定する色々な座標や長さは<filter>primitiveUnits属性の影響を受ける。

  • primitiveUnits="userSpaceOnUse": このフィルターが適用された要素の座標系における値(パーセント値を指定した場合、その要素を含むSVG要素のサイズに対する割合)
  • primitiveUnits="objectBoundingBox": このフィルターが適用された要素のサイズに対する割合(0.1なら0.1倍)

例えばフィルタープリミティブの1つ<feOffset>dx0.5のとき、userSpaceOnUseの場合は、フィルターが適用される側の要素上での0.5ピクセルとなり、objectBoundingBoxの場合はフィルターが適用される側の要素のサイズの0.5倍となる。

ここではChromeのバグ1を避けるためprimitiveUnits="objectBoundingBox"を使用している。

グリッチエフェクトの実装

グリッチエフェクトは適用される要素のサイズに対して、横に少しはみ出す形になるため、左右に少し余裕を持ってフィルターの領域を指定する。広げすぎるとパフォーマンスに影響が出るため、必要最小限にするのがよい。

<filterid="glitch"primitiveUnits="objectBoundingBox"x="-10%"y="0%"width="120%"height="100%"></filter>

svg filter.png

色収差エフェクト

色収差とは光の波長によって屈折率が異なるために、レンズを通して撮影すると輪郭が滲んだような写真になる現象である。ここでは色収差を表現するために、簡易的に入力画像をRとGとBに分解し、等間隔にずらす、という方法をとる。イメージとしては👇のような感じである。

CodePenで開く: Chromatic Aberration Effect Visualization

(このCodePenはどのように色収差を表現するかを視覚化するためのものであって、これ自体はSVGフィルターを使っていない)

RGB各成分の抽出

まずは入力画像からR成分G成分B成分をそれぞれ抽出する必要がある。これは先述のとおり<feColorMatrix>を使って👇のように実現することができる。フィルタープリミティブは入力画像をin属性で指定することができ、result属性で出力に名前をつけることができる。いずれもin属性にSourceGraphicを指定しているが、これは文字通り元の画像(フィルターを適用しようとしている図形の、フィルターを適用する前のレンダリング結果)である。各成分は後で使用するため、resultでそれぞれの出力に名前(redgreenblue)をつけている。

<filterid="glitch"primitiveUnits="objectBoundingBox"x="-10%"y="0%"width="120%"height="100%"><feColorMatrixin="SourceGraphic"result="red"type="matrix"values="1 0 0 0 0
                                                                        0 0 0 0 0
                                                                        0 0 0 0 0
                                                                        0 0 0 1 0"/><!-- green: G成分 --><feColorMatrixin="SourceGraphic"result="green"type="matrix"values="0 0 0 0 0
                                                                          0 1 0 0 0
                                                                          0 0 0 0 0
                                                                          0 0 0 1 0"/><!-- blue: B成分 --><feColorMatrixin="SourceGraphic"result="blue"type="matrix"values="0 0 0 0 0
                                                                        0 0 0 0 0
                                                                        0 0 1 0 0
                                                                        0 0 0 1 0"/></filter>

各成分を横にずらす

次に、R成分を左に、B成分を右にずらす。これは明らかに<feOffset>の出番である。次のように、上で抽出したR成分とB成分をinで参照し、±0.005(×幅)だけ左右にずらす。

<filterid="glitch"primitiveUnits="objectBoundingBox"x="-10%"y="0%"width="120%"height="100%"><!-- ...省略... --><!-- red-shifted: R成分を左にずらしたもの --><feOffsetin="red"result="red-shifted"dx="-0.005"dy="0"/><!-- blue-shifted: B成分を右にずらしたもの --><feOffsetin="blue"result="blue-shifted"dx="0.005"dy="0"/></filter>

ブレンド

最後に3つの成分を重ね合わせて一つの画像にする。これはお察しの通り<feBlend>を使う。色が明るくなる方向にブレンドしたいので、screenモードを使用する。<feBlend>は2つの画像しか入力できないため、3つの画像を合成するには2回<feBlend>を適用する必要がある。

<filterid="glitch"primitiveUnits="objectBoundingBox"x="-10%"y="0%"width="120%"height="100%"><!-- ...省略... --><!-- blended: ブレンド結果 --><feBlendmode="screen"in="red-shifted"in2="green"result="red-green"/><feBlendmode="screen"in="red-green"in2="blue-shifted"result="blended"/></filter>

これで、色収差エフェクトの完成である。

CodePenで開く

横ずれエフェクト

スライスしてずらす

次に、画像を横向きにいくつかスライスして、さらに一部のスライスを横向きに色々な距離動かす必要がある。そのためには、<feOffset>各スライスの範囲にだけ適用する必要がある。

先述の通り、各フィルタープリミティブはxywidthheightでその適用範囲を指定することができる。このとき、その出力における指定した範囲外の領域はすべて透明となる。スライスごとに<feOffset>で該当範囲を横に動かす。

svg filter2.png

<filterid="glitch"primitiveUnits="objectBoundingBox"x="-10%"y="0%"width="120%"height="100%"><!-- ...省略... --><!-- スライスごとに横に動かす --><feOffsetin="blended"result="slice1"dx="0"dy="0"y="0%"height="30%"></feOffset><feOffsetin="blended"result="slice2"dx="0.01"dy="0"y="30%"height="4%"></feOffset><feOffsetin="blended"result="slice3"dx="0"dy="0"y="34%"height="26%"></feOffset><feOffsetin="blended"result="slice4"dx="-0.007"dy="0"y="60%"height="2%"></feOffset><feOffsetin="blended"result="slice5"dx="0"dy="0"y="62%"height="38%"></feOffset></filter>

マージ

最後に、スライスを1つの画像にまとめる必要がある。スライス同士は範囲が重複しないので、<feMerge>を使って単に重ね合わせればよい(<feBlend>を使ってもできるが、<feMerge>の方がコンパクトに書ける)。

<filterid="glitch"primitiveUnits="objectBoundingBox"x="-10%"y="0%"width="120%"height="100%"><!-- ...省略... --><!-- すべてのスライスをマージ --><feMerge><feMergeNodein="slice1"/><feMergeNodein="slice2"/><feMergeNodein="slice3"/><feMergeNodein="slice4"/><feMergeNodein="slice5"/></feMerge></filter>

結果は👇のようになる。

CodePenで開く

アニメーション

アニメーションといってもCSSアニメーションではなく、SVG独自のアニメーション機能を使用する。アニメーションは属性値に対して適用するものであり、適用したい要素の子要素として<animate>を追加する。

例えば2つ目のスライスの<feOffset>に対して👇のように<animate>を追加すると、そのスライスが動くようになる。attributeNameは変化させたい属性の名前、durがアニメーションの時間、keytimesはタイミング(0から1の値)、valuesは各タイミングにおけるその属性の値である。グリッチエフェクトでは滑らかに移動してほしくないため、calcModediscreteにすることで飛び飛びに移動するようにしている。また、repeatCountindefiniteにすることで永久に繰り返すようにしている。

<filterid="glitch"primitiveUnits="objectBoundingBox"x="-10%"y="0%"width="120%"height="100%"><!-- ...省略... --><!-- 2つ目のスライス --><feOffsetin="blended"result="slice2"dy="0"y="30%"height="4%"><animateattributeName="dx"values="0; -0.03; -0.06"keytimes="0; 0.2; 0.8"begin="0s"dur="3s"calcMode="discrete"repeatCount="indefinite"/></feOffset><!-- ...省略... --></filter>

CodePenで開く

最後に、スライスの数や高さを調節し、スライスだけでなく最初のR成分G成分の<feOffset>にもアニメーションを追加してvalueskeytimes`を調節すると完成である👇。

CodePenで開く

注意点

今回作成したものはWindows 10のChrome 80.0.3987.87とFirefox 74.0b1とEdge 80.0.361.48、 AndroidのChrome 80.0.3987.87とFirefox 68.4.2で正常に表示されることを確認したが、IEや非ChromiumのEdgeでは正常に表示されなかった。また、ChromeやFirefoxでも(今回使用しなかった)一部のフィルターでバグが存在するため、十分に注意する必要がある。

最後に

SVGフィルターを用いることで、元の要素を複製するなどの変更をHTMLに加えなくても、フィルターを1つ適用するだけでグリッチエフェクトを実現することができる。また、フィルターの定義はページのどこからでも参照できるため、何度も定義する必要がない。

このようなエフェクトを作るとき、ほとんどの場合CSSで事足りるし、ブラウザーの対応状況が少し不安であるということもあり、SVGフィルターを使う機会はあまりないと思われるが、複雑なフィルターを作ることができるという点で利点があることを覚えておくとよいかもしれない。

参考


  1. Chrome 80で試した限りでは、あるSVGで定義されたフィルターがprimitiveUnits="userSpaceOnUse"であるとき、別のSVG内の要素にこのフィルター適用すると、フィルタープリミティブのxywidthheightがパーセント値であるとき、その100%が後者のSVGのサイズではなく前者のSVGのサイズとなるというバグが発生する。Firefoxではこの現象は起きなかった。また、検索してもこのことに関する情報は見つからなかった。デモ: https://codepen.io/righteous_github/pen/ZEGzwJy 

Vue.jsでのdeep selectorの書き方

$
0
0

久しぶりの投稿です。
備忘を兼ねて簡単に書きます。

deep selector?

Vue.js でscoped付でstyle を書いている場合に、そのコンポーネントの子コンポーネントにもstyleを追加したい場合に使用するcss のセレクターの書き方です。

書き方

.hoge >>> .huga{...}

>>>または/deep/で出来るとなっています。
(参考:https://vue-loader-v14.vuejs.org/ja/features/scoped-css.html)

が、効かない場合がある。その時は?

原因を調べていないのですが、Versionか構成かで上記の書き方だと効かない場合があります。
調べてみたところ、次の書き方だと意図したとおりになりました。

.hoge ::v-deep .huga{...}

どうも、>>>/deep/が解釈されなかったようです。
もしdeep selectorが解釈されていない場合があったら、::v-deepを試してください。

参考

Deep Selectors
https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

Vue LoaderのDeep Selectorの::v-deep
https://blog.mahoroi.com/posts/2019/03/scoped-css-v-deep/

スコープ付き CSS
https://vue-loader-v14.vuejs.org/ja/features/scoped-css.html

Viewing all 8678 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>