What's New Qiita

20210122のCSSに関する記事は11件です。

  • 投稿日：2021-01-22T22:13:10+09:00

Twitch のウェブサイトを YouTube のシアターモード風に改造する

Twitch.tv の配信画面を YouTube のシアターモード（動画をウインドウ幅いっぱいに表示→その下に２カラムで概要とチャット欄）にしたくて無理やり弄った記録。久々の JavaScript + CSS。

↓ 結果はこんな感じ ↓

もくじ

はじめに

巣篭もり生活で見たいアメドラも尽きて Twitch に辿り着きました。

作業中はセカンドモニターの端に表示して垂れ流し、表示しているモニターは 1440 x 2560 の縦配置なのでウインドウ幅はかなり狭い状態。

しかし、Twitch のPC版のウェブサイトはウインドウが横長または全画面表示にしていることを前提にしているようで、ウインドウ幅が狭いとちょっと見づらい。

Twitch の画面構成

Twitch の PC ブラウザ版のウェブサイトはレスポンシブ対応で、ウインドウ幅が小さくなるにつれサイドバー → チャット欄と順に非表示になる仕様。

シアターモードなんてのもありますが、YouTube とは違いチャット欄は動画右側に表示されたまま、概要欄とサイドバーが非表示になるタイプ。ちょっと想像と違う。

◆ シアターモードの比較　← Twitch ｜ YouTube →

代替手段

ながら見ならチャット欄はいらないだろって感じですが、表示されてなきゃないで寂しいので何とか表示したい。そこで。

モバイル版をPCで表示

PCブラウザでも www.twitch.tv ではなく m.twitch.tv にアクセスすればモバイル版を表示出来て、上から下への縦長レイアウトで動画の下にチャット欄を表示できる。んですが、モバイル向けなので PC で使うには不便な点が結構あります。

PC向きではない部分：

  • モバイル版は左のサイドバーが無いのでザッピングにひと手間
  • 初期状態がミュートで、新しいストリームを表示するたびに動画をクリックしなきゃダメ
  • ニコ動風コメント表示やその他のエクステンションがオフになる
  • チャット欄がモバイル向けの簡易版で、
    • たまにランダムで視聴者に配られるギフトの対象外になる（たぶん）
    • チャンネルポイントが貯まらない（たぶん）
    • 予想・賭け機能（Channel Points Predictions）に参加できない

◆ Twitch モバイル版

Multistre.am を使う

次にチャット欄がフル機能の状態で縦レイアウトにする方法として試したのが Multistre.am だったんですが、「Twitch.tv で見たほうがベストな体験が出来ますよ」的なスクリーンが表示されてストリームが止まってしまったり、過去の配信を選択して流すことが不可能だったり。。。で断念。

ブックマークレット

そんなこんなで、とりあえずモバイル版で落ち着いていたんですが、表示をモバイル版に切り替える時に使っていたブックマークレット

  • javascript: location.href = location.href.replace('https://www.', 'https://m.');

コレを、サイトのレイアウト弄る内容に変えれば・・・ ？ と。

それがコチラ。

javascript: {

  let sidebarEl = document.getElementById('sideNav');
  let sidebarWidthPx = sidebarEl.offsetWidth+'px';
  let offsetTopStyle = 'calc( (100vw - '+sidebarWidthPx+') * 0.5625 )';
  let transitionParam = ' 0.5s ease';

  let playerEl = document.getElementsByClassName('persistent-player tw-elevation-0')[0];
  playerEl.style.setProperty('width', '100%', 'important');
  playerEl.style.setProperty('transition', 'width'+transitionParam, 'important');

  let chatEl = document.getElementsByClassName('channel-root__right-column channel-root__right-column--expanded')[0];
  chatEl.style.setProperty('bottom', '0px', 'important');
  chatEl.style.setProperty('height', 'calc(100% - '+offsetTopStyle+')', 'important');
  chatEl.style.setProperty('transition', 'bottom'+transitionParam+', height'+transitionParam, 'important');

  let infoEl = document.getElementsByClassName('channel-root__info channel-root__info--with-chat')[0];
  infoEl.style.setProperty('margin-top', offsetTopStyle, 'important');
  infoEl.style.setProperty('transform', '', 'important');
  infoEl.style.setProperty('transition', 'margin-top'+transitionParam+', transform'+transitionParam, 'important');

  let buttonEl = document.getElementsByClassName('right-column__toggle-visibility toggle-visibility__right-column toggle-visibility__right-column--expanded tw-absolute tw-flex tw-flex-grow-0 tw-flex-shrink-0 tw-visible tw-z-above')[0];
  buttonEl.style.setProperty('top', 'calc(1rem + '+offsetTopStyle+')', 'important');
  buttonEl.style.setProperty('transition', 'top'+transitionParam, 'important');

}

無事、YouTube 風のシアターモードに改造することが出来ました。

スタイルシートで transition を設定しておけばアニメーションまでつけてくれて、良い時代になりましたねー。

おわりに

ブックマークレット、既に死語の気もしますが便利ですよね。

JS / CSS を触ってた頃は「JavaScript じゃなくて Javascript だ！」勢が存在していた気もしますが、今は逆になってて不思議な気分です。彼らに何があったんでしょうか。

ともあれ最近 WebGL 面白そうだなーと思ってるので周辺技術を思い出すにはいい機会でした。

--

以上です。お疲れ様でした。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-22T21:44:29+09:00

怖いよ, coqdoc さん！

Coq には、コメントをドキュメントとして扱う機能があります。ソースコードからドキュメントを生成するには coqdoc というコマンドを使います。

coqdoc は LaTeX や HTML などを生成させることが出来ます。私も HTML のドキュメントを生成させたりしています。

coqdoc は CSS と HTML を一緒に生成します。しかし、この内容が見づらいと私は感じていました。理由は以下の二つです。

  • 横幅が制限されているため、 PC のディスプレイだと巨大な余白が出来る。
  • ソースコードの部分とドキュメントの部分で背景の色が違い、ドキュメントだけを一塊として強調する仕組みになっているが、同じ見出しの下にあるドキュメントでも塊が分割されていたり、見出しを跨いでドキュメントが一塊になっていたりしていて、私にとっては気持ち悪さを感じる。

coqdoc が生成する通常の CSS をそのまま使っているサイトは印象として少ないのですが、 Infinite Data and Proofs - Certified Programming with Dependent Types が一例になります。これを見ればデフォルトのデザインがどのようなものか分かります。

これを改善するために、私は一から独自の CSS を作成しようと考えました。もちろん、デフォルトの CSS を改変する方法もありますが、これは LGPL-2.1 であるため、私のプロジェクトには改変版を含めることが出来ませんでした。

地獄の窯が開いた

CSS を書くためには対象となる HTML の構造を知らなければなりませんでした。 coqdoc が生成する HTML がどのようなものなのか、 Google Chrome のデベロッパーモードを使って探検してみました。

(**

最初の段落。

次の段落。

*)

このようなコメントがどのような HTML になるか読者は予測できますでしょうか？ それぞれの段落が p タグで包まれるんでしょと思ったあなたは正常です。 coqdoc は p タグを使いません。

<div class="doc">
最初の段落。

<div class="paragraph"> </div>

次の段落。
</div>

このような HTML が生成されます。意味不明です。 div はブロック要素のはずです。気力を削がれながらもデフォルトの CSS を確認しました。

.paragraph {
    height: 0.75em;
}

このように高さが指定されていました。つまり、段落と段落の間のスペースを div 要素で表現しているのです。段落の間の隙間のために br 要素を使う人がいるのは知っていましたが、こんな世界があったとは驚きです。私は無知でした。

些細な他の問題

ソースコードを表現するためには pre 要素を使うのが普通だと思いますが、大量の br 要素を使っていました。

coqdoc では The dog is [foo baa]. という風にドキュメントの中にインラインでコードを埋め込むことが出来ます。これが The dog is <span class="inlinecode">foo</span> <span class="inlinecode">baa</span>. と変換されます。空白が span タグに包まれていません。 span.inlinecode という風に指定して文字サイズを大きくしようとしても、空白だけが大きくなりません。

HTML の中に余計なスペースがたくさんあります。元々のテキストの中に HTML のタグなどを差し込むという処理を基本としていると伺えます。

body 要素の直下に div id="page" 要素だけがあり、その中に他の全ての要素が入っている構造になっています。フラットにすれば良いのではと疑問に思いました。

ドキュメントの塊がドキュメントの構造と一致しないのは、コード部とドキュメント部が交互に切り替わる構造になっていたのが原因でした。これは一貫した設計であり理解できます。しかし、この条件下でのドキュメント部は一塊として見れないものだと感じます。

私が見ていた HTML の中では h1 要素が二回現れていましたが、これは Markdown の # foo と同じことであり、ユーザー側が h1 要素に変換される構文を使わないことで回避可能でした。

div id="header と div id="main" と div id="footer" 要素でページ全体を三つに区切っていました。これは今ならそのものずばり header と main と footer 要素があります。使うべきというようなものではありませんが。

ショックを乗り越えて

何とか新しい CSS を仕上げました。その成果はここで見ることが出来ます。デザインに関しては素人なので、まだまだ悪い所があるはずなのですが、私自身がきちんと見れるところまで完成させられたので、ひとまずは満足しました。

ちなみに、 GitLab Pages を初めて使ったんですが、 CI の中でファイルを吐き出せば自動的に引っ張り上げてくれるようになっていて、リポジトリの中に生成物を置く必要がある GitHub Pages と比較して設計の筋がとても良かったです。最初はリポジトリをホストするだけだった GitHub と、最初から周辺のツールまでまとめて扱うことが目標だった GitLab の違いが表れていると思うと、面白いです。

ライセンス

この記事のライセンスは CC BY 4.0 とします。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-22T21:01:03+09:00

フレームワークとは

今回はフレームワークについて学習をしました。フレームワークとは何か、Ruby,PHP,JavaScript,CSSの代表的なフレームワークを公式サイトとURLと共に紹介します。
説明不足があると思いますので、気になったフレームワークを公式サイトで確認してみて下さい。

フレームワークとは

「フレームワーク」という言葉には、「枠組み」という意味があり、アプリケーション開発においては、テンプレートの役割を持っています。テンプレートの機能は、開発を行う際に頻繁に必要とされる「基礎的な機能」をまとめて提供してくれるものです。
例えば、ログイン認証機能、新規投稿機能、検索機能などアプリケーション開発においてほとんど共通して使われる機能がパッケージ化されています。
そのため、フレームワークを用いることで開発を高速化させることが出来ます。
どれくらい便利なものかというと、ログイン認証を仮に自分で１から作成したとします。その場合、作らなければならないのが、ユーザーネーム、パスワードの欄を作り、それを認証、弾く機能、更にそれらを管理する画面など様々なところを作っていかなければなりません。しかし、フレームワークを使うことで、これらのベースとして使える骨組み部分がパッケージ化されているので、あとは自分好みに改良するだけで済みます。このパッケージのことをフレームワークと呼びます。もっと簡単に言えばコンピュータ言語を使用して何か開発したいと考えたとき、その手助けをしてくれる便利ツールの1つと考えておけば良いでしょう。
私がよくお世話になっているものだとRubyならRuby on Rails、CSSならBootstrapなどがあります。

おすすめなフレームワーク

フレームワークには言語ごとにたくさんの種類があります。しかし、ここでは私が実際におすすめされた・よく聞くフレームワークを紹介していきます。

Rubyのオススメフレームワーク３種

-　Ruby on Rails　公式サイト　＜https://rubyonrails.org/＞
-　Sinatra　公式サイト　＜http://sinatrarb.com/intro-ja.html＞
-　Padrino　公式サイト　＜http://padrinorb.com/＞

Ruby on Rails
「Rubyのフレームワークは？」と聞けば、ほとんど返ってくる答えが「Ruby on Rails」と言われるほど有名です。正直に言ってしまえば、Rubyでアプリ、システム開発を行いたいなら、Ruby on Railsを選択すれば間違いないでしょう。私自身一番最初に手をるけたのがRuby on Railsでした。また、素早くかつ効率的に開発するために、2つの大原則を設定しているのが特徴です。
それらの原則について私が紹介した記事がありますので、読んでみてください。
「DRY原則・CoC原則とは」
https://qiita.com/Shirosan10/items/84fe66955398e91f7136
このように徹底的に規約に従って行動することで、Webアプリ開発の高速化を目指します。

Sinatra

Rubyで記述されているオープンソースのフレームワークになります。フレームワークの中では、最も少ないコードでWebアプリなどの開発が可能です。
そのため学習コストが少なくて済み、最も手軽にフレームワークを使用した開発を始めることができます。

Padrino

先述の、Sinatraをベースに設計されたフレームワークになります。Sinatraにはなかった機能群があり、かつRuby on Railsよりも少ないコードでWebアプリ開発ができるので、初心者だけど、少々複雑なものを開発したい人向けです。

PHPのオススメフレームワーク３種

-　Laravel　公式サイト　＜https://laravel.com/＞
-　CakePHP　公式サイト　＜https://cakephp.org/jp＞
-　FuelPHP　公式サイト　＜http://fuelphp.jp/＞

Laravel

数あるPHPのフレームワークで、Laravelは2011年に登場した最も若いフレームワークです。今現在注目度が高く、その理由は「Love beautiful code? We do too」という理念どおり、初心者であっても美しいコードを書ける点だと思います。コードが書きやすく、すぐに書き始めることができるので、PHPを習得した人が真っ先に使用できます。

CakePHP

PHPの中でも有名なフレームワークです。「ケーキを焼くように簡単に開発」を理念として開発されており、Ruby onRailsの影響も強く受けています。
特徴的なのは、MVC（モデル・ビュー・コントローラ）モデルと呼ばれる実装デザインに関する先駆けになったことです。
MVCモデルについて気になった方はこちらも読んでみてください。
拙いながらMVCについて図解を入れて解説しています。
「MVCモデルについて」
https://qiita.com/Shirosan10/items/d12416700f7e2329cb09

FuelPHP

FuelPHPもLaravelと同じように、比較的最近登場したフレームワークです。そのため、ほかのPHPフレームワークの良いところ吸収しているので、使いやすいフレームワークです。
特徴としては、動作が軽量でフレームワークの規約が少ないため、自由にコードを記述出来ることが挙げられます。

JavaScriptのオススメフレームワーク３種

-　AngularJS　公式サイト　＜https://angularjs.org/＞
-　Vue.js　公式サイト　＜https://jp.vuejs.org/index.html＞
-　React　公式サイト　＜https://ja.reactjs.org/tutorial/tutorial.html＞

AngularJS

AngularJSはJavaScriptでできたWebフレームワークです。見た目の動きをきれいに作るために使用されます。
例えば、SPA（Single-page application）と呼ばれる、「ページを移動しなくてもなめらかにページ内のコンテンツが現れるような１ページで完結するアプリケーション」の開発を行う時などに採用されます。

Vue.js

Vue.jsはAngularJSよりも後に開発されいます。そのため、他のフレームワークの良いところを組み込んだ設計になっています。
AngularJSよりも規約が少ないため、比較的自由にコードを記述出来、JavaScriptを学習したばかりの初心者におすすめされます。

React

有名なSNS「Facebook」が中心となって開発したフレームワークです。React Nativeと呼ばれる、全く同じソースコードでiOSとAndoroidアプリ両方を動作させることが可能なため、モバイルアプリ開発に適しています。

CSSのオススメフレームワーク

Bootstrap　公式サイト　＜https://getbootstrap.com/＞

Bootstrapは「Webデザインフレームワーク」と呼ばれ、CSS/JavaScriptから構成されています。Twitter社より提供されるフレームワークになるため、Twitterのようなフラットなデザインを簡単に作成することができます。クラスを指定するだけで簡単にレスポンシブデザインに対応したページを作ることが出来ます。

今回の記事は以上になります。
色々と拙い部分があるかと思います。
また、自分が実際に使っておらず調べたり、教科書に書いて有りそうな説明なってしまったものもあり、説明が淡々としすぎてしまいました。今後、自分で使いたいなと思ってメモしていたので理解が深まったら更新して行こうと思います。
間違っている点、理解が不完全な点があればご指摘いただければ幸いです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-22T20:36:14+09:00

【初心者でもわかる】最初と最後以外にCSSを指定する方法（1行でも書ける）

どうも7noteです。最初と最後を除くCSSの書き方

最初と最後を判定してCSSを当てる範囲を決める方法。
1行で書く方法もあります。

いろいろな書き方

最初と最後以外を赤文字にします。

index.html
<p>1番目</p>
<p>2番目</p>
<p>3番目</p>
<p>4番目</p>
style.css
p {
  color: red;
}

p:first-of-type,
p:last-of-type {
  color: #000; /* デフォルトの色を指定 */
}

/* もしくは */

p:not(:first-of-type):not(:last-of-type) {
  color: red;
}

または最初と最後にだけクラスがついているならこんな書き方もできます。

index.html
<p class="first">1番目</p>
<p>2番目</p>
<p>3番目</p>
<p class="last">ラスト</p>
style.css
p:not([class]) {
  color: red;  
}

クラスをもっていない要素のみ赤文字にするという指定方法になります。

※-childか-of-typeは製作の環境に応じて適している方を使ってください。
-childと-of-typeの違いについて

まとめ

最初と最後以外、は専用の書き方があるわけではなく、シンプルに「最初と最後以外」と2つの指定を組み合わせて書きます。

個人的なおすすめの書き方は1行で書けるxxx:not(:first-of-type):not(:last-of-type)ですね。

おそまつ！

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

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-22T20:08:05+09:00

デイトラWeb制作コース初級編DAY8・9の学び

【この記事に書いてあること】

　【目標】

「HTML/CSSのコーディング復習」

　【学習時間】

3時間45分

　【学び】

1　実務でコーディングするときの手順
　HTMLで全体（キリがいいブロックまで）書き上げる
　CSSを付けつつデザイン通りに調整していく

2　HTMLを先に書くときに意識すべきこと３つ
　・完成形をイメージしてブロックを作る
　・どこに何のスタイルを当てるか設計しつつ書く
　・レスポンシブも見越してブロックを整理する

3　VSCodeのショートカットキー

　・HTMLを自動整形してくれる：⌥(option)＋shift＋F
　・マルチカーソル（クリックした所）：⌥(option)+クリック
　・マルチカーソル（キーワード）：⌘(command)+D
　・行移動：⌥(option)+↑↓キー

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-22T19:53:47+09:00

【SASS】forループと変数でmarginやpadding、フォントサイズなどのCSSを簡単作る方法。

SASSのforループと変数を使うと、marginやpadding、フォントサイズなど一定の倍数で数値が変化するCSSを簡単に大量生産できる。

目次

  1. forループの使い方
  2. 変数の呼び出し方法
    1. 変数の値をCSSのプロパティの値として使用する
    2. 変数の値をセレクタや処理の途中で使う
  3. marginを持ったプロパティの一括生成
  4. paddingを持ったプロパティの一括生成
  5. font-sizeを持ったプロパティの一括生成
  6. 関連リンク

forループの使い方

書き方にはthroughとtoの２つがある。
throughは終わりの値を含み、toは含まない。

・@for $変数名 from 開始値 through 終了値 {処理}

.scss（through）
@for $変数名 from 1 through 10 {
  処理
}

$iは１〜１０まで。


・@for $変数名 from 開始値 to 終了値 {処理}

.scss（to）
@for $変数名 from 1 to 10 {
  処理
}

$iは１〜9まで。


変数の呼び出し方法

変数の呼び出し方法は状況により２つある。

  1. 変数の値をCSSのプロパティの値として使用する。（あるいは四則演算で使う）
  2. 変数の値をセレクタや処理の途中で使う。

1. 変数の値をCSSのプロパティの値として使用する

▼値をそのまま使用

.scss
$slite-dark: #333;

.defalut-text {
  color: $slite-dark
}

↓CSSにコンパイル

.css
.defalut-text {
  color: #333;
}



▼四則演算

.scss
$oct: 8;

.small-text{
  font-size: $oct / 2;
}

.large-test{
  font-size: $oct * 4;
}

↓CSSにコンパイル

.css
.small-text {
  font-size: 4;
}

.large-test {
  font-size: 32;
}


2. 変数の値をセレクタや処理の途中で使う

定義した変数をセレクタや処理一部で呼び出すには#{ }の中で$変数名を使う。

.scss
$tri: 3;

h#{$tri}{
  font-size: #{$tri * 6}px;
}

↓CSSにコンパイル

.css
h3 {
  font-size: 18px;
}


marginを持ったプロパティの一括生成

forと変数を組み合わせてmarginのパターンを生成する。

例として8pxの倍数で8px~40pxまでmarginを設定してみる。（命名規則はFLOCSSを採用）



▼sassの記述

.scss
@for $i from 0 through 5 {
  //margin
  .u-mt-#{$i} {
    margin-top: #{$i * 8}px !important;
  }
  .u-mb-#{$i} {
    margin-bottom: #{$i * 8}px !important;
  }
  .u-ml-#{$i} {
    margin-left: #{$i * 8}px !important;
  }
  .u-mr-#{$i} {
    margin-right: #{$i * 8}px !important;
  }
  .u-m-#{$i} {
    margin: #{$i * 8}px !important;
  }
}
  • u-mtはutilityレイヤーのMergin Topの略。
  • モジュールに追加するプロパティになるので強制適用の!importantを設定。

　↓CSSにコンパイル

▼コンパイル後のコード

.css
.u-mt-0 {
  margin-top: 0px !important;
}

.u-mb-0 {
  margin-bottom: 0px !important;
}

.u-ml-0 {
  margin-left: 0px !important;
}

.u-mr-0 {
  margin-right: 0px !important;
}

.u-m-0 {
  margin: 0px !important;
}

.u-mt-1 {
  margin-top: 8px !important;
}

.u-mb-1 {
  margin-bottom: 8px !important;
}

.u-ml-1 {
  margin-left: 8px !important;
}

.u-mr-1 {
  margin-right: 8px !important;
}

.u-m-1 {
  margin: 8px !important;
}

.u-mt-2 {
  margin-top: 16px !important;
}

.u-mb-2 {
  margin-bottom: 16px !important;
}

.u-ml-2 {
  margin-left: 16px !important;
}

.u-mr-2 {
  margin-right: 16px !important;
}

.u-m-2 {
  margin: 16px !important;
}

.u-mt-3 {
  margin-top: 24px !important;
}

.u-mb-3 {
  margin-bottom: 24px !important;
}

.u-ml-3 {
  margin-left: 24px !important;
}

.u-mr-3 {
  margin-right: 24px !important;
}

.u-m-3 {
  margin: 24px !important;
}

.u-mt-4 {
  margin-top: 32px !important;
}

.u-mb-4 {
  margin-bottom: 32px !important;
}

.u-ml-4 {
  margin-left: 32px !important;
}

.u-mr-4 {
  margin-right: 32px !important;
}

.u-m-4 {
  margin: 32px !important;
}

.u-mt-5 {
  margin-top: 40px !important;
}

.u-mb-5 {
  margin-bottom: 40px !important;
}

.u-ml-5 {
  margin-left: 40px !important;
}

.u-mr-5 {
  margin-right: 40px !important;
}

.u-m-5 {
  margin: 40px !important;
}

コンパイルすると一瞬で大量のコードが生成される。


htmlへの適用例

htmlへの適用は簡単。例えばクラス属性にu-mt-3を指定すれば、margin-top:24pxが適用される。

<div class="u-mt-3">テスト</div>


paddingを持ったプロパティの一括生成

paddingも同様にすれば一瞬で大量生成できる。

.scss
@for $i from 0 through 10 {
  .u-pt-#{$i} {
    padding-top: #{$i * 8}px !important;
  }
  .u-pb-#{$i} {
    padding-bottom: #{$i * 8}px !important;
  }
  .u-pl-#{$i} {
    padding-left: #{$i * 8}px !important;
  }
  .u-pr-#{$i} {
    padding-right: #{$i * 8}px !important;
  }
  .u-p-#{$i} {
    padding: #{$i * 8}px !important;
  }
}

変数を０〜１０にすれば、０〜８０pxまで作成できる。
（コンパイル結果は膨大なので割愛）


font-sizeを持ったプロパティの一括生成

font-sizeも同様にすれば一瞬で大量生成できる。

.scss
@for $i from 1 through 20 {
  .u-fs-#{$i} {
    padding-top: #{$i * 4}px;
}

4px ~ 20px（4px毎）まで生成できる。



forループと変数は他にも何かと応用可能。


関連リンク

・FLOCSSとは？
・sassとscssの違い
・LaravelでSASSを使う方法

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-22T19:53:47+09:00

【Sass】forループと変数でmarginやpadding、フォントサイズなどのCSSを簡単作る方法。

Sassのforループと変数を使うと、marginやpadding、フォントサイズなど一定の倍数で数値が変化するCSSを簡単に大量生産できる。

目次

  1. forループの使い方
  2. 変数の呼び出し方法
    1. 変数の値をCSSのプロパティの値として使用する
    2. 変数の値をセレクタや処理の途中で使う
  3. marginを持ったプロパティの一括生成
  4. paddingを持ったプロパティの一括生成
  5. font-sizeを持ったプロパティの一括生成
  6. 関連リンク

forループの使い方

書き方にはthroughとtoの２つがある。
throughは終わりの値を含み、toは含まない。

・@for $変数名 from 開始値 through 終了値 {処理}

.scss（through）
@for $変数名 from 1 through 10 {
  処理
}

$iは１〜１０まで。


・@for $変数名 from 開始値 to 終了値 {処理}

.scss（to）
@for $変数名 from 1 to 10 {
  処理
}

$iは１〜9まで。


変数の呼び出し方法

変数の呼び出し方法は状況により２つある。

  1. 変数の値をCSSのプロパティの値として使用する。（あるいは四則演算で使う）
  2. 変数の値をセレクタや処理の途中で使う。

1. 変数の値をCSSのプロパティの値として使用する

▼値をそのまま使用

.scss
$slite-dark: #333;

.defalut-text {
  color: $slite-dark
}

↓CSSにコンパイル

.css
.defalut-text {
  color: #333;
}



▼四則演算

.scss
$oct: 8;

.small-text{
  font-size: $oct / 2;
}

.large-test{
  font-size: $oct * 4;
}

↓CSSにコンパイル

.css
.small-text {
  font-size: 4;
}

.large-test {
  font-size: 32;
}


2. 変数の値をセレクタや処理の途中で使う

定義した変数をセレクタや処理一部で呼び出すには#{ }の中で$変数名を使う。

.scss
$tri: 3;

h#{$tri}{
  font-size: #{$tri * 6}px;
}

↓CSSにコンパイル

.css
h3 {
  font-size: 18px;
}


marginを持ったプロパティの一括生成

forと変数を組み合わせてmarginのパターンを生成する。

例として8pxの倍数で8px~40pxまでmarginを設定してみる。（命名規則はFLOCSSを採用）



▼sassの記述

.scss
@for $i from 0 through 5 {
  //margin
  .u-mt-#{$i} {
    margin-top: #{$i * 8}px !important;
  }
  .u-mb-#{$i} {
    margin-bottom: #{$i * 8}px !important;
  }
  .u-ml-#{$i} {
    margin-left: #{$i * 8}px !important;
  }
  .u-mr-#{$i} {
    margin-right: #{$i * 8}px !important;
  }
  .u-m-#{$i} {
    margin: #{$i * 8}px !important;
  }
}
  • u-mtはutilityレイヤーのMergin Topの略。
  • モジュールに追加するプロパティになるので強制適用の!importantを設定。

　↓CSSにコンパイル

▼コンパイル後のコード

.css
.u-mt-0 {
  margin-top: 0px !important;
}

.u-mb-0 {
  margin-bottom: 0px !important;
}

.u-ml-0 {
  margin-left: 0px !important;
}

.u-mr-0 {
  margin-right: 0px !important;
}

.u-m-0 {
  margin: 0px !important;
}

.u-mt-1 {
  margin-top: 8px !important;
}

.u-mb-1 {
  margin-bottom: 8px !important;
}

.u-ml-1 {
  margin-left: 8px !important;
}

.u-mr-1 {
  margin-right: 8px !important;
}

.u-m-1 {
  margin: 8px !important;
}

.u-mt-2 {
  margin-top: 16px !important;
}

.u-mb-2 {
  margin-bottom: 16px !important;
}

.u-ml-2 {
  margin-left: 16px !important;
}

.u-mr-2 {
  margin-right: 16px !important;
}

.u-m-2 {
  margin: 16px !important;
}

.u-mt-3 {
  margin-top: 24px !important;
}

.u-mb-3 {
  margin-bottom: 24px !important;
}

.u-ml-3 {
  margin-left: 24px !important;
}

.u-mr-3 {
  margin-right: 24px !important;
}

.u-m-3 {
  margin: 24px !important;
}

.u-mt-4 {
  margin-top: 32px !important;
}

.u-mb-4 {
  margin-bottom: 32px !important;
}

.u-ml-4 {
  margin-left: 32px !important;
}

.u-mr-4 {
  margin-right: 32px !important;
}

.u-m-4 {
  margin: 32px !important;
}

.u-mt-5 {
  margin-top: 40px !important;
}

.u-mb-5 {
  margin-bottom: 40px !important;
}

.u-ml-5 {
  margin-left: 40px !important;
}

.u-mr-5 {
  margin-right: 40px !important;
}

.u-m-5 {
  margin: 40px !important;
}

コンパイルすると一瞬で大量のコードが生成される。


htmlへの適用例

htmlへの適用は簡単。例えばクラス属性にu-mt-3を指定すれば、margin-top:24pxが適用される。

<div class="u-mt-3">テスト</div>


paddingを持ったプロパティの一括生成

paddingも同様にすれば一瞬で大量生成できる。

.scss
@for $i from 0 through 10 {
  .u-pt-#{$i} {
    padding-top: #{$i * 8}px !important;
  }
  .u-pb-#{$i} {
    padding-bottom: #{$i * 8}px !important;
  }
  .u-pl-#{$i} {
    padding-left: #{$i * 8}px !important;
  }
  .u-pr-#{$i} {
    padding-right: #{$i * 8}px !important;
  }
  .u-p-#{$i} {
    padding: #{$i * 8}px !important;
  }
}

変数を０〜１０にすれば、０〜８０pxまで作成できる。
（コンパイル結果は膨大なので割愛）


font-sizeを持ったプロパティの一括生成

font-sizeも同様にすれば一瞬で大量生成できる。

.scss
@for $i from 1 through 20 {
  .u-fs-#{$i} {
    padding-top: #{$i * 4}px;
}

4px ~ 20px（4px毎）まで生成できる。



forループと変数は他にも何かと応用可能。


関連リンク

・FLOCSSとは？
・sassとscssの違い
・LaravelでSASSを使う方法

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-22T19:22:48+09:00

【新春企画】Web Developer Roadmap を真面目に勉強するまとめ【フロントエンド編】

前提

現在、組み込み系エンジニアの私が、今後はウェブ業界に挑戦するにあたって
「強みは技術力です！」
とかっこいいことがちゃんと言えるようになりたいと思いこの企画をはじめました。
いつでもアクセス可能のように備忘も兼ねて書きます。

これまで

事前にこちらの記事を勉強済みです。
↓↓↓
Webエンジニアになりたい人に捧げる学習ロードマップ

駆け出しフロントエンドエンジニアに求められるもの
1. HTML/CSSによるWebサイトコーディング経験（レスポンシブ対応含む）
2. JavaScriptの基礎構文理解
3. JavaScriptを使った動くUI(複数パターン)の実装経験
4. jQueryのプラグインやAjaxを使った実装経験
5. タスクランナー(gulp)やモジュールバンドラー(Webpack)の利用経験
6. Vue.jsもしくはReact.jsを使ったミニアプリの開発経験
7. 上記のスキルが証明できるポートフォリオサイトもしくはGitHubアカウントの提出

記事の役割

この記事が本で言う【目次】という役割となりここから各項目へジャンプできるような構造になっています。

どのように進めるのか

すでにあるロードマップ通りに学習していきます。
今回真面目に勉強するロードマップがこちら！！
↓↓↓
Webエンジニアのためのロードマップ
// 高校の同級生
// 出席番号が1つ前
// サッカー部の友人
// ありがとう

ロードマップの存在目的の中にこのようなメッセージが。

The purpose of these roadmaps is to give you an idea about the landscape and to guide you if you are confused about what to learn next and not to encourage you to pick what is hip and trendy. You should grow some understanding of why one tool would be better suited for some cases than the other and remember hip and trendy never means best suited for the job.

「迷ったり、流行に流されたりしないように活用してね」
「適材適所でどんな手段がなぜ良いのかを理解し、流行っているものがベストとは限らないよ」

と、どんな時代でも通用する本質を学べそうですね。

何を学ぶのか

ひとまずその中でも、フロントエンドのスキルについて勉強していきたいと思います。
[ ]←チェックボックスが全部[x]になっていくイメージ

1.Internet[ ]

2.HTML[ ]

  • Please wait...
  • Please wait...

3.CSS[ ]

  • Please wait...
  • Please wait...

4.Javascript[ ]

  • Please wait...
  • Please wait...
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-22T19:00:05+09:00

【CSS】marginかpaddingどちらを使うか？（marginとpaddingの仕様の違い）

余白を追加したい場合にmarginかpaddingどちらを使うかがわからなかったので調べてみた。

説明できますか？

ある要素（モジュール）の上に24pxの余白を追加する場合、margin-topで24px指定するのと、padding-topで24px指定するのは何が違うか？

そして、どちらを使うべきか？


回答

推奨はmargin。

理由はmarginの持つ相殺機能のため。marginを使えば意図した間隔を保つことができる。

一方paddingは上の要素の状況によって隙間が変動してしまうため。

上の要素（モジュール）にmargin-bottomのようなプロパティが適用されていない場合はどちらを使っても見た目は同じ。
ただし、上の要素にmargin-bottomが適用されていると挙動が変わってくるという話。

padddingの場合

padding-topで隙間を作った場合、上の要素にmargin-bottomが適用されていると、２つの要素の間隔は合計値になる。

例えば、上の要素がmargin-bottom: 24px、下の要素がpadding-bottom: 24pxの場合、間隔は48pxとなる。

意図した24pxよりかなり大きくなってしまう、、


marginの場合

marginの場合は大きい方の間隔が適用される。

例えば、上の要素がmargin-bottom: 24px、下の要素がmargin-bottom: 24pxの場合、間隔は24pxとなる。

なので、意図した感覚を保つことができる。

image.png

ちなみに上の要素のmargin-bottomの値が下の要素のmargin-topよりも大きければ、大きい方の値が優先される。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-22T15:50:46+09:00

SCSSでの画像の挿入とサイズの指定

1.SCSSとは

　SCSSとはウェブページのスタイルを指定するCSSより効率よく記述するためのものです。
cssはよく聞くと思いますが、scssはあまり聞かないのじゃないかと思い今回記事を書かさせていただきました。

2.SCSSでの画像挿入

　1)まずcssファイルがscssファイルになっていない場合、scssファイルに変更しましょう。名前の変更で語末のcssをscssに変えるだけです。

2)そして次に以下のように画像の挿入ですまずapp/asset/imagesのフォルダの中に写真を用意しましょう。
Image from Gyazo

3)用意したscssファイルを開き画像を用意します。以下が書き方の例です。
htmlで用意したクラス名contentsを使い指定していきます。
　まずbackground-imageのなかに背景の画像としておきたいものをimage-urlの括弧の中に指定します。
これだけで写真は貼り付けられますが、何回も写真がリピートしてしまします。その時に使うのがbackground-repeatです。これにno-repeatをつけると一枚だけの写真にすることができます。そのほかはbackground-sizeで大きさを指定したり、heightやwidthでも大きさは指定できたり、位置をどうするかなどは基本的なcssの指定の仕方で大丈夫です。またこれは背景画像なので、この上にhtmlの文字を乗っけてデザインすることも可能です。

index.scss
  .contents {
  background-image: image-url("image_top.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

3.最後に

このようにscssならではの簡単な記述で指定できるものもたくさんあるので是非使ってみてください！！

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

雑に学ぶCSS設計

はじめに

上司「味噌くん。しばらくコロナでお仕事無いから。」

新人1年目僕(

　　　　経験積めない
　　　　　　　↓
　最悪、転職(真っ白な経歴書)
　　　　　　　↓
　　　　こりゃまずい

)

仕方ないから、Qiitaでポートフォリオを増産するか。　←今ここ

本題のちょっと前の話

ReactでWeb開発する僕「うっ...個人開発初心者特有の汚いコードを書いてしまった。」

個人開発によって生まれた汚いコード　←　何とかせねば

僕「TypeScriptコードはlinterとprettierである程度はコーディング規則を整理できるけど、CSSってどう書けばいいのさ。」

今回は、CSSの設計手法に関して調べた内容を書いていこうと思います。

CSSとは

CSS（Cascading Style Sheets）とはHTMLやXMLような文章を構造化して記述するマークアップ言語に対して、色やフォントなどのスタイルを整えるためのスタイルシート言語です。
HTMLはCSSを読まずとも、styleタグやstyle属性を使うことでスタイルを指定することができます。しかし、肥大化していくWebページに特定箇所のみにスタイルを適用するような書き方を行い、無駄に行数を増やすのは得策ではありません。そのため、HTMLやXMLは文章構造を担い、CSSはスタイルを担うように分離してWeb開発を行うことが一般的です。

肥大化するページとCSSの複雑化

さて、時代とともにWebページのコンテンツが充実し、タブレットやスマホなどでレイアウトが異なるレスポンシブデザインやアニメーションが見られるようになりました。ところが、CSSはグローバルスコープしか持たないため、スタイルを重複しない命名で指定しなければなりません。そのため、開発現場ではページ自体の肥大化と開発人員の増加が相まって、CSSは複雑化し、保守性や拡張性を劣化しました。そこで、この問題を解決するためにCSS設計についていくつかの手法が生まれました。

CSS設計

まず前提として、CSS設計はどれが一番優れているといった比較はできません。あくまで、設計における手法・思想であり、プログラミングパラダイムやフレームワークのように開発環境や好みに応じて使い分けてください。それを踏まえたうえで、以下のCSS設計の紹介をさせてもらいます。

  • SMACSS
  • OOCSS
  • BEM

また、我流で書いている部分もあるので良いと思ったものを取り入れてもらえると嬉しいです。

SMACSS

詳しい内容は「Scalable and Modular Architecture for CSS」で紹介されていますので、この記事では紹介されていた例とともに、かいつまんで説明していきます。
SMACSS(Scalable and Modular Architecture for CSS)はスタイルの対象に関して以下の5つのパターンに分類することを基本とします。

  • Base

<html>や<body>、<form>といった単独の要素や属性(IDやクラスを扱わない)

html, body, form { margin: 0; padding: 0; }
input[type=text] { border: 1px solid #999; }
a { color: #039; }
a:hover { color: #03C; }
  • Layout

ページ内で分割された1つ以上のModuleを持つセクション

#header, #article, #footer {
    width: 960px;
    margin: auto;
}

#article {
    border: solid #CCC;
    border-width: 1px 0 0;
}
  • Module

再利用可能なパーツ

.module > h2 {
    padding: 5px;
}

.module span {
    padding: 5px;
}
  • State

ドロップダウンやサイドメニューの表示非表示やコンポーネントの拡大縮小、コンポーネントが利用可能かなどのLayoutとModuleの状態

<!-- CSSを適用する対象要素 -->
<div id="header" class="is-collapsed">
    <form>
        <div class="msg is-error">
            There is an error!
        </div>
        <label for="searchbox" class="is-hidden">Search</label>
        <input type="search" id="searchbox">
    </form>
</div>

.tab {
    background-color: purple;
    color: white;
}

.is-tab-active {
    background-color: white;
    color: black;
}
  • Theme

文字色や画像定義、表示言語などのサイト上で見えるもの

.mod {
    border: 1px solid;
}

.mod {
    border-color: blue;
}

また、SMACSSでは命名規則に関しても言及しています。例えば、Layoutには"l-"や"layout-"、Stateには"is-"のようにスタイルのパターンごとに異なったものにします。これにより、CSSが複数ファイルに分割されようとスタイルがどのパターンで指定されているか、どのファイルに属しているか簡単に推察することができます。

OOCSS

OOCSS(Object Oriented CSS)は「構造と見た目を分離する」ことを目的としたCSS設計手法です。
例えば、横並びのボタンを考えてください。

<button class="btn save-btn">
    <font>save</font>
</button>

<button class="btn load-btn">
    <font>load</font>
</button>

/* 構造のみを書く */
.btn{
    float: left;
    text-align: center;
}

/* 見た目のみを書く */
.load-btn{
    background-color: #248;
    color: #fff;
}

新しいビットマップ-イメージ.jpg

多くのWebサイトではボタンやフォームといったものが並んでいる場合、サイズは同じであることが多いです。そして、各部品を区別するために色やアイコンを使っています。
OOCSSでは、同じサイズつまり同じ構造を繰り返し使い、色やアイコンなどの見た目を各部品に適用できるようなCSSの書き方を推奨する設計手法です。

BEM

BEMは以下の3つの要素からなる設計手法です。名前の由来もその頭文字を取っています。

  • Block

何かしらのかたまり　ヘッダーやフッター、検索バー

  • Element

Block内の要素(必ずBlock内に存在しなければならない) 検索バーにおける入力フォームと検索ボタン

  • Modifier

修飾　BlockまたはElementに対する見た目や状態

また、命名規則に関しては他の2つと異なり、MindBEMdingという以下の書き方にします。

block__element--modifier

雑ですが、例を作りました。
※classは1つ指定(シングルクラス)とするのが基本らしいのですが、個人的に必要はないかなって思っています。

<form action="#" method="post">

    <div class="content">
        <p>名前：
            <br>
            <input class="content__input" type="text" name="name">
        </p>
    </div>

    <div class="content">
        <p>mail：
            <br>
            <input class="content__input" type="text" name="mail">
        </p>
    </div>

    <div class="content">
        <p>phone(任意)：
            <br>
            <input class="content__input content__input--orange" type="text" name="phone">
        </p>
    </div>

</form>

    .content{
        display: flex;
        align-items: center;
        justify-content: left;
    }
    .content__input{
        border-radius:3px;
        border: 2px solid #0FF;
    }
    .content__input--orange{
        border: 2px solid #ffCC00;
    }

新しいビットマップ-イメージ-_2_.jpg

BEMは長い命名規則を持ってしまうことが問題として挙げられますが、シングルクラスや強い命名規則は長い目で見ても高いメンテナンス性を保証します。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧