前提読者

タイトルの通り

ひとつの可能性

vertical-alignを設定しているセレクタの
line-heightとfont-sizeをheightより小さくする。
複数行文字を表示している人には関係ない話
終わり

どうも7noteです。本日作る料理はハンバーガーです。

まずは一般的なハンバーガーメニューの作り方から。

一般的なハンバーガーメニューの作り方

index.html

<divclass="menu"><inputtype="checkbox"id="check"class="hidden"><labelfor="check"class="open"><span></span></label></div>

style.css

.hidden{display:none;}.open{width:25px;height:25px;display:block;position:relative;cursor:pointer;}.openspan,.openspan:before,.openspan:after{content:'';display:block;height:3px;width:25px;border-radius:3px;background:#333;transition:0.5s;position:absolute;}.openspan:before{bottom:8px;}.openspan:after{top:8px;}#check:checked~.openspan{background:rgba(255,255,255,0);}#check:checked~.openspan::before{bottom:0;transform:rotate(45deg);}#check:checked~.openspan::after{top:0;transform:rotate(-45deg);}

今回のメインはハンバーガー作りなので解説は省略します。

本物のハンバーガーメニュー

index.html

<divclass="drawer"><inputtype="checkbox"id="check"class="hidden"><labelfor="check"class="open"><spanclass="ue"></span><spanclass="retas"></span><spanclass="tomato"></span><spanclass="meat"></span><spanclass="retas"></span><spanclass="shita"></span></label></div>

style.css

.hidden{display:none;}.open{width:25px;display:block;margin:20px;position:relative;cursor:pointer;}.openspan{content:'';display:block;width:25px;background:#333;transition:0.5s;}.open.ue{background:#E4AE54;border-radius:10px10px00;height:5px;}.open.retas{background:#98E357;height:2px;}.open.tomato{background:#E34F50;height:2px;}.open.meat{background:#975637;height:2px;}.open.shita{background:#E4AE54;border-radius:002px2px;height:3px;}#check:checked~.openspan:not(.meat):not(.tomato){background:rgba(255,255,255,0);}#check:checked~.open.tomato{position:absolute;bottom:5px;transform:rotate(45deg);background:#333;}#check:checked~.open.meat{position:absolute;top:5px;transform:rotate(-45deg);background:#333;}

おそまつ！

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

参考・アイデア元

・CSSだけで作るハンバーガメニュー
https://yuntu-tek.com/hamburger-menu/
・ロッテリア
https://www.lotteria.jp/sp/menu/category.php?c=burger

検証する説

今回お持ちした説は、こちらです。

※ devroomさんを使わせていただきました。

どのような仕組みか

<input type="checkbox">のid属性と、<label>のfor属性で関連づけさせることができる。
- <label>をクリックすると、チェックの切り換えが可能になる。
チェックボックスがチェックされている時、チェックボックスの状態がcheckedになるため、疑似クラスセレクター:checkedが使える。
要素の後ろにある同じ階層のセレクタの指定(~)を駆使すれば、その状態を他要素に伝えることができ、表示の変更が可能。

これらをフルで使うことによって、on/off切り換え機能を伴うUIはすべてCSSのみで実装が可能であると考えました。

※ 仕組みがわかりやすいように、あえて直タグでスタイルを当てております。良い子は真似しないでください。
※ デザインは仕組みが伝わるレベルです。

1. アコーディオン

アコーディオンがHTML・CSSのみで作れる！という話をよく聞くので、これは確実にいけそうですね！

※ details/summaryを使えばいいやん！と思った方もいるかもですが、あくまで今回は検証のため、checkboxとlabelで実装します。

2. ハンバーガーメニュー

ハンバーガーメニューも、理屈はアコーディオンと同じなので、作れそう！

htmlの構造はビミョーですが、ハンバーガーメニューとしては機能するものができました！

3. モーダル

用件を満たせるかは怪しいけど、無理やり頑張れば行けそう...

labelタグを使いまくることで、モーダルを開くボタンをクリックすると開き、×ボタンもしくはoverlayをクリックすると閉じるモーダルが完成しました。

検証結果

※ こちらもdevroomさんを使わせていただきました。

実装はできますが、コードの可読性の低下や、意味合いを意識したマークアップができないなどの懸念がございます。
止むを得ずjavascriptが使えない場合のみ、参考にしていただけたらなと思います。

タイトルのままです。

どういうケースか

一番わかりやすいスニペットをおいておくとこんな感じです。
意図してこういうスタイル指定になることは稀だと思いますが、フロントエンドフレームワークを利用していると意図せずこのようなスタイルがあたっている可能性があります。

<html><body><divid="main"style="background-color: #fff;"><divid="color"style="background-color: rgba(0, 0, 0, 0.2)"><spanstyle="background-color: inherit;">aaa</span></div></div></body></html>

何が起こるか

こうなります。

更に、 mainの色を変えると更に事件が起きます。例えば色を #a00にしてみます。

くすんだ赤になりました。
意図したものであれば問題ないですが、意図せずグレーの要素が消えることになります。

何故か

colorの半透明なグレーを spanが継承した結果、色が乗算され、結果的に spanの色が濃くなってしまいます。
更に mainを赤くしたことで、赤の上に半透明のグレーがかかるため、色がくすみます。考えてみれば当然で、背景を透かして見るためにアルファチャンネルは存在しています。

こうならないようにするために

アルファチャンネルの色を継承しない

イテレータで生成したような連続する要素に対して個別のスタイルが当てられるようなシステムで、意図せず透過色を利用しており、その上にボタンの真ん中に文字をセンタリングする目的で更に別なタグがあるような場合で、背景色を継承しないとスタイルがおかしくなるようなCSS設計を行っているページで起こるかもしれません。

何度も言いますが、意図したものであれば気にする必要はありません。問題は意図しないケースです。

XD / Figma で opacity が指定されている色はそのまま使う前に確認する

最近はXDやFigmaが登場したため、デザイナーとフロントエンドエンジニアの分業が進んでいます。結果、デザイナーは「デザイナーに色を伝えなくても勝手にコピーして使ってくれるだろう」と思い、エンジニアは「デザイナーが指定した色に意味があるんだろう」と思ってもよいと考えてしまうフシがでてきます。

デザイナーは見た目上の色が出ていればよいと考え、エンジニアはただ指定された色をそのまま使うというような実装を行っていると、本当にこの画面のデザインでやりたかったことが置いてけぼりになり、結果的におかしなスタイルがあたってしまうということが起きます。

デザイナーとエンジニアが分業しているようなプロジェクトでは、見た目のチェックをデザイナーにも依頼するのがよいでしょう。

まとめ

デザイナー一同に置かれましては、エンジニアと共同でXD / Figmaを見る環境で仕事をしているのであれば、極力アルファチャンネルで色を合わせるのはお控えいただけますと、エンジニアが非常に楽になるので、協力していただけると幸いです🙇‍♂️また、ページの新設や修正の際は、レビューにも付き合ってもらえると嬉しいです。

こんにちは！

備忘録として題名の経過を書き綴ります！

まず初めに、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の実装は、時間があるときに。

[完成図]

以上！
これからモデリングをしていきます！

はじめに

HTML, JavaScript, CSSで構築された既存のサイトを、Gatsbyで再構築しています。

以前、Gatsbyでページごとに個別にCSSを読み込む方法という記事を書きました。
しかし、その後作業を進めていくうちに、こちらの方法では問題を解決できないことがわかりました。
今回は改めて対策方法を検討したので、共有します。

前回の内容

前回はこのような方法でページごとに個別にCSSを読み込むことができると言いました。

importReactfrom"react"exportdefault()=>(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.scss

html.hoge{#header{background-color:red;}}

3.読み込みたいページ（例：hoge.js）でimportする

hoge.js

importReactfrom"react"import"../css/home.scss"exportdefault()=>{return(//ページの処理<headerid="header">ヘッダー</header>
)}

4.「Helmet」を使ってhtmlタグにhogeというクラス名を付ける

hoge.js

importReactfrom"react"import{Helmet}from"react-helmet"import"../css/home.scss"exportdefault()=>{return(<div><Helmet><htmlclassName="hoge"lang="jp"/></Helmet>
//ページの処理<headerid="header">ヘッダー</header>
</div>
)}

以上です。
Helmetの使い方は「Gatsby Helmet」などで調べてみてください。

おわりに

今回のやり方はかなり邪道な方法です。
お気づきかもしれませんが、このやり方はページ毎に個別に読み込んではおらず、
結局全てのCSSを読み込んでしまっています。
単純に、SCSSのネストでセレクタを指定することで、ページごとに適応するものを変えているだけです。
Gatsbyが提唱するサイトの高速化の手法をあえて無視するようなやり方です。

今回はとりあえず、一般的な HTML, CSS, JavaScript で組まれたWEBサイトを
あまり手を加えずにGatsbyにコンバートすることを試してみました。
ですが、その作業がこんなにも大変だとは思いませんでした。

WordPressみたいに、最初は静的ファイルでテストページを作成して、その後CMS化する
という手法はあまり馴染まないのかもしれないですね。

ある程度初期の段階から、Gatsbyで組み上げていったほうが早いかもしれません。
次回は、GatsbyでjQueryを使う方法（邪道）を書きたいと思います。

クラス名で悩み、時間を無駄にしないための記事
命名規則は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年９月現在、60個もの擬似クラスがあります。
その中でも、そこまで知名度は高くないけど実は便利な擬似クラスを
「汎用的に使える擬似クラス」と「フォームで使える擬似クラス」に分けてご紹介します！

そもそも擬似クラスとは

CSSの擬似クラス(Pseudo-classes)は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。例えば :hover 擬似クラスで、ユーザーのポインターが当たったときにボタンの色を変更することができます。
引用元：擬似クラス - CSS: カスケーディングスタイルシート | MDN

つまり、特定の状態に対してスタイルを当てられるセレクタのことを、擬似クラスといいます。

[補足]擬似クラスと擬似要素の違い

擬似クラス

指定した要素全体を変更するもの
シングルコロン(:)で指定

擬似要素

指定した要素の一部を変更するもの
ダブルコロン(::)で指定

汎用的に使える擬似クラス

1. :root

DOMツリー上の最上位の親ルートの要素(HTMLでは<html>)を選択する擬似クラスです。
基本的には、CSS変数を定義する場として使います。

:root{--primary-color:#55c500;--container-padding:20px15px;}

2. :not()

一致しない要素を選択する擬似クラスです。
リストの最後の要素のみmargin-bottomやborderを付与しない時によく使います。

.example-listli:not(:last-child){margin-bottom:20px;}

3. :target

ターゲットとなるアンカーリンク先の要素を指定する擬似クラスです。
コンテンツを強調したり、表示切り換えをしたりする時に使います。

<ahref="#modalItem1">モーダルを表示</a><divclass="modal-item"id="modalItem1">モーダル
</div>

.modal-item{display:none;}.modal-item:target{display:block}

1〜３を用いたサンプルコード

フォームで使える擬似クラス

4. :focus-within

子孫要素に1つでも:focus状態の要素がある時に、状態を変更するための擬似クラスです。
※IEは対応していないため、気をつけてください

<form><inputtype="text"placeholder="名前"><inputtype="number"placeholder="電話番号"></form>

form{border:2pxsolid#ddd;}/* 名前 or 電話番号のフォーム入力中(focusされている時)は、背景色が変わる */form:focus-within{background:#55c500;}

5. :in-range

min/max属性によって値が制限されている場合において、
入力された値が制限範囲内の時、要素を変更するための擬似クラスです。
※IEは対応していないため、気をつけてください

<p>在庫： 20個</p><form><labelfor="quantity">購入個数：</label><inputid="quantity"name="quantity"type="number"min="1"max="20"value="1"><pclass="message">メッセージ: </p></form>

input:in-range+.message::after{display:inline-block;content:"購入可能です";}

6. :out-of-range

min/max属性によって値が制限されている場合において、
入力された値が制限範囲外の時、要素を変更するための擬似クラスです。
※IEは対応していないため、気をつけてください

<p>在庫： 20個</p><form><labelfor="quantity">購入個数：</label><inputid="quantity"name="quantity"type="number"min="1"max="20"value="1"><pclass="message">メッセージ: </p></form>

input:out-of-range+.message::after{display:inline-block;content:"在庫がありません";}

7. :valid

入力された値の形式が正しい時に、要素を変更するための擬似クラスです。
※IE9は対応していないため、気をつけてください

<form><labelfor="phone">電話番号：</label><inputtype="tel"id="phone"name="phone"pattern="^(0{1}\d{9,10})$"><pclass="message">メッセージ: </p></form>

input:valid+.message::after{display:inline-block;content:"ok";}

8. :invalid

入力された値の形式が不適切な時に、要素を変更するための擬似クラスです。
※IE9は対応していないため、気をつけてください

<form><labelfor="phone">電話番号：</label><inputtype="tel"id="phone"name="phone"pattern="^(0{1}\d{9,10})$"><pclass="message">メッセージ: </p></form>

input:invalid+.message::after{display:inline-block;content:"値が不適切です";}

9. :required

required属性が設定されている要素を変更するための擬似クラスです。

<form><labelfor="name">名前：</label><inputtype="text"id="name"name="name"required></form>

input:required{background-color:red;}

10. :optional

required属性が設定されていない要素を変更するための擬似クラスです。

<form><labelfor="address">住所：</label><inputtype="text"id="address"name="address"></form>

input:optional{background-color:#eee;}

4〜10を用いたサンプルコード

どうも7noteです。画像に「SALE」とか「カテゴリー」などのラベルを付ける方法を解説。

まずは見本をどうぞ。

このように画像やブロック要素に目立たせる用のラベルデザインをCSSで付けていきます。
運用・使い方のイメージは、特定のクラス名が付いたものだけラベルが付くようにします！

作り方

index.html

<divclass="box sale"><imgsrc="sample.png"alt="画像名"></div>

style.css

.box{width:160px;/* 表示する横幅 */height:160px;/* 表示する高さ */position:relative;/* 基準の位置とする */}.boximg{width:100%;/* boxの幅いっぱいに画像を表示 */}.sale::before{content:"";/* こっちは空 */width:0;/* 三角形を作るため0 */height:0;/* 三角形を作るため0 */position:absolute;/* 位置を絶対指定 */top:0;/* 上から0pxの位置 */left:0;/* 左から0pxの位置 */border:solid20px#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のちょいテク詰め合わせ

卒業制作

今後の流れ

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

<inputtype="text"name="データ名">

textarea

設定した表示文字数より文字が多かったら、広がります。

select

type="radio"

type="checkbox"

illustrator

選択範囲

記号	選択範囲なし	選択範囲あり
Shift	正方形、正円	範囲の追加
Alt	中央から	範囲の削除
Shift+Alt	中央から+正方形、正円	交差したところ

ショートカット

記号	説明
Ctrl+Hキー	選択範囲の非表示
Ctrl+Dキー	選択範囲の解除
Ctrl+スペースキー	ズーム
手のひらツールをダブルクリック	全体表示
長方形選択ツールでドラッグしてる最中にスペース	移動できる

お目目を作る

楕円形ツール

多角形ツール

選択範囲＞選択範囲を変更＞境界をぼかす

イメージ＞色調補正＞色相・彩度

イメージ＞色調補正＞明るさ・コントラスト

イメージ＞色調補正＞トーンカーブ

ホクロを取り除く方法

下の口が入らないように、ギリギリの選択範囲のホクロを選ぶのではなく、肌色が入るように選ぶと良いです。

白黒写真に色を付ける方法

イメージ＞モード＞RGBカラー　で着色できるようにする

指を避けて、ビンだけ色を変える方法

イメージ＞色調補正＞カラーバランス

はじめに

ちょっと気になったので実際に調べてみました。

用意した HTML とその結果

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Document</title></head><body><divid="target"class="target"data-target="target">target</div><script>console.log('tag',document.querySelector('div'));console.log('TAG',document.querySelector('DIV'));console.log('tAg',document.querySelector('dIv'));console.log('id',document.querySelector('#target'));console.log('ID',document.querySelector('#TARGET'));// nullconsole.log('iD',document.querySelector('#tArGeT'));// nullconsole.log('class',document.querySelector('.target'));console.log('CLASS',document.querySelector('.TARGET'));// nullconsole.log('cLaSs',document.querySelector('.tArGeT'));// nullconsole.log('attribute name',document.querySelector('[data-target]'));console.log('ATTRIBUTE NAME',document.querySelector('[DATA-TARGET]'));console.log('aTtRiBuTe NaMe',document.querySelector('[dAtA-tArGeT]'));console.log('attribute value',document.querySelector('[data-target="target"]'));console.log('ATTRIBUTE VALUE',document.querySelector('[data-target="TARGET"]'));// nullconsole.log('aTtRiBuTe VaLuE',document.querySelector('[data-target="tArGeT"]'));// null</script></body></html>

結果まとめ

タグ名は大文字小文字を区別しない
属性名は大文字小文字を区別しない
属性値（idの値・classの値を含む）は大文字小文字を区別する

おわりに

考えてみれば当たり前でした…。

ちなみに[data-target="tArGeT" i]とすると取得可能です。ignore_caseですね。
詳しくは: 属性セレクター - CSS: カスケーディングスタイルシート | MDN

はじめに

アプリ開発でフリーフォントを使用してデザインを変えたのでその使用方法をまとめました。

1 フリーフォントの準備

まず、フリーフォントサイトから自分が使用したいものをダウンロードします。
その後、ダウンロードしたファイル(拡張子ttfまたはotf)をapp/assets/fonts下に配置します。

注意事項

フォントはそれぞれ利用条件が異なります。商用可能であっても利用できる範囲に制限があったり、使用時に報告が必要なものもありますので、ご利用の際には必ず配布ページをご確認ください。

2 フォントの読み込み

CSSファイルに以下を記述します。

@font-face{font-family:“abcdefg”;src:url('/assets/abcdefg.ttf')format("truetype");font-weight:normal;font-style:normal;}

フォントを適用したい箇所にfont-familyを指定します。

例

p{font-family;“abcdefg”;}

これでフォントを適用することができました。

3 本番環境への適応

このままでは本番環境でフォントが適用されなかったため、以下を変更しました。

/config/production.rb

# 変更前config.assets.compile=false# 変更後config.assets.compile=true

これにより本番環境で読み込まれていなかった画像ファイルも表示することができました。

参考リンク

https://qiita.com/dir_sh0606/items/ce605b70f1cb333f9d59
https://qiita.com/kinpin/items/bd7c9a7d7a739e297742

はじめに

Railsで bootstrapなどのCSSフレームワークを使わない、素のコードが意外とみつかないので、そのメモ

前提

Receptionモデルがあり、カラムは名前と目的。

目標

このようなシンプルなフォームをHTMLとCSSのみをつかってシンプルに書く

HTML

フィールドはtext_field,select_field,submitの3つ

html

<%= form_with model: @reception do |f| %>
        <ul>
          <li>
            <%= f.label :name, "名前" %>
          </li>
          <li>
            <%= f.text_field :name, placeholder: "名前を入力してください" %>
          </li>
          <li>
            <%= f.label :purpose, "ご用件を選択してください" %>
          </li>
          <li>
            <%= f.select :purpose,
            (
              [
                ["面接のため", '面接'],
                ["面談のため", '面談'],
                ["打ち合わせのため", '打ち合わせ'],
                ["その他", 'その他']
              ]
            ), {}, size: "4"
            %>
          </li>
          <li>
            <%= f.submit '送信する' %>
          </li>
        </ul>
      <% end %>

CSS

Rubyのform_witth メソッドによって、formタグが生成される
ul,li のリスト表示にする
selectタグをsize: "4"の第４引数に指定することで選択肢から4つ表示して状態に設定できる

css

form {
  width: 60%;
  margin: auto;
  padding-top: 1%;
}
ul {
  list-style: none;
  padding-left: 0;
  width: 100%;
  text-align: center;
}
label {
  font-size: 25px;
}
input[type=text], select {
  text-align: center;
  width: 55%;
  font-size: 20px;
  border: 1px solid #CCC;
  border-radius: 1rem;
  margin-bottom: 20px;
  padding: 1%;
}
input[type=submit] {
  text-align: center;
  width: 55%;
  font-size: 20px;
  border: 1px solid #CCC;
  border-radius: 1rem;
  margin-bottom: 20px;
  padding: 1%;
}

まとめ

もっときれいに書く方法があると思うので、参考程度におねがいします。

追記

誤字を修正

前提

React.js, webpack
ReactでSVGファイルをimgとして読むとスタイルをCSSで変更できない（サイズはできるが色はできない）のでinlineで読む必要がある
複数のサイズや色のために複数のSVGファイルを用意したくない
SVGファイルを変換したReact Componentのファイルも作りたくない

概要

inline SVGとして埋め込む方法３つ
CSSでスタイルを上書きする方法

を紹介
利点としてはSVGをReact Component化せずそのまま使うことで、（デザイナーの用意した）素材を極力そのままにし、ファイル数も増やさずに色を変えることができる

SVGの埋め込み方

1. raw-loader + dangerouslySetInnerHTML の場合

webpack.config.js

test:/\.svg$/i,loader:'raw-loader',

jsx

importHogefrom'... .svg'...<divdangerouslySetInnerHTML={{__html:Hoge}}/>

typescriptならパスを通したglobal型置き場に次のように書く

global.d.ts

declaremodule'*.svg'{constcontent:string;exportdefaultcontent;}

利点

変換も何もされないので詰まったり失敗しない

欠点

dangerously

2. react-svg-loader の場合

https://github.com/boopathi/react-svg-loader/tree/master/packages/react-svg-loaderを使う

webpack.config.js

{test:/\.svg$/,use:["babel-loader",{loader:'react-svg-loader',options:{svgo:{plugins:[{removeViewBox:false},// to enable overwriteing width/height by CSS{moveElemsAttrsToGroup:false},// to prevent attribute destruction for overwriting color by CSS],floatPrecision:2,},},},],},

ここでsvgoのオプションをdisableしているのは自分の扱うsvgが壊れないように設定した項目だが、扱うsvgによって別のdisableが必要かもしれない

jsx

importHogefrom'... .svg'...<Hoge/>

typescriptならパスを通したglobal型置き場に次のように書く

global.d.ts

declaremodule'*.svg'{constcontent:React.ComponentType;exportdefaultcontent;}

利点

巨大ツールでない
噛ませるbabel-loaderを自由に指定できる
- next.config.js の defaultLoaders.babelとか

欠点

最近メンテされてないっぽくてリリースがない
- https://github.com/boopathi/react-svg-loader/issues/303が起きたりする
svgoを無効化できない
- SVGの中身によっては更にsvgoのオプションをdisableしないとスタイルを上手く上書きできないかもしれない

3. svgr の場合

https://github.com/gregberge/svgrを使う以外のコードの部分はreact-svg-loaderと同じなので差分だけ書く

https://react-svgr.com/docs/webpack/に従う
svgr.config.jsを設定する

svgr.config.js

module.exports={svgoConfig:{plugins:{removeViewBox:false,// to enable overwriteing width/height by CSSmoveElemsAttrsToGroup:false,// to prevent attribute destruction for overwriting color},},};

最適化不要、またはファイルに直接かけておく方針なら、svgoを無効化してしまう

svgr.config.js

module.exports={svgo:false,};

利点

メンテ・リリースが続いている
svgoを無効化できる
- 破壊的変更のせいでうまくいかなかったら無効化で逃げれる
star多し
webpack以外にも対応

欠点

依存ライブラリがちょっと多そう

スタイルの当て方

埋め込んだSVGやそのラッパーdivに対しCSSで以下のように書けばサイズや色を変えれる

svg{width:70px;height:70px;}svg*:not([stroke='none'i]){stroke:red;}svg*:not([fill='none'i]){fill:red;}

ポイントは、SVGの色指定はstrokeとfillがあるので、それらがnoneでない箇所を上書きする点

所感

サクッと実現するならraw-loader + dangerouslySetInnerHTML
キレイにimportして埋め込みたいなら svgr
2つのツールがデフォルトで使うsvgoのデフォルト設定がSVGを破壊的に変更するので曲者
@svgr/cliなどを使ってSVG用のReact Componentを作ってPropsで柔軟に中身を変えるのもアリだけど、SVG素材とReact Componentでほぼ重複するのも悲しいし、用意された素材との同期などが少し面倒

参考

どうも7noteです。idにしかできない事があるんです。

コーディング始めたての頃はなんとなくclassを使っててidと何が違うのかよくわからないままという人は意外と多いんじゃないかなと思います。

何に使えるのかこの記事でハッキリさせます。

idのおさらい。

まず、書き方はこう。

index.html

<divid="hogehoge">ほげほげ</div>

id=""をタグの中に書きます。
同じid名は同じページに1つしか存在できないので注意！

そしてCSSはこう。

style.css

#hogehoge{font-size:20px;}

#hogehogeとid名の前に#を書きます。

①idを使ってページ内リンク

index.html

<ul><li><ahref="#menu1">メニュー１</a></li><li><ahref="#menu2">メニュー２</a></li><li><ahref="#menu3">メニュー３</a></li></ul><divid="menu1">～～～いろいろ書く～～～
</div><divid="menu2">～～～いろいろ書く～～～
</div><divid="menu3">～～～いろいろ書く～～～
</div>

このように書くことで、メニュー１をクリックすると、id="menu1"の場所まで瞬時にスクロールされます。
この仕組みをページ内リンクと言います。

またページ内リンクですが、違うページにアクセスした時にも使うことができます。

<!-- 別ページのidがmenu4のところにリンク --><ahref="/page/#main4">次のページへ</a>

②離れたlabel要素とinput要素を関連付ける

index.html

<labelfor="hogehoge">ここをクリック</label><inputvalue="あいうえお"id="hogehoge">

input要素にidを指定し、label要素に指定したidと同じ名前をforの中に入れます。
こうすることで、離れたinput要素を操作することが可能になります。

さらに詳しくは過去に書いた記事をどうぞ。
【初心者でもわかる】フォーム作りに必須！inputとlabelを紐づける方法

③classよりも優先されてCSSが効く

style.css

#red{color:red;}/* id */.blue{color:blue;}/* class */

この場合、#redが優先され文字色は赤色になります。
これはCSSセレクタの優先順位というものがあり、この順位が高い方が優先されてCSSが反映されます。

idとclassの場合、idの方が優先順位が高いため、両方指定していた場合でもidのCSSが反映されます。

詳しい計算方法は分かりやすくまとまったqiitaの記事があるので、こちらをご覧ください。

まとめ

idは同一ページ内には1つしか存在できないため、ヘッダーやフッターなどレイアウトを示す時くらいしか使われないことがほとんどですが、idにしかできない事はあります。

またjQueryの処理を行う際には、idの方がclassよりも処理がじゃっっっっっっっっかんだけ早くなる（はず）。
しっかりと自分で検証したわけではないのですが、一般的にはそのように言われています。
メンテナンス性もidをしっかりと使っている方が高くなる（手法にもよる）ので上級者を目指すのであればidをしっかり使い分けて書けるようマスターしたいところです！

おそまつ！

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

よくある画像をアイコンのように丸くトリミングするUIを作る際、画像のトリミング自体はその辺のJSライブラリを利用して容易に実現できます。
しかし、その多くが四角くトリミングするもののため、実際に丸く表示されている範囲はわかりません。
それを解決するためにCSSで丸く表示される範囲を明るく表示してそれ以外をグレーアウトさせるコードを以下にメモします。
↓こんな感じのやつ

triming.scss

.triming:after{position:absolute;top:4px;bottom:0;left:calc((100%-280px)/2+4px);width:272px;height:272px;pointer-events:none;content:"";// 背景を透明にする（円形で画像が見える部分）background:transparent;border:2pxsolid#fff;border-radius:140px;// 円以外の部分を影で埋めるbox-shadow:001000px1000pxrgba(0,0,0,.5);}

解説

軽く解説をすると、切り取るライブラリ（大体Canvas)の要素にafter要素を与え、そこで円を描画しています。
CSSにおけるbox-shadowは要素が透明の場合要素にかぶっているところは描画されないことから、影でグレーの部分を表現します。(上位でoverflow: hidden;していればいい感じに収まります)

現在の月間のシフト表がこのような状態です。

下の方にいくとどれが何日なのかわからなくなっていしまっています。
HtmlとCSSはほぼ勉強したことがないので、おしゃれ表　HTML　とかで調べて編集するのですが、どうにもこうにもうまくいかない…

Djangoのルール、Python、HTML、CSS、そのうちjavascriptも覚えていかないと便利なWebアプリは作成できないかもしれないですね

本当にWebアプリはハードルがVBAよりはるかに高いですが、何事も０⇒１が一番大変な時期なのでHTML、CSSを覚える一番大変な状況と思って頑張ります(⌒∇⌒)

修正しようとしているHtmlですが、うまくいかなかったらバックアップから戻す可能性もあります…

schedule/month.html

{% extends 'schedule/base.html' %}
{% load static %}
{% block customcss %}
<linkrel="stylesheet"type="text/scc"href ="{% static 'schedule/month.css' %}">
{% endblock customcss %}

{% block header %}

<ulclass="page">

        {% ifnotequal month 1 %}
            <ahref="{% url 'schedule:monthschedule' year month|add:'-1' %}"class="btn-info btn active">前月</a>
        {% else %}
            <ahref="{% url 'schedule:monthschedule' year|add:'-1' 12 %}"class="btn-info btn active">前月</a>
        {% endifnotequal %}

        {% ifnotequal month 12 %}
            <ahref="{% url 'schedule:monthschedule' year month|add:'1' %}"class="btn-info btn active">次月</a>
        {% else %}
            <ahref="{% url 'schedule:monthschedule' year|add:'1' 1 %}"class="btn-info btn active">次月</a>
        {% endifnotequal %}

    <ahref="{% url 'schedule:schedulecreate' year month %}"class="btn-info btn active">シフト作成</a></ul><p>
{% for shisetsu in shisetsu_object %}
    <spanstyle="background-color:{{ shisetsu.color }}">{{ shisetsu.name }}</span>
{% endfor %}
</p>
    {{ kikan }}　　
    {% for shift in shift_object %}
        {% if shift.name != "休" and shift.name != "有" %}
            {{ shift.name }} : {{ shift.start_time | date:"G"}}～{{ shift.end_time | date:"G"}}　
        {% endif %}
    {% endfor %}
{% endblock header %}

{% block content %}
<divclass='text-nowrap table-responsive'><tableclass='table table-striped table-hover table-fixed'><thead><tralign="center"class="info"><!--日付--><throwspan="2"></th>
                {% for item in calender_object %}
                    <thclass="day_{{ item.date }}">{{ item.date | date:"d" }}</th>
                {% endfor %}
            <tralign="center"class="info"><!--曜日-->
                {% for item in youbi_object %}
                    <thclass="day_{{ item.date }}">{{ item }}</th>
                {% endfor %}
            </tr></thead><tbody>
    {% for profile in profile_list %}
        {% for staff in user_list %}
            {% if profile.user_id == staff.id %}
                <tralign="center"><throwspan="1"class="staff_name"staff_id="{{ staff.staff_id }}"width="200">{{ staff.last_name }}{{ staff.first_name }}</th><!--staff_id要素はjsで使う-->
                {% for item in object_list %} 
                    {% if item.user|stringformat:"s" == staff.username|stringformat:"s" %}<!--usernameが同一なら--><tdclass="day"id="s{{ staff.id }}d{{ item.date }}"> 
                        {% if item.shift_name_1 != None %}
                            {% if item.shift_name_1|stringformat:"s" == "有" or item.shift_name_1|stringformat:"s" == "休" %}
                                {{ item.shift_name_1 }}
                            {% else %}
                                {% for shisetsu in shisetsu_object %}
                                    {% if item.shisetsu_name_1|stringformat:"s" == shisetsu.name|stringformat:"s" %}                          
                                        <spanstyle="background-color:{{ shisetsu.color }}">{{ item.shift_name_1 }}</span>
                                    {% endif %}
                                {% endfor %} 
                            {% endif %}    
                        {% endif %}
                {% if item.shift_name_2 != None %}
                    {% if item.shift_name_2|stringformat:"s" == "有" or item.shift_name_2|stringformat:"s" == "休" %}
                        {{ item.shift_name_2 }}
                    {% else %}
                        {% for shisetsu in shisetsu_object %}
                            {% if item.shisetsu_name_2|stringformat:"s" == shisetsu.name|stringformat:"s" %}                          
                                    <spanstyle="background-color:{{ shisetsu.color }}">{{ item.shift_name_2 }}</span>
                            {% endif %}
                        {% endfor %} 
                    {% endif %}    
                {% endif %}
                {% if item.shift_name_3 != None %}
                    {% if item.shift_name_3|stringformat:"s" == "有" or item.shift_name_3|stringformat:"s" == "休" %}
                        {{ item.shift_name_3 }}
                    {% else %}
                        {% for shisetsu in shisetsu_object %}
                            {% if item.shisetsu_name_3|stringformat:"s" == shisetsu.name|stringformat:"s" %}                          
                                <spanstyle="background-color:{{ shisetsu.color }}">{{ item.shift_name_3 }}</span>
                            {% endif %}
                        {% endfor %} 
                    {% endif %}    
                {% endif %}
                {% if item.shift_name_4 != None %}
                    {% if item.shift_name_4|stringformat:"s" == "有" or item.shift_name_4|stringformat:"s" == "休" %}
                        {{ item.shift_name_4 }}
                    {% else %}
                        {% for shisetsu in shisetsu_object %}
                            {% if item.shisetsu_name_4|stringformat:"s" == shisetsu.name|stringformat:"s" %}                          
                                <spanstyle="background-color:{{ shisetsu.color }}">{{ item.shift_name_4 }}</span>
                            {% endif %}
                        {% endfor %} 
                    {% endif %}    
                {% endif %}                   
            {% endif %}            
        {% endfor %}
        </td><tralign="center">
            {% for month in month_total %} 
                {% if month.user ==  staff.id %}<!--usernameが同一なら--><td><b>{{ month.month_total_worktime }}</b></td>
                {% endif %}
            {% endfor %}
            {% for item in object_list %} 
                {% if item.user|stringformat:"s" == staff.username|stringformat:"s" %}<!--usernameが同一なら--><tdclass="day"id="s{{ staff.id }}d{{ item.date }}"><ahref="{% url 'schedule:update' item.pk %}">{{ item.day_total_worktime }} </a></td>
            {% endif %}            
        {% endfor %}
        </tr>
        {% endif %}
        {% endfor %}
        {% endfor %}
        </tbody></table></div>
{% endblock content %}

CSSは、

schedule/month.css

table{border-collapse:separate;border-spacing:0;}tablethead:first-child{border-radius:5px000;}tablethead:last-child{border-radius:05px00;border-right:1pxsolid#3c6690;}tablethead{text-align:center;color:white;background:linear-gradient(#829ebc,#225588);border-left:1pxsolid#3c6690;border-top:1pxsolid#3c6690;border-bottom:1pxsolid#3c6690;box-shadow:0px1px1pxrgba(255,255,255,0.3)inset;padding:10px0;}

これでやってもCssが適用されません。
htmlに記載している、Tableのところに

と書いているのですがこちらが優先されて適用されているのか…
今は、HTMLとCSSを勉強しながら、Pythonの基礎を勉強しています。
少し、開発のスピードが落ちるかもしれませんが、そのあとの躍進のためですね！

CSS

iPhone frame

JavaScriptとは、インタプリタ型のプログラミング言語である。

インタプリタ型・・・プログラム実行時にオブジェクトコード（コンピュータが実行できる形式）に変換していくため、実行速度が遅いです。

例）同時通訳；喋ってる本人と翻訳してる人で時差があるようなイメージ。

①直接Webページに埋め込む
　<head>xxx</head>
または
　<body>xxx</body>

②外部JSファイル
　<script src="xxx.js"></script>

注意点

・命令文の最後には「;」（セミコロン）をつけて区切る
・文字列は引用符で囲みます。""、''

基本文

ウインドウオブジェクトを操作して、文字を表示させます。
訳：ウインドウオブジェクトの書類を書き出して、（この内容文字列）

`document.write("<br>")`

ダブルクォーテーションは2回まで

JS計算

算術演算子

割り算は永遠に計算できないので、途中で計算を止めてしまいます。

ダブルクォーテーションの位置で変わる

変数とは

データを一時的に保管するメモリ領域
メモリ領域を準備することを「変数を宣言する」という。

JavaScriptでは変数に、数値、文字列、真偽値、オブジェクトを格納できます。

代入

「=」は「等しい」ではない
演算子と呼ばれる記号
age = 20;

代入は上書きされる

　alert(xxx);と記述すると、アラートが表示される

計算式の代入

CSS

表とフォーム

input type="file"

reset・submit

required

好物にある、チェックボックスはスペースで選択でき、
性別にある、ラジオボックスは左右の矢印キーで選択でき、
年齢にある、プルダウンメニューは上下の矢印キーで選択できます。

autofocus

placeholder

Photoshop

Altキーで選択範囲を複製できます。

明るさを調整したいとき

ヒストグラム

ウインドウ＞ヒストグラム

レベル補正

イメージ＞色調補正＞レベル補正
下記画像は、明るいところに偏っている画像です。

レベル補正方法３パターン

①2つのスポイトを選ぶ
下記画像のように2つのスポイトを選ぶと、
プレビューで白みがかっていたのが消えるのがわかります。

レベル補正をやり直したい時は、レベル補正パネルでAltを押すと、キャンセルの部分が初期化に変わります。

②暗いところをドラッグ
③自動補正
機械なので、思い通りに行かないこともあります。

緑かぶり

緑っぽく色かぶりすることを「緑かぶり」と言います。
蛍光灯は色が付いていて、画像の色が変わるので、写真を撮る時は、自然光かカメラの光で撮るのが良いです。

イメージ＞色調補正＞カラーバランス

イメージ＞新規調整レイヤー＞色相・彩度

彩度は、鮮やかさを表します。

トーンカーブ

色相環

色彩計画を立てる上で、①中心となる色と、②それを補完する色があるとバランスが良いです。
参考URL

例）IKEAのコーポレートカラー　青と黄色
IKEAのコーポレートカラー「青」と「黄色」は、
金十字旗と呼ばれるスウェーデンの国旗の配色から採られているといわれてます。
参考URL

アンシャープマスク（USM）

フィルター＞シャープ＞アンシャープマスク
完全にぼけているのは加工が難しいですが、ぼけているのを若干くっきりさせるのに向いています。

ぼかし

フィルター＞ぼかし＞ぼかし（移動）
車が臨場感溢れるスピードで走っているのに使ったりします。

コピースタンプツール

画像はこちら

覆い焼きツール

イン画紙にフイルムの画紙を光が覆うため、明るくなります。
例）夏にTシャツ焼けして、ノースリーブになったらダサいやつ

焼きツールは覆い焼きツールの逆です。

境界をぼかして、色々模様ができます。

Illustrator

裁ち落とし

裁ち落とし・・・印刷物やチラシに用います。

仕上がるサイズよりも3mm大きく作って、裁ち落とします。
これにより、紙の地色が出なくなります。

また、裁ち落としのため、B4とかA3でA4のデザインをする必要があります。

拡大・縮小ツールで25％にすると、A4のサイズになります。

1辺が40mmの正三角形

適当な三角形を作る
↓
ウインドウ〉変形
↓
鎖マークがつながっている状態にする（幅・高さを固定）
↓
幅を40mmにする

底辺が50mm、高さ60mmの直角三角形

幅が50mm、高さ60mmの長方形を作る
↓
ダイレクト選択ツールで右上の頂点だけ選んで取り除く
↓
ダイレクト選択ツールで右下と左上を選ぶ
↓
オブジェクト＞パス＞連結

1辺が40mmの正五角形

長さ40mmの線を書く
↓
回転ツールで108度回転を5回行ってコピーする
↓
線を5つくっつけてグループ化

idとclassはコーダーやフロントエンドエンジニアからすれば初歩中の初歩というイメージがあるかと思います。
ですが、浅い知識のままだと意外とハマる可能性が高いのです。

そんな方に向けて復習も兼ねてidとclassについて解説していきたいと思います。

idとclassの違い

idとclassについては、有名なのは下記かと思います。

	id	class
出現回数	文書中に一意でなければいけない（要するに1回しか使えない）	同じ値を何回でも使用可能

上記の通り、idは１回までしか使えなくて、classは何回でも使えるからclassの方が使いやすいというのがよく聞く話かと思います。
実際、私もclassをよく使っていて、idはJSやjQueryで要素を操作するときに指定が楽なのでそのときに使用するくらいです。

では、idとclassの違いってこれだけでしょうか？

＿人人人人人人人人人人人人人人＿
＞　これだけではないのである　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣

idとclassは結構違う

上の表にちょっと追加しました。

この時点で馴れている方は、今後コーディングする際にどんなことに気をつけなければいけないか分かったのではないでしょうか。

	id	class
出現回数	文書中に一意でなければいけない（要するに1回しか使えない）	同じ値を何回でも使用可能
大文字・小文字の区別	区別する	区別しない
値に使用できる文字	先頭の文字はアルファベットから始める必要がある。それ以降はアルファベット、数字（0〜9）、ハイフン（-）、アンダースコア（_）、コロン（：）、ピリオド（.）のみ使用可能。	ほとんどの文字が使用可能。※しかしCSSのセレクタはハイフンや数字からは始めてはならないというルールがあるので、結局ハイフンや数字から始めることは出来ない。

idは大文字小文字判別するのを意外と知らない人が多い

これは知ってる方ももしかしたらいるかもしれないですが、idは大文字小文字を区別します。
なので、下記の場合は「Test」というidのみが太字になります。

See the Pen idの大文字小文字区別 by financier (@financier) on CodePen.

なので、よくあるハマり方としては、idをキャメルケースで記述していて、CSSの方で大文字にするのを忘れて（または間違えて）「あれ？適用されてない？」ということが起こります。

数字から始めちゃいけないというのを意外と知らない人が多い

例えば、id="2020service"や、class="20th"など数字から始めることは出来ないです。
数字から始めること自体、そこまで多くないので実際にやってみてやっと気づくという方が多いかと思います。

classに関しては、ほとんどの文字が使用可能と書いてあるので、classの記法としては数字から始めることは問題ないです。
ですが、そもそもCSSのセレクタの記法ルールとして数字から始めることは始めることは出来ないので、結論として数字から始めることは出来ません。

See the Pen ExKzyGJ by financier (@financier) on CodePen.

そこそこ長い経歴のコーダーさんでも知らずにハマって相談してくるという例があったので、結構知らない方も多いのではないでしょうか。

まとめ

というわけで、idとclassの違いとルールについて説明しましたが、そこまで難しくはないと思います。
ですが、こういう記事って意外とないのでぜひとも参考にしていただければ幸いです。

その他、みんな嫌いなfloatや謎の上下margin相殺などCSSは結構奥深いですよね。
そんな奥深いCSSをぜひ楽しんでみてください。

参考文献

実践Web Standards Design

はじめに

先日、FLOCSS 設計について社内での共有があった際「FLOCSS 設計において l-container のような汎用的なレイアウトクラスはどう記述するべきなのか？」という話が上がりました。
例えば以下のようなスタイルになります。

.l-container{margin:0auto;width:640px;}

このスタイルは、コンテンツを内包しつつ左右中央に配置するために使用されるものであり、同一ページ内で再利用されることが考えられます。「配置に関するクラスなので Layout レイヤーに記述する」と考えると全く問題ないように見えますが、後述する FLOCSS 設計における Layout レイヤーの定義においては適切でない書き方となります。
これを期に FLOCSS のドキュメントを再度読み直しつつ、汎用的なレイアウトクラスをどう配置するかということについて考え直してみることとしました。

FLOCSS 設計における Layout レイヤーの定義

FLOCSS の公式ドキュメントで、Layout レイヤーは以下のように定義されています、

Layout
ページを構成するヘッダーやメインのコンテンツエリア、サイドバーやフッターといったプロジェクト共通のコンテナーブロックのスタイルを定義します。
基本的には、ページ単位で唯一の存在である要素となるため、Layoutレイヤーの要素ではIDセレクタを採用することも可能です。
ただしIDセレクタは高い詳細度を持つため、それを懸念する場合には、l-* プレフィックスをつけた命名を採用するか、あるいは [id="header"] のような属性セレクタを用いることを推奨します。

ページ単位で唯一の存在である要素となると書かれているため、l-containerのように同一ページ内での再利用が考えられるレイアウトのスタイルは Layout レイヤーに記述するべきではない、というのが FLOCSS の基本設計のようです。
公式ドキュメントでは c-gridが例としてあげられているように、再利用するレイアウトクラスについては Object/Component レイヤーとして定義するのが適切なようです。

FLOCSS の基本設計に則るのであれば、l-containerではなく c-containerとして、Object/Component レイヤーに記述するのが妥当かもしれません。

Object/Component にレイアウトを記述することへの違和感

ここで一つ違和感が生まれます。
コンポーネントは「再利用できるパターンとして、小さな単位のモジュールを定義します。」と定義されていますが、l-containerのようなコンテナーは果たして小さな単位のモジュールだと言えるのだろうか？という部分です。
主観ですが、要素を包含するレイアウトコンテナーを普段からコンポーネントとして定義している方はあまり多くないのではないでしょうか？

Object/Component は、言葉通りに再利用できるパターンとして小さな単位のモジュールを定義し、Layout レイヤーが配置に関する責務を負う方が直感的なように思えます。

汎用的レイアウトはどこに配置するのがよいのか？

結論から言うと、自分はやはり Layout レイヤーに書くのがよいのではないかと思っています。

FLOCSS による設計ではクラスの上書きを容易にするためにカスケーディング順に厳格性がありますが、Layout レイヤーは Object レイヤーより先に記述される前提となっていますので、記述箇所が Layout になってもカスケーディングによる問題は生まれないように思えます。
また、Object/Component への記述よりも感覚的に正しく、記述ルールに違和感も生まれにくいのではないかと考えています。

となると Layout レイヤーに再利用性のあるレイアウトを記述する上で問題となるのは

FLOCSS 設計として定義されているルールとして適切ではない
ページ固有のレイアウトと再利用性のあるレイアウトの混在

というところになるかと思います。
上記の問題を払拭するために、Layout レイヤーの再定義を行うこととします。

Layout レイヤーを再定義する

FLOCSS を考案された、谷拓樹氏は自著『柴犬でもわかるFLOCSS』の中で
「FLOCSS をベースに CSS 設計を考えた時に、Layout を再定義し、役割・責務を変えてしまってもよい」と述べられています。

自分なりに Layout レイヤーをより直感的に再定義するのであれば、現状では以下のようなものになるかと思います。

Layout
ページを構成するヘッダーやメインのコンテンツエリア、サイドバーやフッターといったプロジェクト共通のコンテナーブロックのスタイルを定義します。
また、再利用できるレイアウトのパターンとしてのスタイルの記述を許容します。
ページ単位で唯一の存在である要素とは限らないため、Layout レイヤーの要素においても ID セレクタによるスタイリングは禁止します。

その際、本来の FLOCSS 設計におけるページ単位で唯一の存在である要素と、新しく独自で追加した再利用できるコンテナーのパターンとしての要素が混在することとなりますので、後者は layout/_common.scssなどとして管理しておくのがよさそうです。

まとめ

今回、自分なりに Layout レイヤーをより直感的で使いやすくするための再定義を行いました。
FLOCSS はあくまで基本原則であり、自身のプロジェクトによってフレキシブルに使用していけるところにも良さがあると思っています。
引き続きプロジェクトに合わせてベストな設計を探っていきたいです。

参考

FLOCSS 公式ドキュメント
 柴犬でもわかるFLOCSS

前提読者

ひとつの可能性

どうも7noteです。本日作る料理はハンバーガーです。

一般的なハンバーガーメニューの作り方

本物のハンバーガー メニュー

おそまつ！

参考・アイデア元

検証する説

どのような仕組みか

1. アコーディオン

2. ハンバーガーメニュー

3. モーダル

検証結果

どういうケースか

何が起こるか

何故か

こうならないようにするために

アルファチャンネルの色を継承しない

XD / Figma で opacity が指定されている色はそのまま使う前に確認する

まとめ

はじめに

前回の内容

Gatsby Develop と Gatsby Serve の違い

新・ページごとに個別にCSSを読み込む方法

おわりに

命名のルール

Block

画面全体からみた大きなブロック

小さなパーツが集まってできる中ブロック

小さなパーツ単位のブロック

Element

modifier

状態

サイズ

形状

〜〜のなどでつかう言葉

補助的な言葉

ページ名や内容、パーツ

そもそも擬似クラスとは

[補足]擬似クラスと擬似要素の違い

擬似クラス

擬似要素

汎用的に使える擬似クラス

1. :root

2. :not()

3. :target

1〜３を用いたサンプルコード

フォームで使える擬似クラス

4. :focus-within

5. :in-range

6. :out-of-range

7. :valid

8. :invalid

9. :required

10. :optional

4〜10を用いたサンプルコード

どうも7noteです。画像に「SALE」とか「カテゴリー」などのラベルを付ける方法を解説。

作り方

解説

まとめ

おそまつ！

卒業制作

今後の流れ

定点観測

11月までにポートフォリオ

作りたいサイト

作りたいバナー

欲しい人材

CSS

float: right;

clear: both;

後続要素がない場合でも、フロートを解除したい場合

form

input

textarea

select

type="radio"

type="checkbox"

illustrator

選択範囲

本物のハンバーガーメニュー

`Block`

`Element`

`modifier`

`〜〜の`などでつかう言葉