What's New Qiita

20190625のCSSに関する記事は9件です。

  • 投稿日：2019-06-25T23:47:23+09:00

CSS　簡単に解説(セレクタと詳細度)

CSSとは

カスケーディング・スタイル・シートの略　カスケーディングは翻訳で滝
つまり、後から宣言されたものが継承または上書きすることを意味しています。

親にtext-aligin:centerなんかあったら、親要素を継承します。
子要素にtest-aligin:leftってあったら子要素を優先します。

<div style="text-aligin:center;">
    <div style="text-aligin:left;">//左寄せのほうが適用されます
    </div>
</div>

また、class="abcd efgh" で同じcssの要素(例:text-aligin)を指定していたら、後ろのほう(efgh)が優先されます

セレクタと詳細度

詳細度

セレクタの内容がより具体的・詳細であればあるほど優先されます。
具体的に詳細度が高いのを上に並べてみます。高いほうが優先されます。

・!important 
・インライン記述(style直指定)
・IDセレクタ
・クラスセレクタ　属性セレクタ　疑似クラス
・要素セレクタ　疑似要素
・ユニバーサルセレクタ

!important

.sample-color {
    color: red !important;
}

プロパティの後に記述します。(!important)
基本使ことを避けるべきです。それが崩れるとcssすべてが崩れる的な絶対変えてはいけないものにしか指定しないようにします。

インライン


基本避けます。タグにstyle直書きは絶対しないようにします(後でなおすの大変、ちょっとださい)、デバック時とか、一時的な試しのときだけするようにします。

IDセレクタ

html内で一つだけに指定できます。(個人的にはclassを使いたいです。)

クラスセレクタ、属性セレクタ、疑似クラス

何度も使える
[class="color-sample"]これはclassがcolor-sampleだけのやつです
疑似クラス select:first-child

要素セレクタ、疑似要素

::after ::beforeなど

ユニバーサルセレクタ　

* すべての要素に適用するもの

詳細度の計算

.container .title {
    color: red;//より詳細度が高いこちらが優先される。
}

.title {
    color: green;
}

参考にさせていただいた記事

https://qiita.com/flag_ryo/items/cf3512f9b4978c41d0e1

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-06-25T22:37:21+09:00

マンガのような画像を並べるHTML

とりあえず、マンガのように並べて表示出来るように作成しました。

静的に作っていますが、フレームワーク的に使えるように作成しています。
クリック場所でページ移動とキーボード移動に対応しています。

改造は今後に期待

https://github.com/karosuwindam/mangahtml

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-06-25T17:40:54+09:00

Shadow DOMを外部からスタイルできる新しい疑似要素「::part()」

本稿では、Shadow DOMの内部の要素のスタイルを、外側からスタイリングできるようにするCSS Shadow Partsについて紹介する。

CSS Shadow Partsとは

  • Shadowホスト(Shadow DOMを使う側のHTML)から::part()を定義することで、Shadow DOM内部の要素にスタイルを適用できる。
  • 2018年11月15日にW3Cにドラフトが公開された仕様。
    • まだドラフトなので仕様変更があるかも知れない。
    • Chromeはバージョン73(2019年3月12日リリース)で対応されている。
  • この仕様に従ったShadow DOMは、スタイルをユーザが調整できる。
    • 例えば、サードパーティ製のボタンコンポーネントがあって、サイトのメインカラーが緑だったとき、そのボタンコンポーネントの色もサイトのメインカラーに合わせることができる。

非推奨になった ::shadow と /deep/

  • Shadow DOMはDOMをカプセル化するための標準規格。
  • ::shadowセレクタと/deep/セレクタはShadow DOM内の要素をなんでも参照できてしまう仕様だった。
  • そのため、カプセル化を破壊してしまうので非推奨になった。
  • Chrome 63以降から::shadowと/deep/は削除されている1。

CSS Shadow Partsと::shadowのアプローチの違い

  • ::shadow: Shadow DOM内部の要素を何でもスタイリングできる。
    • プライベートAPI無理くり叩くようなアプローチ。
    • コンポーネント作者は、どんなセレクタで内部要素に依存されるか予想できないという問題があった。
    • コンポーネント利用者は、依存したセレクタがいつどう変更されるか分からず不安という問題があった。
  • CSS Shadow Parts: 明示的に公開されたShadow DOM内部要素のみスタイリングできる。
    • インターフェイスやパブリックメソッドを定義し、外部からはそれだけが使えるようにするのと似たアプローチ。
    • 公開する要素にはpart属性で名付けする。例: <button part="mybutton">
    • コンポーネント作者は、どこを公開できるかコントロールできる。(同時に何が公開されていて、スタイリングできるかはドキュメンテーションが大事になりそう)
    • コンポーネント利用者は、公開されたIDでアクセスできるので安心できるし、複雑なセレクターを書かなくて良くなる。

また、CSS Shadow Parts以外の外部からコンポーネントのスタイルを調整する手法として

があるが、本稿では割愛する。

CSS Shadow Partsを使ったサンプルコード

See the Pen CSS Shadow Parts by suin (@suin) on CodePen.

index.html
<link href="style.css" rel="stylesheet">
<script src="main.js"></script>

<h3>ホスト側の見出し3</h3>
<my-h3>シャドーDOM内の見出し3</my-h3>
<my-h3-no-part>シャドーDOM内の見出し3(partなし)</my-h3-no-part>
main.js
class MyH3 extends HTMLElement {
  constructor() {
    super();
    const node = this.attachShadow({ mode: "open" });
    node.innerHTML = `<h3 part="title"><slot/></h3>`;
  }
}

class MyH3NoPart extends HTMLElement {
  constructor() {
    super();
    const node = this.attachShadow({ mode: "open" });
    node.innerHTML = `<h3><slot/></h3>`; // この要素は外部からスタイリングできない
  }
}
customElements.define("my-h3", MyH3);
customElements.define("my-h3-no-part", MyH3NoPart);
style.css
h3 {
  color: blue;
}

/* my-h3はカスタム要素名、titleはmy-h3内部要素<h3>のpart属性を指す */
my-h3::part(title) {
  color: green;
}

実行結果

CSS_Shadow_Parts.png

参考

  1. https://developers.google.com/web/updates/2017/10/remove-shadow-piercing ↩

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-06-25T17:09:08+09:00

４日目：FLOCSSとBEMを混ぜること、その他（初学）

本日の業務での学び

・CSS設計において、FLOCSSとBEMを混ぜ合わせることについて　←メイン
・pタグの中に入れたaタグを、親要素いっぱいいっぱいにする方法

今日は作業中心だったため少なめです。

CSS設計において、FLOCSSとBEMを混ぜ合わせることについて

まず二つについておさらい。

FLOCSS

-Foundation
　初期化やタイポグラフィなどの土台作り

-Layout
サイドバーやメインコンテンツエリアなどのブロックのスタイルを定義（接頭辞l-)

-Object
・Component 再利用できるパターン(接頭辞c-)
・Project プロジェクト固有のパターン(接頭辞p-)
・utility わずかな調整などのお助けクラス(接頭辞u-)

<header class="p-headBlock">  /*FLOCKSS例*/
   <div class="p-wrapper">
      <div class="c-btn">
      </div>
   <div>
<header>

フロックスは、
再利用性:無限大
保守性　:かなり低
の印象を受けた。

BEM

-Block 塊（もっといい表現が思いつかない)

-Element Blockを構成する要素。

-Modifier blockまたはelementのバリエーション違い

自分の勤め先では、mindBEMdingの命名規則通り、
block__Element--modifierで記述する。

<header class="headBlock">  /*BEM*/
   <div class="headBlock__wrapper">
      <div class="headBlock__wrapper__btn--ok">
      </div>
   </div>
</header>

ベムはは、
再利用性:どん底
保守性　:超高
の印象を受けた。

FLOCSSとBEMのキメラ？

実務では、命名規則：BEM中心
　　　　 設計思想:FLOCSS中心でいいとこ取りをするらしい。
→一体どういうこと？？

解）BEMのBLOCK ＝FLOCSSのELEMENTとして扱う。
小さなBEMの部品がいっぱい集まってるイメージ！（多分）
例を見ていきます。

<header class="l-headerBlock">
   <div class="p-headBlock__wrapper">
      <div class="c-btn--ok"><div>
      <div class="c-btn--no"><div>
   </div>
</header>

この例では、再利用したいボタン部分をBLOCK = ELEMENTと見做すことで、
再利用が可能になっている。（.l-headerBlock外、.p-headBlock__wrapper外でも使用可）
そしてBEM表記によってクラスのダブりが起きにくい&どれがどの入れ子かわかりやすい。

まぜこぜにすることで、BEM表記部分は繋がりがわかりやすい&CSSで指定が被りにくいし、
FLOCSS設計によって、再利用やユーティリティの恩恵にあずかることができる！
パチパチ。

pタグの中に入れたaタグを、親要素いっぱいいっぱいにする方法

そんなことできるのでしょうか。 できました。

<!-- HTML -->
<p class="memory">
   <a class="memory__link">こちら</a>
   <p class="memory__txt">記憶を飛ばしたいかたはこちら</p>
</p>

/*CSS*/
.memory {
   position: relative;
   width: 100px;
   height: 100px;
}
.memory__link {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 2; /*親タグにもよるが、スマホ版で押しにくくなる対策*/
}

こうすると、親タグごとクリックすることができます！
どうしても親タグをaタグにして、要素を入れ子にできない時に効果的です。

今日は以上！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-06-25T17:05:33+09:00

Webで游ゴシックをiPhoneやAndroidで表示できない？表示するには？

日本語の中でも美しいフォントとされる「游ゴシック体」、略して「游ゴ」。
Webデザイナーにも評判のサンセリフフォントの一つです。

先日弊社のデザイナーと共に女性向けメディアを作成する際、
游ゴシック体を使用したサイトの作成を行いました。

PCのインスペクターモードで一通りの確認をパスし、
実機確認に移ったところデザイナーから...

「iPhone、Android　両実機でフォントが違いま〜す」

あれ？
CSSで正しい font-family を設定したのになぁ...

という事があり、どうやったらスマホで游ゴシック体がきちんと出せるのか調べてみました。

Windows&Macではきちんと出せる「游ゴシック体」

游ゴシック体は「Windows」、「OSX」の２大PC向けOSにプリインストールされています。
両OS間には、デフォルトの font-weight: 400　
で表示されるフォントの太さに違いがあるという頭を悩ませる問題があるものの
フォント自体は下のCSSで表示する事ができます。

html, body {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic";
}

AndroidやiPhoneにはプリインストールされていない「游ゴシック体」

「OSX」や「Windows」でプリインストールされているなら
「Android」や「iOS」でも...
と思いたいですが
残念ながらこの２大スマホOSには游ゴシック体がインストールされていません。

OSXに入っているのにどうしてiOSに入っていないのかは謎です。

ですので、上記のCSSだけでは全てのスマートフォンで游ゴシック体を出すのは不可能です。

スマホで「游ゴシック体」を使うには有料のWebフォントを使用する

では、どうすればいいのかというと

https://www.realtype.jp/
から有料のWebフォントとして游ゴシック体を使うのが現実的です。
フォント一覧ページから「游ゴシック体」で検索すると使用できるのが確認できます。
値段は月500円〜1000円です。

事実、游ゴシック体を作成している字游工房様のサイトも
上のサイトのAPIを経由してフォントを表示していました。
http://www.jiyu-kobo.co.jp/

導入は HTMLに

<style type="text/css" id="RT_ID_YuGothicPr6NM">@font-face {font-family:'YuGothicPr6NM';src:url("http://api.realtype.jp/1/font?id=XXXXX&name=YuGothicPr6NM&text=XXXXXX&type=woff&format=woff");}</style>

CSSに

html, body {
  font-family: 'YuGothicPr6NM';
}

という形で実装ができます。
詳しくはRealtype様のドキュメントを確認してください。

まとめ

Windows、OSXの両PC向けOSで游ゴシック体がデフォルトで使えるようになったのもここ数年の出来事の為か、
「游ゴシックがWebサイトでも使える！とってもハッピー！」といった記事や
最初に記したCSSで表示が出来ると唄っている記事をたくさん見かけます。

が、最近のWebサイトの閲覧者はほとんどがスマホからの流入です。

游ゴシック体を使った美しいデザインも
正しくスマホで表示出来るようしていなければ大半のユーザーに届きません。

Webフォントを使うための月々のコスト、Webフォントが適用されるまでのチラツキや遅延
など考えることも多いですが、正しく「游ゴシック体」を使ったサイトが増えていくといいと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-06-25T15:51:13+09:00

WebStorm Live Editの使い方

本稿では、WebStormをはじめとしたJetBrains製IDEの機能であるLive Editについて紹介する。

本稿で知れること

  1. Live Editとはどんな機能か？
  2. Live Editの使い方
  3. Live Editが動かないときの対処法

Live Editとは

Live Editとは、HTMLやCSS、JavaScriptファイルの更新を検知して、ブラウザに即座に反映する機能で、WebStormやPhpStormをはじめとしたJetBrains製IDEに搭載されている。

2019-06-25 15.27.48.gif

どういうときに便利か？

HTMLやCSSをいじっていて頻繁にブラウザをリロードしなければならないときに、Live Editを使うと、IDEとブラウザを行ったり来たりしなくて済む。

Live Editの使い方

Live EditしたいHTMLファイルを右クリックし、「Debug」をクリックする。

webstorm.png

するとブラウザが立ち上がる。

これで、ファイルを書き換えて保存したタイミングで、変更がブラウザに反映されるようになる。

トラブルシューティング

Live Editが動作しないとき

LiveEditプラグインが有効になっているか？

Preferences→Pluginsで「LiveEdit」プラグインがインストールされていて、かつ、有効になっているか確認する。

Live Editの設定が正しいか？

「Preferences」→「Build, Execution, Deployment」→「Debugger」→「Live Edit」の「Update application in Chrome on changes in...」にチェックが入っているか確認する。

Preferences.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-06-25T11:30:10+09:00

Vueで複数条件(and,or,フリーワード)の絞り込みを実装する

まずはサンプル

https://kackie.github.io/sort/vue.html

こちらの記事で作ったお店のリストを改良しましたｗ
今回は管理するデータがより複雑になったので、データはjson形式でまとめてaxiosで読み込んでいます。

絞り込みの条件

グループ化されたカテゴリがあり、同グループ内を複数選択した場合はor（和食||洋食）、グループを跨いで選択した場合はand（和食||洋食&&肉）での絞り込みになります。
またフリーワード検索を作り、これもフリーワード&&選択したカテゴリというふうにandで絞り込まれます。

jQuery版との比較

データバインディングの面でVueが圧倒的に優れています。さすが。
そのおかげでjsのソースもシンプルに書くことができました。
必然的にオブジェクト指向に則って書いていくので、ソースが整理されて見やすくわかりやすいです。
またVueのtransitionクラスを利用して切り替えのインタラクションを簡単に作ることができました。

今後実装したいもの

  • URLにパラメータ付与
    jQuery版にあったやつ。管理する情報が増えたので書き方を新しく考えないと..。
  • 時間による絞り込み
    開店時間で絞り込んだり、早い順でソートしたりできればよいかなと。
    インターフェースはプルダウン？
  • json更新のシステム
    手動でもいいけど、PHP等の勉強用に作ってみたい。
  • 複数キーワードでの検索
    今は単一キーワードでの絞り込みしかできないので、スペース区切りで複数入力された場合の処理が必要。
    • その場合はand検索のほうが良いか？
  • 非表示時のインタラクション
    これはどうしようもないかもしれないけど、非表示のものが左上に集約されていくのがちょっと気持ち悪いｗ
    おそらくflex配下の要素にposition:absolute;を指定すると親要素基準で左上に移動してしまうせい（初めて知った）。
    flexをやめると高さ揃えをjsでやることになるしうーん。

感想

jsonを手動で作成し管理するなんてことを初めてやりましたが、このインターフェースを組み合わせれば色々できそうですね。
何かの実績を整理してみたり、読んだ本や見た映画をまとめてみたり、料理のレシピを材料やジャンル別でカテゴライズしてみたり...。
思いついたら自分用にでも使ってみようと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-06-25T10:27:45+09:00

偏差値40の未経験プログラミング学習.ver6

2019年6月25日（火）所要時間：1時間半

個人的に社内ツールを作成する予定で社内のプロダクト部の方にお願いして手伝ってもらっている。
7月末までに1つサービスをリリースする目標で取り組んでいる。

〜学んだこと〜

<li>〇〇</li> リンクについて

【2つリンクを作って同じ画面上の移動を行なった】

・リンクをクリックし表示させるには、まず親要素を作ってその中の子要素に反映させる。
・パターンによっていろいろあるけど、基本的に親要素→子要素ってのを学んだ。

※エラーの原因の理由として多いのがcss側の確認ミス※
※あと個人的に【#】←これめっちゃ忘れやすいので注意※

2019年6月26日（水）所要時間：20分

【メニューバーの追加】

◎HTML↓

<ul id="nav">
  <li><a href="#">MENU1</a></li>
  <li><a href="#">MENU2</a></li>
  <li><a href="#">MENU3</a></li>
  <li><a href="#">MENU4</a></li>
</ul>

◎CSS↓

#nav {
  list-style: none;
}

#nav li {
  width: 140px;
  text-align: center;
  background-color: #333;
  display: inline-block;
}

#nav li a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-06-25T10:27:45+09:00

未経験からのプログラミング学習.ver6

2019年6月25日（火）所要時間：1時間半

個人的に社内ツールを作成する予定で社内のプロダクト部の方にお願いして手伝ってもらっている。
7月末までに1つサービスをリリースする目標で取り組んでいる。

〜学んだこと〜

<li>〇〇</li> リンクについて

【2つリンクを作って同じ画面上の移動を行なった】

・リンクをクリックし表示させるには、まず親要素を作ってその中の子要素に反映させる。
・パターンによっていろいろあるけど、基本的に親要素→子要素ってのを学んだ。

※エラーの原因の理由として多いのがcss側の確認ミス※
※あと個人的に【#】←これめっちゃ忘れやすいので注意※

2019年6月26日（水）所要時間：20分

【メニューバーの追加】

◎HTML↓

<ul id="nav">
  <li><a href="#">MENU1</a></li>
  <li><a href="#">MENU2</a></li>
  <li><a href="#">MENU3</a></li>
  <li><a href="#">MENU4</a></li>
</ul>

◎CSS↓

#nav {
  list-style: none;
}

#nav li {
  width: 140px;
  text-align: center;
  background-color: #333;
  display: inline-block;
}

#nav li a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧