- 投稿日:2020-01-18T20:34:33+09:00
【CSS】背景に画像を複数設置し、その「上」にコンテンツを載せる
.contentInnerとその中身を画像の上に浮かせます
filename.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <div class="headerInner"> <div class="headerLeft"> <img src="./img/" alt="logo"> </div> <nav> <ul> <li> <a href="">HOME</a> </li> <li> <a href="">CONTENT</a> </li> <li> <a href="">CONTACT</a> </li> </ul> </nav> </div> </header> <div class="contentInner"> <h2>h2_title</h2> <section class="top"> <div class="leftContents"> <h3 class="h3_title">h3_title</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus ea obcaecati laborum ad deleniti fugiat dolor ut, nemo recusandae illum possimus, enim soluta magnam iste at magni nam. Alias, voluptate? </p> </div> <img src="./img/IMG_0671.JPG" alt=""> </section> <section class="center reverse"> <div class="leftContents"> <h3 class="h3_title">h3_title</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, asperiores exercitationem! Rem alias assumenda eaque mollitia accusamus aliquid hic excepturi? Labore veniam iste neque eaque id quod adipisci vel libero. </p> </div> <img src="./img/IMG_0671.JPG" alt=""> </section> <section class="top"> <div class="leftContents"> <h3 class="h3_title">h3_title</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus ea obcaecati laborum ad deleniti fugiat dolor ut, nemo recusandae illum possimus, enim soluta magnam iste at magni nam. Alias, voluptate? </p> </div> <img src="./img/IMG_0671.JPG" alt=""> </section> <section class="center reverse"> <div class="leftContents"> <h3 class="h3_title">h3_title</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, asperiores exercitationem! Rem alias assumenda eaque mollitia accusamus aliquid hic excepturi? Labore veniam iste neque eaque id quod adipisci vel libero. </p> </div> <img src="./img/IMG_0671.JPG" alt=""> </section> <section class="top"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus ea obcaecati laborum ad deleniti fugiat dolor ut, nemo recusandae illum possimus, enim soluta magnam iste at magni nam. Alias, voluptate? </p> <img src="./img/IMG_0671.JPG" alt=""> </section> <section class="center reverse"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, asperiores exercitationem! Rem alias assumenda eaque mollitia accusamus aliquid hic excepturi? Labore veniam iste neque eaque id quod adipisci vel libero. </p> <img src="./img/IMG_0671.JPG" alt=""> </section> </div> </body> </html>filename.css* { padding: 0; margin: 0; } ol, ul { list-style: none; } a { cursor: pointer; color: black; text-decoration: none; } header { width: 100%; background: linear-gradient(#fe3, #66ff22); position: absolute; top: 0; z-index: 100; } .headerInner { width: 1000px; margin: 0 auto; display: flex; } nav { width: 100%; } nav ul { display: flex; right: 0; } nav ul li { width: 100%; text-align: center; border-right: 1px solid white; } nav ul li:first-child { border-left: 1px solid white; } nav ul li a { display: block; padding: 20px; font-weight: bold; } nav ul li a:hover { background: linear-gradient(green, aqua) ; transition: all 0.8s; } body { background-image: url(./img/IMG_0007.JPG), url(./img/IMG_0830.JPG); background-repeat: no-repeat, no-repeat; background-size: 100% 400px, 100% 400px; background-position: top, 0px 400px, center, 0px 300px; } .contentInner { width: 1000px; margin: 130px auto; background-color: azure; height: 100%; padding: 30px 0; border-radius: 20px; } .contentInner>section { width: 900px; margin: 30px auto; background-color: palegreen; display: flex; } .reverse { flex-direction: row-reverse; } img { width: 40%; } .leftContents { padding: 30px; } h2, h3 { text-align: center; }
- 投稿日:2020-01-18T19:00:42+09:00
【CSS】画像と台形のテキストボックスを重ねたアイキャッチの作り方
【CSS】画像と台形のテキストボックスを重ねたアイキャッチの作り方
オンライン学習サイトの画像を想定しています。
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="relative mv"> <!--左側画像部分--> <img src="./img/school.jpg" alt=""> <!--/左側画像部分--> <!--右側テキストボックス--> <div class="my-parts absolute"> <div class="textWrapper"> <h2> 洗練されたオンライン学習体験を。 </h2> <div class="box"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda rem laboriosam quidem quasi deserunt delectus animi suscipit ratione modi illum ipsa ipsum dicta aliquid, consequatur exercitationem! Minima at facere deserunt! </div> <div class="box"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio, accusantium aspernatur atque quidem pariatur placeat iure alias consectetur, fuga, debitis ipsum? Eum sit cumque dolores tempora laborum consequuntur neque voluptas. </div> <div class="btnWrapper"> <p class="btn orange"> <a href="">お問い合わせ</a> </p> <p class="btn aqua"> <a href="">詳しく見る</a> </p> </div> </div> </div> <!--/右側テキストボックス--> </body> </html>style.css* { padding: 0; margin: 0; } a { cursor: pointer; color: black; text-decoration: none; } /*.mv*/ .relative { position: relative; width: 1000px; margin: 0 auto; display: flex; justify-content: space-between; } .absolute { position: absolute; } /*.mv img*/ .relative img { width: 500px; height: 100%; } /*右側*/ .my-parts { border-bottom: 334px solid cornflowerblue; width: 600px; height: 0px; border-left: 50px solid transparent; right: 0; } .textWrapper { padding: 30px; } h2 { text-align: center; } /*ボタン部分*/ .btnWrapper { display: flex; justify-content: space-around; margin-top: 10px; } p.btn { width: 40%; text-align: center; border: 2px solid grey; border-radius: 30px; } p.btn a { display: block; padding: 10px 0; } .aqua { background-color: aqua; } .orange { background-color: orange; } p.btn:hover { opacity: 0.8; transition: all 0.5s; } /*/ボタン部分*/
- 投稿日:2020-01-18T17:56:31+09:00
Firebase 静的サイト(html CSS JavaScript)をデプロイ
Firebaseにてデプロイの記録
【使用環境】
html
CSS
JavaScript
macbook<次回の時短の為に記録>
Firebaseにて登録、 (googleアカウント必要)ログイン
新しいプロジェクトフォルダをFirebase HP内で作成する。
ここからターミナルで
今回は下記②の設定のために public ディレクトリ 配下にデプロイアプリ(html CSS JavaScript img等)を配置
URL > ルートパスの為
デプロイにGitHubは必須ではないが、
git add ←必要なら
git commit ←必要なら
push ←必要なら
① firebase-tools をインストール
(npm がインストールされている前提) $ npm install -g firebase-tools $ npm -v $ firebase -V $ firebase loginアプリディレクトリへ移動後、
①初期化
$ firebase initPCの矢印キーで Hosting: を選択。 (色が変わる。かつ●へ)
エンター
firebaseのHPで作成した
アプリを関連付けるプロジェクトを選択するよう求められる
Use an existing project を選んで エンター
HPで作成したプロジェクト一覧がでる。
今回のものを選択し、エンター(画像はありません)
②
ディレクトリのパスを聞かれるのでデフォルト (/public) のまま エンター
Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
他も動かすため、推奨 Nを選択File public/index.html already exists. Overwrite?
作成したindex.htmlが上書きされるので 推奨 Nを選択complete!
初期化が完了
デプロイ
そのままの階層で
$ firebase deploy↑ ここの下に URLがある。
デプロイ完了
(修正後の再デプロイは、$ firebase deployだけで↑は不要)
2回目以降の事象
$ firebase login >Error: Server Error. certificate has expiredその為、
firebase-toolsをupdateする必要がある
$ sudo npm i -g firebase-tools $ firebase loginログインできた
- 投稿日:2020-01-18T16:04:38+09:00
「初心者必見 」HTML 本当にその組み方で合ってるの? (BEMとSASSをこそっと使いますっ)
HTMLの組み方ってイマイチわかりにくいですよね。そもそもどう考えたらいいのでしょう?
HTMLを組むこと(マークアップ)には私自身かなり苦労しました。パターンが無限に見えますし、エラーが出ないのでどう改善したらいいかわからなかったのです。1年以上前にProgateでやってみたものの、よくわからないままでした。そういう方多いと思います。
このままではダメだ!ということで半年以上毎日マークアップし続け、
ほぼほぼマークアップの組み方の体系ができたので、書き残して置くことにしました。この記事は、過去私と同じようにHTMLに苦しんでいる方に向けて書きました。
HTMLで重要な考え方
毎日マークアップをし続けて、重要なことに気づきました。
それは、レイヤー意識です。は?レイヤー意識?なにそれ?
レイヤーとは層です。HTMLでレイヤー=タグです。
どういうことかといいますと、div > div > div なら3層(レイヤー)構造です。
各レイヤーの役割を意識し、スタイルを的確に当てるのです。
初めは難しく感じると思いますので、今ここでは「へー、そうなんだ」っと流しててください。例を出しましょう
Lesson1 HTMLの考え方
Lesson2 block系とinline系の使い分け
Lesson3 準備:当たりの付け方Lesson1 HTMLの考え方
「div div div ・・・・・ってどこまでタグ増やすのかわからない」
これが一番大きな問題でしょう。
どのようにdivなどの階層をつくるのか?一緒に考えましょう!・画像やテキストがを括っているレイヤー
・それを上から括っているレイヤー
・それを上から括っているレイヤー
・それを上から括っているレイヤー
....etcという風になってますね。
まず考えるのは、テキストと画像を直上で括っているレイヤー(緑)ですね。
その括っているレイヤーをコンポーネントとしましょうか。
例えばカードスタイルですね。
上の画像はカードスタイルですね。そうこのコンポーネントのレイヤーを探すのです。
Lesson2 block系とinline系の使い分け
コンポーネントを見つけたら、次はコンポーネントの中身の並びを考えましょう!
「画像の横にテキスト」という並びにしてみましょうまずテキストがバラバラなので、divで括っちゃいましょう。
そうすれば、そのdivにスタイルを当てるだけで、中身のテキストを同時に動かせますからね。
div
figure
img
div(これ追加)
p
p
※こういうdivを私はラッパーと読んでます。
Card__txt-wrapperみたいな感じのクラス名を使います。
んー・・・コンポーネントの中身が全て横幅一杯に広がってますね。
これでは横並びにできません。なぜでしょうか?中身の要素がブロックだからです。
※Progateでブロックうんぬん説明しているレッスンありましたよね?ブロックは横に広がるんです。
じゃぁ、figureとdivにwidth40%とか50%でも当てたら横並びになりますか?ならないですよ。なぜでしょうか?
それはblockだからです。見た目は縮まっても実際には縮まってないからです。それぞれinline-blockに変えましょう。width調整すれば横並びになるはずです。
※ちなみに50%では横並びになりませんよね?なぜでしょう?
それはご自身で確認してくださいね。ヘッダーやフッター作るときに使うことありますので。Lesson3 準備:当たりの付け方
ここまでざっくり組み方を「お勉強」しました。
さて、実際に組んで見ましょう!ここではXDのUIキットを使ってます。
下記よりダウンロードしてください。
https://xdresources.co/resources/responsive-resize-kitまず大まかに捉えましょう!
ヘッダー、メイン、フッターですねぇ。
※今回はヘッダーの中に、ヒーローを入れますが階層意識をつけてもらうためにわざとです。さて、コンポーネントレイヤーを探しましょうか!
①ヒーロー(topの目立つ画像周辺)には、テキストやボタンが並んでますね。
div.Hero
p.txt1
p.txt2
button②ヒーロの右横にもコンポーネントレイヤー発見!
今回はテキストを括るだけですねぇ。括るってなれば、まず私はラッパーと名付けます!
div.Hero-Txt-Wrapper
p.txt1
p.txt2ヒーロー周辺にあるので、Hero-Txt-Wrapperとしました。
③メインにカードが並んでますねぇ・・・カードはコンポーネントレイヤーになる!
div.Card
p.txt1
p.txt2④ん?カードを括るレイヤーもほしいな。。そして並んでるから、listだ!
ul.Card-List
li.Card-List_item
p.txt1
p.txt2
li.Card-List_item
p.txt1
p.txt2もしくは
ul.Card-List
li.Card
p.txt1
p.txt2という感じでまずHTMLを組むのです
ある程度組んでから、コンポーネントとその中身毎にCSSを当てていきます。
一気にカードを並べたり・・・なんて考えると難しいです。並べるに当たってfloatでもinlineでもflexでもなんでも良いですが、
まずカードをしっかり作った方がうまくいきます。ラッパー(上)から当てると、ガチガチ固まりすぎて流用きかず、
よくわからないCSSの出来上がりです。理解しやすいコンポーネントレベルについて組み上げると、 CSSが綺麗なることと無駄なレイヤーがなくなります。
デザインに合わせた必要最少レベルのレイヤー出かけるようになります。余談:コンポーネントの中身
「コンポーネントもラッパーなんじゃない?」ってお気付きの方もいるでしょう。
そうです。
そして、コンポーネントの中身がアトミックです。
さらにいうと、アトミックの中身がエレメンタリーパーティクルです。ここら辺の話はCSS設計レベルになるので、また今後書きます。
最終的にはAtomicDesign・FLOCCSS・BEMを融合したCSS設計
これを順序立てては書き上げる予定です。次回はBEMです。
BEMのブロックネスト・・・お困りでしょうだから次はBEMのブロックネスト対応パターンと
それぞれパターンの選択基準について書きます。
- 投稿日:2020-01-18T16:04:38+09:00
「初心者必見 」HTML 本当にその組み方で合ってるの? (BEMをこそっと使いますっ)
HTMLの組み方ってイマイチわかりにくいですよね。そもそもどう考えたらいいのでしょう?
HTMLを組むこと(マークアップ)には私自身かなり苦労しました。パターンが無限に見えますし、エラーが出ないのでどう改善したらいいかわからなかったのです。1年以上前にProgateでやってみたものの、よくわからないままでした。そういう方多いと思います。
このままではダメだ!ということで半年以上毎日マークアップし続け、
ほぼほぼマークアップの組み方の体系ができたので、書き残して置くことにしました。この記事は、過去私と同じようにHTMLに苦しんでいる方に向けて書きました。
HTMLで重要な考え方
毎日マークアップをし続けて、重要なことに気づきました。
それは、レイヤー意識です。は?レイヤー意識?なにそれ?
レイヤーとは層です。HTMLでレイヤー=タグです。
どういうことかといいますと、div > div > div なら3層(レイヤー)構造です。
各レイヤーの役割を意識し、スタイルを的確に当てるのです。
初めは難しく感じると思いますので、今ここでは「へー、そうなんだ」っと流しててください。例を出しましょう
Lesson1 HTMLの考え方
Lesson2 block系とinline系の使い分け
Lesson3 準備:当たりの付け方Lesson1 HTMLの考え方
「div div div ・・・・・ってどこまでタグ増やすのかわからない」
これが一番大きな問題でしょう。
どのようにdivなどの階層をつくるのか?一緒に考えましょう!・画像やテキストがを括っているレイヤー
・それを上から括っているレイヤー
・それを上から括っているレイヤー
・それを上から括っているレイヤー
....etcという風になってますね。
まず考えるのは、テキストと画像を直上で括っているレイヤー(緑)ですね。
その括っているレイヤーをコンポーネントとしましょうか。
例えばカードスタイルですね。
上の画像はカードスタイルですね。そうこのコンポーネントのレイヤーを探すのです。
Lesson2 block系とinline系の使い分け
コンポーネントを見つけたら、次はコンポーネントの中身の並びを考えましょう!
「画像の横にテキスト」という並びにしてみましょうまずテキストがバラバラなので、divで括っちゃいましょう。
そうすれば、そのdivにスタイルを当てるだけで、中身のテキストを同時に動かせますからね。
div
figure
img
div(これ追加)
p
p
※こういうdivを私はラッパーと読んでます。
Card__txt-wrapperみたいな感じのクラス名を使います。
んー・・・コンポーネントの中身が全て横幅一杯に広がってますね。
これでは横並びにできません。なぜでしょうか?中身の要素がブロックだからです。
※Progateでブロックうんぬん説明しているレッスンありましたよね?ブロックは横に広がるんです。
じゃぁ、figureとdivにwidth40%とか50%でも当てたら横並びになりますか?ならないですよ。なぜでしょうか?
それはblockだからです。見た目は縮まっても実際には縮まってないからです。それぞれinline-blockに変えましょう。width調整すれば横並びになるはずです。
※ちなみに50%では横並びになりませんよね?なぜでしょう?
それはご自身で確認してくださいね。ヘッダーやフッター作るときに使うことありますので。Lesson3 準備:当たりの付け方
ここまでざっくり組み方を「お勉強」しました。
さて、実際に組んで見ましょう!ここではXDのUIキットを使ってます。
下記よりダウンロードしてください。
https://xdresources.co/resources/responsive-resize-kitまず大まかに捉えましょう!
ヘッダー、メイン、フッターですねぇ。
※今回はヘッダーの中に、ヒーローを入れますが階層意識をつけてもらうためにわざとです。さて、コンポーネントレイヤーを探しましょうか!
①ヒーロー(topの目立つ画像周辺)には、テキストやボタンが並んでますね。
div.Hero
p.txt1
p.txt2
button②ヒーロの右横にもコンポーネントレイヤー発見!
今回はテキストを括るだけですねぇ。括るってなれば、まず私はラッパーと名付けます!
div.Hero-Txt-Wrapper
p.txt1
p.txt2ヒーロー周辺にあるので、Hero-Txt-Wrapperとしました。
③メインにカードが並んでますねぇ・・・カードはコンポーネントレイヤーになる!
div.Card
p.txt1
p.txt2④ん?カードを括るレイヤーもほしいな。。そして並んでるから、listだ!
ul.Card-List
li.Card-List_item
p.txt1
p.txt2
li.Card-List_item
p.txt1
p.txt2もしくは
ul.Card-List
li.Card
p.txt1
p.txt2という感じでまずHTMLを組むのです
ある程度組んでから、コンポーネントとその中身毎にCSSを当てていきます。
一気にカードを並べたり・・・なんて考えると難しいです。並べるに当たってfloatでもinlineでもflexでもなんでも良いですが、
まずカードをしっかり作った方がうまくいきます。ラッパー(上)から当てると、ガチガチ固まりすぎて流用きかず、
よくわからないCSSの出来上がりです。理解しやすいコンポーネントレベルについて組み上げると、 CSSが綺麗なることと無駄なレイヤーがなくなります。
デザインに合わせた必要最少レベルのレイヤー出かけるようになります。余談:コンポーネントの中身
「コンポーネントもラッパーなんじゃない?」ってお気付きの方もいるでしょう。
そうです。
そして、コンポーネントの中身がアトミックです。
さらにいうと、アトミックの中身がエレメンタリーパーティクルです。ここら辺の話はCSS設計レベルになるので、また今後書きます。
最終的にはAtomicDesign・FLOCCSS・BEMを融合したCSS設計
これを順序立てては書き上げる予定です。次回はBEMです。
BEMのブロックネスト・・・お困りでしょうだから次はBEMのブロックネスト対応パターンと
それぞれパターンの選択基準について書きます。
- 投稿日:2020-01-18T05:02:07+09:00
【HTML】【CSS】Font Awesome
Font Awesome
アイコンが使用できる
アイコンを文字として扱うことができるためCSSが使えるよくあるTwitterの
とか
Facebookの
とかのアイコン。これ2つとも Font Awesome というアイコンばかりあるサイトから作成しました
使い方
いろいろ使い方はあるようですが、ダウンロードして使う方法をまとめます。
Font Awesome にアクセスしてCSSファイルを読み込む。
Font Awesome のトップ画面にアクセスする。
アクセスすると選択画面のようなものがでてきますが
無料で使いますか?それとも有料で使いますか?
ということです。
ひとまず無料を選びましょう
少し画面を下に移動させると下記のような画面になります。
ダウンロードボタンをクリックします。
ボタンを押すとダウンロードされるので任意の場所に保存します。
保存したら HTML の head 部分に以下のように記載します。例.html<head> <link rel="stylesheet" href="保存した場所のパス/fontawesome-free-5.12.0-web/css/all.css"> </head>個人PC名と個人フォルダ名が記載されているため少しふせますが、
私の場合は以下のようになります。例.html<head> <link rel="stylesheet" href="file:///Users/個人PC名/Desktop/個人フォルダ名/fontawesome-free-5.12.0-web/css/all.css"> </head>これで Font Awesome の CSSファイルを読み込む用意ができました
使用するアイコンのクラス名を指定してWebに反映させる
Font Awesome のトップ画面にアクセスする。
トップ画面の上側に Icons をクリック。
いろんな種類のアイコンが表示されていますが検索窓で検索したほうが早いので検索窓で検索します。
今回は Twitter と検索します。
日本語では検索できないので必ず英語で検索してください。
Twitter と検索すると以下の10個のアイコンが表示されました
色が濃いアイコンと薄いアイコンがあるかと思いますが濃いアイコン → 無料
薄いアイコン → 有料の違いです
なので薄いアイコンを使いたいなと思ったらお金飛んでいきます今回は赤枠で囲んだアイコンを使用したいので赤枠のアイコンをクリックします。
アイコンボタンをクリックすると今度は大きなアイコンがあらわれるかと思います。
大きいアイコンの上にコードが書かれていると思います。
そのコードをクリックするとコードがコピーできるのでクリックします。
コピーしたら HTML にペーストするのですが
今度は head 部分に記入するのではなくて
body 部分に記入します。head 部分はWeb上に表示されませんが
body 部分はWeb上に表示されます。
アイコンはWeb上に表示させたいため body 部分に記入します。例.html<body> <i class="fab fa-twitter-square"></i> </body>で、ちゃんと読みこんで表示されてるかなぁとWebを確認してみると・・・
ちっちゃ!
これではなんなのかわかんない
どうするのかといえば・・・最初に書いたようにアイコンを文字として扱える。
つまりCSSが使える
CSSで大きくして、色も塗っちゃえ例.css.fa-twitter-square { color: #00a1f2; font-size: 100px; }できた
注意事項
HTMLではクラス名を fab fa-twitter-square としていましたが
CSSでは fab を省いた fa-twitter-square としています。
fab fa-twitter-square と全部入力しちゃうとCSS反映しません
なぜなら fab というクラス名と fa-twitter-square のクラス名が2つあるからです。なので
例.css.fa-twitter-square { color: #00a1f2; font-size: 100px; }とするか
例.css.fab { color: #00a1f2; font-size: 100px; }にする必要があります。
今回Twitterしかなかったのでどちらのクラス名でもいいのですが
もし下記のように複数ある場合例.html<i class="fab fa-twitter-square"></i> <i class="fab fa-facebook-square"></i>クラス名を fab で指定すると
例.css.fab { font-size: 100px; color: #00a1f2; }TwitterもFacebookも同じ色になっちゃいました
ではCSSをこのように記入するとどうでしょうか。
fab クラスで大きさを揃えて
カラーだけそれぞれ違う色にします。例.css.fab { font-size: 100px; } .fa-twitter-square { color: #00a1f2; } .fa-facebook-square { color: #3578E5; }ちゃんと反映されました
おまけ
さきほどは Font Awesome のクラス名をそのままコピペしましたが、
例.html<span class="fab fa-twitter-square"></span>span でも
例.html<div class="fab fa-twitter-square"></div>div でも使用できます
- 投稿日:2020-01-18T02:14:52+09:00
Tachyons メモ
この記事を書いてる時点でstar数は9500あるわりに、使われているものを見たことがないCSSのフレームワーク。あまり使い込んだわけじゃないけど、basscss みたいな印象で、めっちゃたくさんヘルパーがある感じ
別に万人にすすめられる感じでもないけど、細かい部分のデザインがわりとページによってコロコロ変わる統一性のないサイト(担当者の気分で変わったり、そもそも担当者がページによって違うサイト)にはこういったフレームワークが重宝するので、個人的にこういった思想のフレームワークは嫌いじゃないのですが、このフレームワークの命名がかなり極端にというか基本1文字に省略しているのでそこを毛嫌いする人も多そう
<a class="link dim dib mr3" href="#" title="Home">Home</a>これを見て使いやすそうと思う人はなかなかいない気がして、すべてTachyonsのclassを使うってわけじゃなく、あくまでヘルパー的な使い方をするのが幸せになれる気がする
それとTachyonsはドキュメントをみるよりも直接github上のCSSのをみたほうがわかりやすいことが多いので、困ったらgithubでクラス名検索するのがいいと思う。上の例でわかりにくいのは
.dim
とかだと思うので、調べてみると意味がわかるはず以下は全部を書いているわけじゃなくてこういうのもある、という参考程度の一部を書いただけのものです
Responsive
何故か公式のドキュメントに詳しく解説されているページがない気がする
基本的にモバイルファーストで、デフォルトの設定であれば、接尾辞として
-m
のように書く
条件 略 意味 30em 以上 ns not-small 30em 以上 60em 以下 m medium 60em 以上 l large 次の項目のmargin, padding を例にすると
ma1 ma3-m ma7-l
のようにかくと画面サイズが大きくなるにつれてマージンが大きくなる特徴的なのが
ns
で、スマホじゃない程度のデバイスの広さがあるときにデザインを変えてるときに便利なのかもしれないmargin, padding (基本的な省略パターン)
略 意味 m margin p padding a all h horizontal v vertical marginをすべてにstep1の大きさでつけたければ
ma1
と書くdisplay (一部例外パターン)
.dn { display: none; } .di { display: inline; } .db { display: block; } .dib { display: inline-block; } .dit { display: inline-table; } .dt { display: table; } .dtc { display: table-cell; } .dt-row { display: table-row; } .dt-row-group { display: table-row-group; } .dt-column { display: table-column; } .dt-column-group { display: table-column-group; }cellとcolumnがかぶるので使わないほうを省略しないで書いて、対になりそうなものも合わせてフルスペルにした、とかだろうか
letter-spacing (一部例外的な省略パターン)
ls
ではなく.tracked { letter-spacing: .1em; } .tracked-tight { letter-spacing: -.05em; } .tracked-mega { letter-spacing: .25em; }こうなる
感想
省略に一貫性を感じることがないのでかなり辛い。これを導入する気にはちょっとなれなかった。ヘルパーならbasscssのほうが妙な省略とかはないので使いやすいと思う
- 投稿日:2020-01-18T00:27:07+09:00
Built-in CSSがサポートされました[Next.js 9.2更新情報]
はじめに
React
でSSR(Server Side Rendering)が可能なフレームワークであるNext.js
。久しぶりに見てみると2020年1月15日にバージョン9.2を公開しており、個人的に嬉しい機能が追加されたということで紹介していきたいと思います。この記事は公式ブログで紹介されている内容をまとめる形になるので、詳しい内容は公式ブログで確認してください。
新(?)機能まとめ
- Built-in CSS Support for Global Stylesheets
- Built-in CSS Module Support for Component-Level Styles
CSS
を別ファイルからグローバルやコンポーネント単位のモジュールとしてのインポートが簡単になりました。
- Code-Splittingの改善
ビルド時のコード分割を改善することにより、アプリケーションのサイズがかなり小さくなりました。
- 動的パスを全て取得
例えば
/post/a/b/
とパスが動的パスであるとき、/pages/post/[...slug].js
と[...name]
シンタックスを使用することで、queryとして{ slug: ["a", "b"] }
を得ることができ動的パスをまとめて取得することが可能になりました。本記事では最初の
Built-in CSS
について少し話して終わります。Built-in CSSのサポート
今まで別ファイルのCSSを使用するには、以下のような手順が必要でした。
@zeit/next-css
のインストール。next.config.js
を作成し、設定を記述。2手間ではありますが、毎回設定するのであればさすがに面倒だと思います。さらに、この
next-css
にはある束縛がありました。それはグローバルかローカルかどちらかしか選択ができない。
ということです。これらの問題を解決したのが今回のアップデートになります。
グローバルとローカルの区別は以下のようになります。
- グローバル ...
[name].css
- ローカル ...
[name].module.css
それでは、例を挙げていきます。
例: グローバル
public/style.css
を作成します。public/style.cssbody { padding: 20px 20px 60px; margin: 0; } h1{ color: red; }アプリケーション全体で適用したいので、
_app.jsx
でこのファイルを読み込みます。pages/_app.jsximport '../public/style.css' export default function MyApp({ Component, pageProps }) { return <Component {...pageProps} /> }そして、ホーム画面を用意します。
pages/index.jsxexport default () => { return ( <> <h1>HOME</h1> </> ) };すると...
ちゃんと赤色になってますね。要素を見てみると...
グローバルになってそうですね。例: ローカル
pages/home.module.css
を作成します。pages/home.module.css.underline{ border-bottom: 2px dotted black; }そして、
pages/index.jsx
を以下のように修正します。pages/index.jsximport styles from "./home.module.css" export default () => { return ( <> <h1>HOME</h1> <h1 className={styles.underline}>Welcome to Next.js 9.2!</h1> </> ) };そうすると、しっかりアンダーラインが引かれて、またモジュールとして呼び出せていることがわかります。
おわりに
今回は
Next.js
のバージョンアップに伴った更新点を紹介しました。
本記事ではBuilt-in CSS
のみ紹介しましたが、他の機能も本格的なアプリケーションを作る際に助かるような内容になっています。ぜひ公式のブログにアップデートの内容が詳しく書かれているので読んでみてください。参考