- 投稿日：2020-09-28T21:54:03+09:00
【初心者でもわかる】簡単！ラベルデザインの作り方
どうも7noteです。画像に「SALE」とか「カテゴリー」などのラベルを付ける方法を解説。
まずは見本をどうぞ。
このように画像やブロック要素に目立たせる用のラベルデザインをCSSで付けていきます。
運用・使い方のイメージは、特定のクラス名が付いたものだけラベルが付くようにします！作り方
index.html<div class="box sale"> <img src="sample.png" alt="画像名"> </div>style.css.box { width: 160px; /* 表示する横幅 */ height: 160px; /* 表示する高さ */ position: relative;/* 基準の位置とする */ } .box img { width: 100%; /* boxの幅いっぱいに画像を表示 */ } .sale::before { content: ""; /* こっちは空 */ width: 0; /* 三角形を作るため0 */ height: 0; /* 三角形を作るため0 */ position: absolute; /* 位置を絶対指定 */ top: 0; /* 上から0pxの位置 */ left: 0; /* 左から0pxの位置 */ border: solid 20px #f00; /* 赤色のborderを↓ */ border-right-color: transparent; /* 左上付けの↓ */ border-bottom-color: transparent;/* 三角形に見せる */ } .sale::after { content: "sale"; /* 文字を入れる。画像も可 */ color: #FFF; /* 文字色を白にする */ font-size: 14px; /* 文字サイズを決める */ font-weight: bold; /* 文字を太文字にする */ position: absolute;/* 位置を絶対指定 */ top: 2px; /* 入れる文字や位置によって微調整してください */ left: 2px; /* 入れる文字や位置によって微調整してください */ transform: rotate(-45deg); /* 斜めに文字を回転 */ }
解説
疑似要素を使い、三角形の部分と文字の部分を分けて重ねて表現しています。
::beforeには、borderで三角形を作り、左上寄せに配置します。
そして::afterには入れたい文字をcontentに入れ、今回はtransform: rotate(-45deg)を使って、文字を斜めにしました。まとめ
beforeとafterにあえて分けたことで、カスタマイズしやすい作り方かなと思います。
いろいろ自由に変えて使ってもらえればうれしいです。おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ
- 投稿日：2020-09-28T20:47:40+09:00
Tyハロトレ29日目
卒業制作
今後の流れ
1/4 スタート
2/9 発表
2/12 最後の授業比較的自由ですが、リアルなサイト（知り合いのサイト）
10/12 「良い所あるかな」と、ここから調べておかないと、11月、年末に間に合いません。
11/12 年末企業が動かないため、11月から就職活動スタートした方が良いです。
12/12
1/12定点観測
すぐ辞めるところは、ずっと求人出してる
良い会社は、授業の最後の日まで待ってくれます。11月までにポートフォリオ
ポートフォリオは、できるところまで見せればよいです。
ポートフォリオは完璧なんてない。
常に新しいことを学んでいるので、日々追加されていきますので、いつまでたっても面接できません。作りたいサイト
一般企業向け
突き抜けたデザイン
女性向けデザインお客様はあれっぽいの作っといてよ、となるので、幅広いものをできるようにした方が良いです。
作りたいバナー
食品系
旅行・ギフトの季節もの 年末贈答品、?のグッズ欲しい人材
プランとプレゼンができる人が欲しいです。
Webサイトの設計で、ちゃんと話が分かって、自分の意見が言える、そういう人材です。CSS
float: right;
clear: both;
後続要素がない場合でも、フロートを解除したい場合
clearfixを使って、後続要素がなくてもフロートを解除させます。
form
input
<input type="text" name="データ名">
textarea
設定した表示文字数より文字が多かったら、広がります。
select
type="radio"
type="checkbox"
illustrator
選択範囲
記号 選択範囲なし 選択範囲あり Shift 正方形、正円 範囲の追加 Alt 中央から 範囲の削除 Shift+Alt 中央から+正方形、正円 交差したところ ショートカット
記号 説明 Ctrl+Hキー 選択範囲の非表示 Ctrl+Dキー 選択範囲の解除 Ctrl+スペースキー ズーム 手のひらツールをダブルクリック 全体表示 長方形選択ツールでドラッグしてる最中にスペース 移動できる お目目を作る
楕円形ツール
多角形ツール
選択範囲＞選択範囲を変更＞境界をぼかす
イメージ＞色調補正＞色相・彩度
イメージ＞色調補正＞明るさ・コントラスト
イメージ＞色調補正＞トーンカーブ
ホクロを取り除く方法
下の口が入らないように、ギリギリの選択範囲のホクロを選ぶのではなく、肌色が入るように選ぶと良いです。
白黒写真に色を付ける方法
イメージ＞モード＞RGBカラー で着色できるようにする
指を避けて、ビンだけ色を変える方法
イメージ＞色調補正＞カラーバランス
- 投稿日：2020-09-28T19:46:10+09:00
意外と知られていない便利な擬似クラス10選
2020年９月現在、60個もの擬似クラスがあります。
その中でも、そこまで知名度は高くないけど実は便利な擬似クラスを
「汎用的に使える擬似クラス」と「フォームで使える擬似クラス」に分けてご紹介します！そもそも擬似クラスとは
CSSの擬似クラス(Pseudo-classes)は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。例えば :hover 擬似クラスで、ユーザーのポインターが当たったときにボタンの色を変更することができます。
つまり、特定の状態に対してスタイルを当てられるセレクタのことを、擬似クラスといいます。
[補足]擬似クラスと擬似要素の違い
擬似クラス
- 指定した要素全体を変更するもの
- シングルコロン(
:)で指定擬似要素
- 指定した要素の一部を変更するもの
- ダブルコロン(
::)で指定汎用的に使える擬似クラス
1. :root
DOMツリー上の最上位の親ルートの要素(HTMLでは
<html>)を選択する擬似クラスです。
基本的には、CSS変数を定義する場として使います。:root { --primary-color: #55c500; --container-padding: 20px 15px; }2. :not()
一致しない要素を選択する擬似クラスです。
リストの最後の要素のみmargin-bottomやborderを付与しない時によく使います。.example-list li:not(:last-child) { margin-bottom: 20px; }3. :target
ターゲットとなるアンカーリンク先の要素を指定する擬似クラスです。
コンテンツを強調したり、表示切り換えをしたりする時に使います。<a href="#modalItem1">モーダルを表示</a> <div class="modal-item" id="modalItem1"> モーダル </div>.modal-item { display: none; } .modal-item:target { display: block }1〜３を用いたサンプルコード
フォームで使える擬似クラス
4. :focus-within
子孫要素に1つでも
:focus状態の要素がある時に、状態を変更するための擬似クラスです。
※IEは対応していないため、気をつけてください<form> <input type="text" placeholder="名前"> <input type="number" placeholder="電話番号"> </form>form { border: 2px solid #ddd; } /* 名前 or 電話番号のフォーム入力中(focusされている時)は、背景色が変わる */ form:focus-within { background: #55c500; }5. :in-range
min/max属性によって値が制限されている場合において、
入力された値が制限範囲内の時、要素を変更するための擬似クラスです。
※IEは対応していないため、気をつけてください<p>在庫： 20個</p> <form> <label for="quantity">購入個数：</label> <input id="quantity" name="quantity" type="number" min="1" max="20" value="1"> <p class="message">メッセージ: </p> </form>input:in-range + .message::after { display: inline-block; content: "購入可能です"; }6. :out-of-range
min/max属性によって値が制限されている場合において、
入力された値が制限範囲外の時、要素を変更するための擬似クラスです。
※IEは対応していないため、気をつけてください<p>在庫： 20個</p> <form> <label for="quantity">購入個数：</label> <input id="quantity" name="quantity" type="number" min="1" max="20" value="1"> <p class="message">メッセージ: </p> </form>input:out-of-range + .message::after { display: inline-block; content: "在庫がありません"; }7. :valid
入力された値の形式が正しい時に、要素を変更するための擬似クラスです。
※IE9は対応していないため、気をつけてください<form> <label for="phone">電話番号：</label> <input type="tel" id="phone" name="phone" pattern="^(0{1}\d{9,10})$"> <p class="message">メッセージ: </p> </form>input:valid + .message::after { display: inline-block; content: "ok"; }8. :invalid
入力された値の形式が不適切な時に、要素を変更するための擬似クラスです。
※IE9は対応していないため、気をつけてください<form> <label for="phone">電話番号：</label> <input type="tel" id="phone" name="phone" pattern="^(0{1}\d{9,10})$"> <p class="message">メッセージ: </p> </form>input:invalid + .message::after { display: inline-block; content: "値が不適切です"; }9. :required
required属性が設定されている要素を変更するための擬似クラスです。
<form> <label for="name">名前：</label> <input type="text" id="name" name="name" required> </form>input:required { background-color: red; }10. :optional
required属性が設定されていない要素を変更するための擬似クラスです。
<form> <label for="address">住所：</label> <input type="text" id="address" name="address"> </form>input:optional { background-color: #eee; }4〜10を用いたサンプルコード
- 投稿日：2020-09-28T18:20:40+09:00
[CSS設計]わたしはクラス名でもう悩まない[BEMベース]
クラス名で悩み、時間を無駄にしないための記事
命名規則はBEMベースなので、Block / Element / Modifier にわけてます。命名のルール
誰が見てもわかる名前をつけること
絶対に省略しない。ただしfaqのように一般的にも浸透してる言葉なら良し
同じコンポーネント内で、
blockとElementに同じ命名をしない。.button__buttonや.input__inputはNG意味は違うけどパッと見であまりにも似てる単語はなるべく使わない。「container」と「content」、「date」と「data」など。
-で「〜〜の」を表す。「search-bar」で「検索のバー」、「tags-group」で「タグたちの集まり」というように単体では意味が伝わらないため、補助的な言葉（「sub」などの「~~の」に使われる言葉）だけ使わない。
タグの名前をクラス名にしないで必ず意味をもたせる。（
.text__br、.heading__spanなどNG）
Block画面全体からみた大きなブロック
※
Elementには絶対に使わない
クラス名 補足 wrapper ラッパー メインとヘッダーフッターを囲うとき header ヘッダー main メイン 全体の上下の余白はなるべくここできめる container コンテナ SP時の左右の余白、コンテンツ全体の中央寄せのためのブロック footer フッター side サイド サイドバーに nav ナビ ページのナビに 小さなパーツが集まってできる中ブロック
※
Elementには使わない
クラス名 補足 / 例 view ビュー 主にfirst-view,second-viewとして使う imposter インポスター 子要素が中央に配置されたコンテナ。コンテナは画面いっぱい（100vh or 100vw）に広がる。 section セクション 区分・区画 card カード 画像+タイトル+テキストのような構成でカードのような見た目。複数並ぶ group グループ 〇〇-group のように使う。同じパーツが集まってる部分などに。tags-group holder ホルダー 〇〇-holder のように使う。別々のパーツが集まった一つのくくりとして。input-holder bar バー 〇〇-bar のように使う。横並びで一列のまとまり panel パネル cardとはまた違う体裁で画像単体、テキスト単体、panel自体リンクであることが多い。複数並ぶ list リスト 〇〇-list のように使う table テーブル 表。 小さなパーツ単位のブロック
※
Elementにもなりえるクラス。ただし、p-button__buttonやp-input__inputにはしないこと。
クラス名 補足 heading ヘディング 区画ごとのタイトル button ボタン link リンク ボタンのような装飾のない、リンク要素 input インプット 入力ボックス select セレクト セレクトボックス checkbox チェックボックス チェックボックス+テキスト radio ラジオ ラジオボタン+テキスト icon ラベル インプットのラベル tag タグ row ロウ 横に並べたいとき col コル 横に並べた子要素
Element※小さなパーツとして、
Blockにもなりうる
クラス名 補足 inner インナー 親要素のすぐ下で囲む必要があるとき head ヘッド 上部 body ボディ 主要部分 foot フット 下部 title タイトル 題名（見出しとして一つだけ） heading ヘディング 見出し（いくつも見出しがあるとき） text テキスト date 日付 time 時間 datetime 日付+時間 unit ユニット 単位 item アイテム list内のみに使用 label ラベル tag タグ window ウインドウ 窓。input内の入力窓などに avatar アバター ユーザープロフィールの写真などの部分 image イメージ 画像 thumbnail サムネイル number ナンバー
modifier状態
クラス名 補足 active アクティブ success サクセス 成功 error エラー 入力ボックス warning ワーニング 警告 サイズ
クラス名 x-small スモール small スモール medium ミディアム large ラージ x-large ラージ 形状
クラス名 補足 reverse リバース 反転 round ラウンド 角丸 circle サークル 円形、正丸 right ライト 右寄せ left レフト 左寄せ center センター 真ん中
〜〜のなどでつかう言葉主に
Block、Elementと組み合わせて、〇〇-{Block}のように使う。補助的な言葉
クラス名 補足 first ファースト 最初の second セカンド 二番目の next ネクスト 次の prev 前の global グローバル 全体の sub サブ さぶ ページ名や内容、パーツ
クラス名 補足 about アバウト わたしたちについて work ワーク 仕事 service サービス サービス・提供 news ニュース お知らせ product プロダクト 製品 history ヒストリー 歴史 concept コンセプト コンセプト recommend おすすめ index インデックス 目次 contact コンタクト お問い合わせ access アクセス 行き方 shop ショップ 店舗 privacy グローバル 全体の faq エフエーキュー Q&A confirm 確認 finish フィニッシュ 完了 search サーチ 検索 result リサルト 結果
- 投稿日：2020-09-28T16:44:33+09:00
【改訂】Gatsbyでページごとに個別にCSSを読み込む方法
はじめに
HTML, JavaScript, CSSで構築された既存のサイトを、Gatsbyで再構築しています。
以前、Gatsbyでページごとに個別にCSSを読み込む方法という記事を書きました。
しかし、その後作業を進めていくうちに、こちらの方法では問題を解決できないことがわかりました。
今回は改めて対策方法を検討したので、共有します。前回の内容
前回はこのような方法でページごとに個別にCSSを読み込むことができると言いました。
import React from "react" export default () => ( require("style.css") )しかし、この内容でNetlifyにアップロードしたところ、うまくいきませんでした。
個別ページで読み込んだハズのCSSが、全てのページで読み込まれてしまい、上書きされてしまうという現象が再発してしまいました。Gatsby Develop と Gatsby Serve の違い
原因を調べると、上記の方法は
gatsby developではうまく動作するものの、
gatsby serveしたものではうまく動作していませんでした。
Netlifyにアップロードされるのはgatsby serveの方です。新・ページごとに個別にCSSを読み込む方法
とういうことで、
gatsby serveでもうまくいく方法を紹介します。
- 既存のCSSの拡張子
.cssを.scssに変更する- ファイルを開き、先頭と末尾を
html.hoge{}で囲むhoge.css#header{ background-color:red; }hoge.scsshtml.hoge{ #header{ background-color:red; } }3.読み込みたいページ（例：hoge.js）で
importするhoge.jsimport React from "react" import "../css/home.scss" export default () => { return( //ページの処理 <header id="header">ヘッダー</header> ) }4.「Helmet」を使ってhtmlタグに
hogeというクラス名を付けるhoge.jsimport React from "react" import { Helmet } from "react-helmet" import "../css/home.scss" export default () => { return( <div> <Helmet> <html className="hoge" lang="jp" /> </Helmet> //ページの処理 <header id="header">ヘッダー</header> </div> ) }以上です。
Helmetの使い方は「Gatsby Helmet」などで調べてみてください。おわりに
今回のやり方はかなり邪道な方法です。
お気づきかもしれませんが、このやり方はページ毎に個別に読み込んではおらず、
結局全てのCSSを読み込んでしまっています。
単純に、SCSSのネストでセレクタを指定することで、ページごとに適応するものを変えているだけです。
Gatsbyが提唱するサイトの高速化の手法をあえて無視するようなやり方です。今回はとりあえず、一般的な HTML, CSS, JavaScript で組まれたWEBサイトを
あまり手を加えずにGatsbyにコンバートすることを試してみました。
ですが、その作業がこんなにも大変だとは思いませんでした。WordPressみたいに、最初は静的ファイルでテストページを作成して、その後CMS化する
という手法はあまり馴染まないのかもしれないですね。ある程度初期の段階から、Gatsbyで組み上げていったほうが早いかもしれません。
次回は、GatsbyでjQueryを使う方法（邪道）を書きたいと思います。
- 投稿日：2020-09-28T15:32:10+09:00
【前編】MENTA使ってメンターと開発なう
こんにちは！
備忘録として題名の経過を書き綴ります！
まず初めに、7月終わりから無料のPHPスクールに約1ヶ月通い、生のPHPを勉強しました。
勉強内容は以下です。
＊)学校では渡されたソースコードに基づいて、1行づつ処理内容をアウトプットする。
＊)自習では渡されたソースコードを3〜4回模写する。
書いてみると余裕に見えますが、内容が濃ゆく、あっという間の1ヶ月でした。卒業後は成果物作成のために、書籍を購入し復習をして成果物を作成するつもりが
コードを1行も書けず迷走。（1ヶ月間）
因みに、購入した書籍は以下です。ーーーーーーーーーーーーーーー
1)PHPフレームワーク Laravel入門（開発環境で挫折）
2)パーフェクトPHP（7章で挫折）
3)よくわかるPHPの教科書（3周）
4)PHP直す力養成ドリル（3周）
5)PHP Todoリストを作ろう（3周）
6)PHP 連想配列集中特訓（3周）
7)PHP 入門確認画面付きのお問い合わせフォーム..作ろう！（3周）よく聞くダメダメ駆け出しエンジニアのサイクルにハマってますよね?
ーーーーーーーーーーーーーーーもう二進も三進もいかず、藁をもすがる思いでMENTAに登録＆募集をかけました！！
運が良く、PHPでゴリゴリ開発している方がメンターになって頂け、ECサイトを開発をしている最中でございます。
（2020/09/17〜）
Mさん曰く、開発の8段階に分かれるとのこと（初学者の自分に向けて）ーーーーーーーーーーーーーーー
1)画面デザイン(ワイヤーフレーム) （8〜10h）
2)画面デザインからhtmlコーディング （15h〜20h）
3)ワイヤーフレームからモデリング(情報設計)とDB設計 ←Now
4)URL設計
5)htmlをlaravelに組み込み
6)DBへ永続化するなど、処理をlaravel内に作成
7)テスト
8)デプロイ
ーーーーーーーーーーーーーーー以下からは、1〜8まで（途中までですが）自分が行った作業について書い綴っていきます！
ーーーーーーーーーーーーーーーー
1)画面デザイン（ワイヤーフレーム）[使用サービス]
-Figma[参考URL]
＜＜Figmaの使い方、全力でまとめました。＞＞
-https://note.com/99997373/n/n77573dfb8797＜＜5-1. プロトタイプを作成する＞＞
-https://chot.design/figma-beginner/9039108315c1/＜＜Figmaのframeとgroupの違い＞＞
-https://t.co/HQxXwzlZok?amp=1[感想]
初めて触るツールだったので、使いづらさはありましたが
雛形のデザインさえ決めてしまえば、サクサクっと作業を終えることができました！
実際の現場の仕組みを体系的に学べる点は、すごく良いと感じました。[完成図]
2)HTMLコーディング
[作成にあたり参考にした記事]＜＜border-collespeが効かない＞＞
-http://blog.higty.xyz/archives/501/
-https://qiita.com/hideo9080/items/4aa028b6533174d46719＜＜表（table）の作り方と装飾の変え方＞＞
-https://saruwakakun.com/html-css/basic/table＜＜formタグを改行せずに横に並べる方法＞＞
-https://hacknote.jp/archives/5218/＜＜すぐわかる！HTMLでスペースや空白を入れる正しい方法＞＞
-https://webliker.info/03847/[感想]
以前デイトラのWeb製作編を中級まで熟していたこともあり、
忘れていたことはありましたが、思ったよりはサクサク進すみました。
最低限に次の工程に行けるよにを意識して作業をしました。
jQueryの実装は、時間があるときに。[完成図]
以上！
これからモデリングをしていきます！
- 投稿日：2020-09-28T15:24:28+09:00
rgba 指定した背景を inherit するのはやめとけ (または Figma/XD では透過度で色を決めない)
タイトルのままです。
どういうケースか
一番わかりやすいスニペットをおいておくとこんな感じです。
意図してこういうスタイル指定になることは稀だと思いますが、フロントエンドフレームワークを利用していると意図せずこのようなスタイルがあたっている可能性があります。<html> <body> <div id="main" style="background-color: #fff;"> <div id="color" style="background-color: rgba(0, 0, 0, 0.2)"> <span style="background-color: inherit;">aaa</span> </div> </div> </body> </html>何が起こるか
こうなります。
更に、
mainの色を変えると更に事件が起きます。例えば色を#a00にしてみます。
くすんだ赤になりました。
意図したものであれば問題ないですが、意図せずグレーの要素が消えることになります。何故か
colorの半透明なグレーをspanが継承した結果、色が乗算され、結果的にspanの色が濃くなってしまいます。
更にmainを赤くしたことで、赤の上に半透明のグレーがかかるため、色がくすみます。考えてみれば当然で、背景を透かして見るためにアルファチャンネルは存在しています。こうならないようにするために
アルファチャンネルの色を継承しない
イテレータで生成したような連続する要素に対して個別のスタイルが当てられるようなシステムで、意図せず透過色を利用しており、その上にボタンの真ん中に文字をセンタリングする目的で更に別なタグがあるような場合で、背景色を継承しないとスタイルがおかしくなるようなCSS設計を行っているページで起こるかもしれません。
何度も言いますが、意図したものであれば気にする必要はありません。問題は意図しないケースです。
XD / Figma で opacity が指定されている色はそのまま使う前に確認する
最近はXDやFigmaが登場したため、デザイナーとフロントエンドエンジニアの分業が進んでいます。結果、デザイナーは「デザイナーに色を伝えなくても勝手にコピーして使ってくれるだろう」と思い、エンジニアは「デザイナーが指定した色に意味があるんだろう」と思ってもよいと考えてしまうフシがでてきます。
デザイナーは見た目上の色が出ていればよいと考え、エンジニアはただ指定された色をそのまま使うというような実装を行っていると、本当にこの画面のデザインでやりたかったことが置いてけぼりになり、結果的におかしなスタイルがあたってしまうということが起きます。
デザイナーとエンジニアが分業しているようなプロジェクトでは、見た目のチェックをデザイナーにも依頼するのがよいでしょう。
まとめ
デザイナー一同に置かれましては、エンジニアと共同でXD / Figmaを見る環境で仕事をしているのであれば、極力アルファチャンネルで色を合わせるのはお控えいただけますと、エンジニアが非常に楽になるので、協力していただけると幸いです?♂️また、ページの新設や修正の際は、レビューにも付き合ってもらえると嬉しいです。
