- 投稿日：2020-02-11T22:18:09+09:00
フロントエンドエンジニアとして6か月働いてコードレビューで指摘されたこと３つ
1.見た目とデザインを合わせる
自分が作ったものとデザイナーからもらったXDファイルの見た目が異なっていた。
（※Adobe XD は、ユーザー操作性をデザイン、プロトタイプ化、共有するためのプラットフォームです。ワイヤフレーム、ビジュアルデザイン、インタラクションデザイン、プロトタイプ化、プレビュー、共有間の切り替えが簡単な、オールインワンの強力なツールです。（公式サイトより））以下、XD
どういう指摘をされたか
H殿、K氏「ここが違うよ」
例えば、XDでは文字色が白なのに、書いたコードでは黒になっていると単純なものであった。
また、自分はPC版からコードを書くため、SP版用文字サイズの変更し忘れのミスを一番指摘された。それはなぜか
自分が書いたコードが、間違っていた。
単純に見落としでの間違いだった。
コードレビューの前に自分で最終確認をしていなかったためである。どのように直したか
一か所ずつ確認するようになった。
もちろん、XDを確認しながらコードを書くが、一通り書き終えてから
XDの文字サイズ、文字色、余白の幅などを再確認するようになった。まだまだ指摘はされますが....
2.不要なコードの削除
コードレビューの前にまたまた最終確認をしておらず指摘をされたこと....
どういう指摘をされたか
H殿、K氏「これいらないよね」
CSSでXDファイルでファイル通りの見た目にするために実験的に書いていたCSSプロパティが不要だった。それはなぜか
1.見た目とデザインを合わせるでも記載したが、コードレビューの前に自分が書いたコードの最終確認を怠ったためである。
どのように直したか
実験的に書いたコードは、確認し終えたらすぐ消すように習慣づけるようにした。
また、最終確認の際も気を付けてコードを確認するようになった。当たり前のことなのにできていなかったためミスを起こしていた.......
3.クラス名
どういうコードを書いたか
<!-- 修正前 --> <div class="header-contents-logo"> <!-- 修正後 --> <div class="header-logo">修正前は、見たままの入れ子構造通りに書いていた。
どういう指摘をされたか
H殿、K氏「クラス名、関数名のつけ方が下手糞」
H殿「logoの親コンポーネントはなにー？」
ぼく「header.....」
H殿「header-logoでいい」
それはなぜか
まだ、クラス名のつけ方に慣れていなかった。
親コンポーネントなどの規則を知らなかったため。どのように直したか
書き方を知らなかったので、
他サイトのクラス名をディベロッパーツールで確認、Bootstrapで学習するようにした。
また、CSSの命名規則を調べるようになった。
- 投稿日：2020-02-11T22:00:18+09:00
Vue.jsでのdeep selectorの書き方
久しぶりの投稿です。
備忘を兼ねて簡単に書きます。deep selector？
Vue.js でscoped付でstyle を書いている場合に、そのコンポーネントの子コンポーネントにもstyleを追加したい場合に使用するcss のセレクターの書き方です。
書き方
.hoge >>> .huga{...}
>>>または/deep/で出来るとなっています。
（参考：https://vue-loader-v14.vuejs.org/ja/features/scoped-css.html）が、効かない場合がある。その時は？
原因を調べていないのですが、Versionか構成かで上記の書き方だと効かない場合があります。
調べてみたところ、次の書き方だと意図したとおりになりました。.hoge ::v-deep .huga{...}どうも、
>>>や/deep/が解釈されなかったようです。
もしdeep selectorが解釈されていない場合があったら、::v-deepを試してください。参考
Deep Selectors
https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectorsVue LoaderのDeep Selectorの::v-deep
https://blog.mahoroi.com/posts/2019/03/scoped-css-v-deep/スコープ付き CSS
https://vue-loader-v14.vuejs.org/ja/features/scoped-css.html
- 投稿日：2020-02-11T21:11:21+09:00
[Web] 要素を分割せずに済むグリッチエフェクト ~SVGフィルターのキホン~
Note: この記事に掲載しているCodePenはSVGフィルターを使用しており、ChromeとFirefox以外のブラウザーでは正常に表示されない可能性がある。
概要
この記事は?の記事にインスパイアされたものである。
グリッチエフェクトを表現するには文字や画像を横にスライスして横方向に少し位置をずらす必要がある。上の記事はスライスごとにHTMLの要素を用意するという方法をとっており、同じテキスト(or 画像)を持った要素をスライスの数だけ用意する必要がある。ここではSVGフィルターを用いた、要素1個で済むグリッチエフェクトを紹介する(厳密には、
<svg>とフィルター要素を除いて1個)。このエフェクトはテキストや画像、SVGで表現できるあらゆる図形に適用できる。最終的には?のようなものができる(ループ可)。横に分割してずらすだけでなく、色収差エフェクトを加えることでよりぽくなっている。
CodePenのデモ?(普通にテキストをマウスで選択するができる)
この記事は、SVGフィルターの簡単な説明から始めて、少しずつコードを構築していく形を取る。
SVGフィルター
SVGはベクター形式の画像であり、HTMLの
<img>タグで外部SVGファイルを表示させることができるだけでなく、HTML内に直接SVGを書くことができる。また、SVGの中にはテキストや四角形、円などいろいろな図形を含めることができるが、それらに対してフィルター効果を付与することができる。フィルターは普通
<svg>内の<defs>内で宣言する。フィルターは一度宣言すれば何度も参照でき、同じページ内の別の<svg>からでも参照することができる。
<filter>の中では"ぼかしフィルター"や"色変換フィルター"などの基本的なフィルター処理(フィルタープリミティブ)を組み合わせることで、全体として一つのフィルターを定義する。今回用いるフィルタープリミティブは<feOffset>、<feColorMatrix>、<feBlend>、<feMerge>の4つである。これ以外にもいくつかあるが、ここではこの4つだけ説明する。
<feOffset>: オフセットこれは非常に単純で、入力画像をx軸、y軸方向に指定した長さだけ平行移動(オフセット)させるものである。
See the Pen SVG feOffset Filter by righteous (@righteous_github) on CodePen.
後で説明するが、ここでは
<filter>にprimitiveUnits="objectBoundingBox"が指定されているため、dxdyに指定した値はフィルターが適用されている要素の幅、高さに対する割合となる。今の場合、dxが0.1なので<image>の幅200に0.1を掛けた20だけx軸方向に移動することになる。
<feColorMatrix>: 行列による色変換これは入力画像の各ピクセルのRGBA値を行列によって変換するものである。数式で表すと?のようになる。$R,G,B,A$が入力の各ピクセルのRGBA値であり、$R',G',B',A'$が出力の値である。単にRGBAの列ベクトルに指定した行列を掛けるだけなので、行列の乗算を知らない人はぜひ調べてみてほしい。実際指定できるのは$a_1$から$a_{20}$の部分だけであり、これらを
valuesに並べて指定する。\begin{bmatrix} R'\\ G'\\ B'\\ A'\\ 1 \end{bmatrix} = \begin{bmatrix} a_1 & a_2 & a_3 & a_4 & a_5\\ a_6 & a_7 & a_8 & a_9 & a_{10}\\ a_{11} & a_{12} & a_{13} & a_{14} & a_{15}\\ a_{16} & a_{17} & a_{18} & a_{19} & a_{20}\\ 0 & 0 & 0 & 0 & 1\\ \end{bmatrix} \begin{bmatrix} R\\ G\\ B\\ A\\ 1 \end{bmatrix}例えば次のような行列を指定すれば、入力画像の緑成分だけ取り出すことができる。
\begin{bmatrix} R'\\ G'\\ B'\\ A'\\ 1 \end{bmatrix} = \begin{bmatrix} 0 & 0& 0& 0& 0\\ 0 & 1& 0& 0 & 0\\ 0 & 0& 0& 0 & 0\\ 0 & 0& 0& 1 & 0\\ 0 & 0 & 0 & 0 & 1\\ \end{bmatrix} \begin{bmatrix} R\\ G\\ B\\ A\\ 1 \end{bmatrix} = \begin{bmatrix} 0\\ G\\ 0\\ A\\ 1 \end{bmatrix}See the Pen SVG feColorMatrix Filter by righteous (@righteous_github) on CodePen.
<feBlend>: ブレンドこれは画像編集ソフトにおけるレイヤーのブレンドと同じようなもので、2つの入力画像を指定したブレンドモードで合成する。?は
darkenモードでブレンドしたものである。See the Pen SVG feBlend Filter by righteous (@righteous_github) on CodePen.
<feComposite>: 合成これは
<feBlend>と同じようなものであるが、ブレンドモードは固定でnormalで合成する(画像編集ソフトにおけるレイヤーのデフォルトのブレンドモードと同じである)。ただし<feBlend>と違い、3個以上の入力画像を指定できるため、コードがコンパクトになる。下は画像の上に緑色の四角を重ね、さらに透明度0.5の青色の四角を重ねている。See the Pen SVG feMerge Filter by righteous (@righteous_github) on CodePen.
フィルタープリミティブの適用範囲の指定
<filter>とすべてのフィルタープリミティブは、フィルターを適用する範囲をxywidthheightで指定することができる。例えば<feOffset>を適用すると元の要素の範囲をはみ出すことになるため、それも表示されてほしいならば<filter>の範囲を要素の範囲より広めに取る必要がある。親切にも<filter>の範囲のデフォルト値はx="-10%"y="-10%"width="120%"height="120%"となっており、少しはみ出しても表示されるようになっている。<filter>の範囲をはみ出すような範囲をフィルタープリミティブに指定しても意味はない。補足:
<filter>のprimitiveUnits属性についてフィルタープリミティブで指定する色々な座標や長さは
<filter>のprimitiveUnits属性の影響を受ける。
primitiveUnits="userSpaceOnUse": このフィルターが適用された要素の座標系における値(パーセント値を指定した場合、その要素を含むSVG要素のサイズに対する割合)primitiveUnits="objectBoundingBox": このフィルターが適用された要素のサイズに対する割合(0.1なら0.1倍)例えばフィルタープリミティブの1つ
<feOffset>のdxが0.5のとき、userSpaceOnUseの場合は、フィルターが適用される側の要素上での0.5ピクセルとなり、objectBoundingBoxの場合はフィルターが適用される側の要素のサイズの0.5倍となる。ここではChromeのバグ1を避けるため
primitiveUnits="objectBoundingBox"を使用している。グリッチエフェクトの実装
グリッチエフェクトは適用される要素のサイズに対して、横に少しはみ出す形になるため、左右に少し余裕を持ってフィルターの領域を指定する。広げすぎるとパフォーマンスに影響が出るため、必要最小限にするのがよい。
<filter id="glitch" primitiveUnits="objectBoundingBox" x="-10%" y="0%" width="120%" height="100%"> </filter>
色収差エフェクト
色収差とは光の波長によって屈折率が異なるために、レンズを通して撮影すると輪郭が滲んだような写真になる現象である。ここでは色収差を表現するために、簡易的に入力画像をRとGとBに分解し、等間隔にずらす、という方法をとる。イメージとしては?のような感じである。
CodePenで開く: Chromatic Aberration Effect Visualization
(このCodePenはどのように色収差を表現するかを視覚化するためのものであって、これ自体はSVGフィルターを使っていない)
RGB各成分の抽出
まずは入力画像からR成分G成分B成分をそれぞれ抽出する必要がある。これは先述のとおり
<feColorMatrix>を使って?のように実現することができる。フィルタープリミティブは入力画像をin属性で指定することができ、result属性で出力に名前をつけることができる。いずれもin属性にSourceGraphicを指定しているが、これは文字通り元の画像(フィルターを適用しようとしている図形の、フィルターを適用する前のレンダリング結果)である。各成分は後で使用するため、resultでそれぞれの出力に名前(redgreenblue)をつけている。<filter id="glitch" primitiveUnits="objectBoundingBox" x="-10%" y="0%" width="120%" height="100%"> <feColorMatrix in="SourceGraphic" result="red" type="matrix" values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" /> <!-- green: G成分 --> <feColorMatrix in="SourceGraphic" result="green" type="matrix" values="0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0" /> <!-- blue: B成分 --> <feColorMatrix in="SourceGraphic" result="blue" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0" /> </filter>各成分を横にずらす
次に、R成分を左に、B成分を右にずらす。これは明らかに
<feOffset>の出番である。次のように、上で抽出したR成分とB成分をinで参照し、±0.005(×幅)だけ左右にずらす。<filter id="glitch" primitiveUnits="objectBoundingBox" x="-10%" y="0%" width="120%" height="100%"> <!-- ...省略... --> <!-- red-shifted: R成分を左にずらしたもの --> <feOffset in="red" result="red-shifted" dx="-0.005" dy="0" /> <!-- blue-shifted: B成分を右にずらしたもの --> <feOffset in="blue" result="blue-shifted" dx="0.005" dy="0" /> </filter>ブレンド
最後に3つの成分を重ね合わせて一つの画像にする。これはお察しの通り
<feBlend>を使う。色が明るくなる方向にブレンドしたいので、screenモードを使用する。<feBlend>は2つの画像しか入力できないため、3つの画像を合成するには2回<feBlend>を適用する必要がある。<filter id="glitch" primitiveUnits="objectBoundingBox" x="-10%" y="0%" width="120%" height="100%"> <!-- ...省略... --> <!-- blended: ブレンド結果 --> <feBlend mode="screen" in="red-shifted" in2="green" result="red-green" /> <feBlend mode="screen" in="red-green" in2="blue-shifted" result="blended" /> </filter>これで、色収差エフェクトの完成である。
横ずれエフェクト
スライスしてずらす
次に、画像を横向きにいくつかスライスして、さらに一部のスライスを横向きに色々な距離動かす必要がある。そのためには、
<feOffset>各スライスの範囲にだけ適用する必要がある。先述の通り、各フィルタープリミティブは
xywidthheightでその適用範囲を指定することができる。このとき、その出力における指定した範囲外の領域はすべて透明となる。スライスごとに<feOffset>で該当範囲を横に動かす。
<filter id="glitch" primitiveUnits="objectBoundingBox" x="-10%" y="0%" width="120%" height="100%"> <!-- ...省略... --> <!-- スライスごとに横に動かす --> <feOffset in="blended" result="slice1" dx="0" dy="0" y="0%" height="30%"></feOffset> <feOffset in="blended" result="slice2" dx="0.01" dy="0" y="30%" height="4%"></feOffset> <feOffset in="blended" result="slice3" dx="0" dy="0" y="34%" height="26%"></feOffset> <feOffset in="blended" result="slice4" dx="-0.007" dy="0" y="60%" height="2%"></feOffset> <feOffset in="blended" result="slice5" dx="0" dy="0" y="62%" height="38%"></feOffset> </filter>マージ
最後に、スライスを1つの画像にまとめる必要がある。スライス同士は範囲が重複しないので、
<feMerge>を使って単に重ね合わせればよい(<feBlend>を使ってもできるが、<feMerge>の方がコンパクトに書ける)。<filter id="glitch" primitiveUnits="objectBoundingBox" x="-10%" y="0%" width="120%" height="100%"> <!-- ...省略... --> <!-- すべてのスライスをマージ --> <feMerge> <feMergeNode in="slice1" /> <feMergeNode in="slice2" /> <feMergeNode in="slice3" /> <feMergeNode in="slice4" /> <feMergeNode in="slice5" /> </feMerge> </filter>結果は?のようになる。
アニメーション
アニメーションといってもCSSアニメーションではなく、SVG独自のアニメーション機能を使用する。アニメーションは属性値に対して適用するものであり、適用したい要素の子要素として
<animate>を追加する。例えば2つ目のスライスの
<feOffset>に対して?のように<animate>を追加すると、そのスライスが動くようになる。attributeNameは変化させたい属性の名前、durがアニメーションの時間、keytimesはタイミング(0から1の値)、valuesは各タイミングにおけるその属性の値である。グリッチエフェクトでは滑らかに移動してほしくないため、calcModeをdiscreteにすることで飛び飛びに移動するようにしている。また、repeatCountをindefiniteにすることで永久に繰り返すようにしている。<filter id="glitch" primitiveUnits="objectBoundingBox" x="-10%" y="0%" width="120%" height="100%"> <!-- ...省略... --> <!-- 2つ目のスライス --> <feOffset in="blended" result="slice2" dy="0" y="30%" height="4%"> <animate attributeName="dx" values="0; -0.03; -0.06" keytimes="0; 0.2; 0.8" begin="0s" dur="3s" calcMode="discrete" repeatCount="indefinite" /> </feOffset> <!-- ...省略... --> </filter>最後に、スライスの数や高さを調節し、スライスだけでなく色収差の
<feOffset>にもアニメーションを追加してvaluesとkeytimesを調節すると完成である?。注意点
今回作成したものはWindows 10のChrome 80.0.3987.87とFirefox 74.0b1とEdge 80.0.361.48、 AndroidのChrome 80.0.3987.87とFirefox 68.4.2で正常に表示されることを確認したが、IEや非ChromiumのEdgeでは正常に表示されなかった。また、ChromeやFirefoxでも(今回使用しなかった)一部のフィルターでバグが存在するため、十分に注意する必要がある。
最後に
SVGフィルターを用いることで、元の要素を複製するなどの変更をHTMLに加えなくても、フィルターを1つ適用するだけでグリッチエフェクトを実現することができる。また、フィルターの定義はページのどこからでも参照できるため、何度も定義する必要がない。
このようなエフェクトを作るとき、ほとんどの場合CSSで事足りるし、ブラウザーの対応状況が少し不安であるということもあり、SVGフィルターを使う機会はあまりないと思われるが、複雑なフィルターを作ることができるという点で利点があることを覚えておくとよいかもしれない。
参考
- Chromatic Aberration Filters by Fabien Fellay
- The Art Of SVG Filters And Why It Is Awesome — Smashing Magazine
- Filter Effects – SVG 1.1 (Second Edition) (仕様)
Chrome 80で試した限りでは、あるSVGで定義されたフィルターが
primitiveUnits="userSpaceOnUse"であるとき、別のSVG内の要素にこのフィルター適用すると、フィルタープリミティブのxywidthheightがパーセント値であるとき、その100%が後者のSVGのサイズではなく前者のSVGのサイズとなるというバグが発生する。Firefoxではこの現象は起きなかった。また、検索してもこのことに関する情報は見つからなかった。デモ: https://codepen.io/righteous_github/pen/ZEGzwJy ↩
- 投稿日：2020-02-11T20:52:52+09:00
CSSぴえんチャレンジ
CSSぴえんチャレンジって何？
正確には「HTMLとCSSでぴえんの絵文字を再現できるか」というチャレンジを勝手に作って勝手にやりました。
ぴえんの絵文字がわからない？チャレンジ結果をご覧ください。
チャレンジ結果
See the Pen pien by niko (@rorome15nikomu) on CodePen.
＿人人人人人人人人人人＿
＞ これがぴえんだ！ ＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y￣おわりに
皆さまも息抜きや力試しに#CSSぴえんチャレンジやってみてはいかがでしょうか?
もっとクオリティの高いぴえんができたら#CSSぴえんチャレンジでツイートしてください！
全力でリツイート＆いいねします。私のTwitterはこちら。
お付き合いいただきありがとうございました！
- 投稿日：2020-02-11T19:51:21+09:00
Railsで個別にCSSを適用させる方法
結論
config/initializers/assets.rbに
'Rails.application.config.assets.precompile += %w( user.css )'
を追加することで解決した。
いろいろ調べてもわからなかったが、エラーが出たときの指示に従ったら解決したので、赤い文字がたくさん出てきても焦らずに対処すれば問題ないということがわかった。背景
htmlやcssの勉強は対してしていなかったものあり、デザインをいじることに抵抗があった。
そんなとき、Bootstrapが便利だと職場のエンジニアの方々からきき、デザインに全く手が回っていないサービスにBootstrapの実装を試みた。Bootstrapをいろいろ探していると無料のテーマというのがあることを知った。
元々ワードプレスでブログを書いていたことがあったので、ワードプレスのテーマと非常に似ているなと感じた。Bootstrapのテーマを探すとサイト丸ごとをデザインできるようなものもあったが、Bootstrapについてよくわからないし、せっかく実装したslickを使ったJQueryの動きに影響が出ても嫌なので、作ってすらいなかったログインページをまず作り、そのページにだけBootstrapのデザインを反映させようとした。
苦悩
htmlのページにcssを読み込む方法は知っていたつもりだったが、user.scssというscssファイルの読み込みがどうしてもできずにいた。
同じcssのコードをapplication.scssに貼り付けるとサイト全体に反映されてしまうが、これだとちゃんとログイン画面もお洒落なデザインになっていた。
どうにかしてログイン画面にのみデザインを反映させたいと思い、いろいろ調べてみたが、compileがどうとか、
= require_tree . と= require_selfの順番がどうとかがたくさん出てきて、困った。
諦めてteratailで質問をするためにどのようなエラーが出ているのかを確認しようと、htmlに読み込みのためのコードを書き、ブラウザで確認した。
すると
「Asset was not declared to be precompiled in production.
AddRails.application.config.assets.precompile += %w( user.css )toconfig/initializers/assets.rband restart your server」と丁寧に書いてあり、
言われた通りに丸々コピーしてassets.rbに記載したのち、リスタートするとログイン画面だけお洒落になった。
ファイルはscssなのに、なんでcssなのだろうと思いながら、scssに変更してサーバーを起動させたが、問題なく立ち上がった。cssとscssにはそんなに違いはないんだろうと勝手に解釈して終わった。なんとかうまくいってよかった。学び
プログラミングを初めてから作業中の癖になっていたことが２つあり、１つはエラーが出たりわからなかったりするとすぐに調べるようになったこと。もう一つがteratailで誰かに助けを求めようとすることだった。が、そもそもどんなエラーなのか、しっかり突き詰めていないと調べて出てきた解決策が自分の課題とマッチしているのか判断ができないし、teratailで質問するにしても質問された側も状況の把握がうまくできない、何よりエラーの説明に答えがある場合がある、ということを今回の経験から学んだ。
- 投稿日：2020-02-11T17:22:59+09:00
Chrome version 80 以降 grid-layout の 1fr の挙動が変わりました
- 投稿日：2020-02-11T17:22:59+09:00
Chrome version 80 以降 grid-layout の 1fr の挙動が変わります
- 投稿日：2020-02-11T16:51:44+09:00
Formを送信する
はじめに
formを送信することがたまにあるのですが、実際ぼんやりとしかわかっていませんでした。
送信ボタン押したらサーバ側で色々やってくれる、という認識でしかありませんでした。
この機会に、送信ボタンを押すことで入力したデータがどうなっているのか、
また、入力するための各タグや属性はなんの意味があるのか改めて調べましたので、その備忘録です。
もし、間違っていることがありましたら、指摘いただけると嬉しいです。formを送信(submit)すると起きていること
①formタグに囲まれた必要な属性のパーツがsubmitボタンを押すことで送信される。
②送られてきたデータに応じて返す。
その際に、method属性を用いてサーバから返してもらうものを指定する。
GET
サーバにリソースを送ってもらうよう要求する。
そのための目印としてパラメータにサーバが必要としているデータをつけて送る。POST
サーバに送ったデータを元に結果を返してもらうよう要求する。
そのために指定された形で必要なデータを送る。サーバ側が必要としているデータの形でデータを送るために、formタグやinputタグの中身に属性等を指定することでデータの形や数を制限したりしている。
formタグ
入力、送信フォームを作ることができる。
中に<input><select></select><textarea></textarea>タグを使って
ラジオボタン
チェックボックス
テキスト入力ができるエリア
submitボタン
など、フォームに必要なパーツを置ける。
(今回記述する属性はよく使うものだけにします。)action属性
フォームに入力されたデータをsubmitで送信できる。(submitの詳細は後述)
formタグのactionに記載したurlへデータが送られる。
<form action="hoge.php"></form>method属性
送信方法を指定することができる。
GET:送信内容がurlのパラメータにくっつく形で送信される
POST:本文として送信される
<form action="hoge.php" method="POST"></form>
※特に指定しない場合はGET
※urlの長さには制限があるため、ちょっとした識別番号等はGETでよいが、長文を送りたい場合はPOSTの方がよい
※inputやbuttonで作成するsubmitボタンにformmethod属性をつけている場合は、formタグのmethodの方が優先されるenctype属性
送信するデータの形式を指定することができる。
- application/x-www-form-urlencoded:key=valueを&で繋ぐ形式
- multipart/form-data:ファイルを含むデータ(画像のアップロード等)
- text/plain:テキストのみ
※特に指定しない場合はapplication/x-www-form-urlencoded
name属性
フォームに名前をつけることができる。
重複しないようにわかりやすい名前をつけるとよい。target属性
送信結果をどのフレームに表示するか指定することができる。
_blank:新規ウィンドウへ表示
_self:現在のウィンドウへ表示
_parent:親フレームに表示
_top:フレーム分割を解除してウィンドウ全体に表示inputタグ
フォームを構成する様々なデータを入力できる要素。
type属性をつけることによって、入力できるものを指定することができる。type属性のデフォルトはtext。
ここでは、よく使うtype属性を紹介する。type属性
text
一行のテキストボックスを作れる。
データが送られる時、name属性と一組みになって送信される。tel
電話番号入力欄を作れる。
とはいえ、入力形式が強制されているわけではなくtextと振る舞いは一緒。
telにすることで、スマホのキーボードを数字で最初から表示してくれるメリットはある。password
パスワード入力欄を作れる。
入力すると、ブラウザ上では*に置き換えられて表示される。
ただ、入力データが暗号化されて送信されるわけではないので、取り扱いには気をつける。file
サーバに送るファイルを選択するエリアを作れる。
ファイル名を入れる欄と参照ボタンが表示される。submit
フォームの送信ボタンを作れる。
その他の属性
max
入力できる最大文字数を指定できる。
required
その項目を入力必須にできる。
おわりに
今回は私がよく使う属性だけを記載しましたが、この他にもまだまだたくさんの属性があります。
間違っていたり、補足等ありましたらコメントいただけると嬉しいです。引用元
- 投稿日：2020-02-11T16:28:19+09:00
ScrollReveal＋CSSアニメーションでWebページをちょっとだけオシャレにしてみる
この記事は「納期1日だけどオシャレなアニメーションもつけてイイ感じにして
」と言われた人間が、頑張って工夫したことをまとめたものです。
タイトルにあるScrollRevealとは
ScrollRevealはスクロールアニメーション系のJavascriptライブラリです。
jQuery不要、CSS不要で手軽にスクロールアニメーションを実装できます。事前準備
まずHTMLでscrollreveal.jsを読み込みます。
HTML<script src="/js/scrollreveal.min.js"></script>そして、アニメーションさせたい要素に任意のclassを設定します。
HTML<div class="anime">アニメーションさせたい要素</div>ここでは
class="anime"を使うことにしました。やりたいこと
- ページをスクロールすると要素がフワっと出てくる
- 要素がフワッと出てきた後で、要素内のアイコンが動く
やりたいこと① ページをスクロールすると要素がフワっと出てくる
「事前準備」で用意したアニメーションさせたい要素に対してアニメーションを実装します。
JavascriptScrollReveal().reveal('.anime');1行書いただけ。お手軽です。
もう少し動きを変えたい場合はオプションも設定できます。
JavascriptScrollReveal().reveal('.anime',{ duration: 1000, //アニメーションの長さ delay: 500 //アニメーションの遅延 });試しに動かすとこんな感じ↓
See the Pen
ScrollReveal-sample01 by tricolorebox (@tricolorebox)
on CodePen.
やりたいこと② 要素がフワッと出てきた後で、要素内のアイコンが動く
さて、こまった！
スクロールで要素が出てきた後で、アクセントとしてアイコン画像を動かしたいのですが（※イメージとしてはauトップページ）細かいアニメーションには対応していません
アイコンのアニメーションをよく観察すると...？
アイコンは背景画像として読み込まれているようです。
CSSアニメーションでアイコンのスプライト画像をパラパラ漫画のように１コマずつ動かしていました。これを組み合わせられないかなアニメーション終了に任意のclassを付与する
ここで先ほどのScrollRevealの話に戻ります。
ScrollRevealではafterRevealというオプションでコールバックを設定できます。
これにより、アニメーション後に任意の関数を実行することが可能です。
これを利用してアニメーションが終わったら、is-visibleというclassを付与します。JavascriptScrollReveal().reveal('.anime',{ afterReveal: function (el){ el.classList.add('is-visible'); } });このような書き方になります。
CSSでアイコン用のアニメーションを設定する
最後にアイコン用のアニメーションを設定します。
繋がったアイコン画像を読み込んでアニメーションを設定します。
今回は１コマ96x96として、用意したのはこんな感じのイラスト↓
そしてCSSで
is-visibleのclassがついた要素の子要素にアイコンのアニメーションを設定します。HTML<div class="anime"> <div class="icon"></div> <div class="inner">アニメーションさせたい要素</div> </div>CSS.icon{ background:url(/img/sample_anim.png) no-repeat 0 0; width:96px; height:96px; margin:0 auto; } .is-visible .icon{ animation: parapara 1s steps(8) 3; /*１秒間８コマのアニメーションを３回繰り返す*/ } @keyframes parapara { to { background-position: -768px 0; /*アイコン幅96x８コマ=768px*/ } }どうでしょうか、ちょっと可愛くなったかな...
See the Pen ScrollReveal-sample02 by tricolorebox (@tricolorebox) on CodePen.
最後に
アニメーション部分だけのまとめになりましたが、実際お仕事ではスマホ用・PC用で別々にスクロールアニメーションを設定しました。
アニメーションのタイミング等があとで調整しやすいライブラリを選べると自分も楽できますよ
- 投稿日：2020-02-11T12:03:44+09:00
これからの時代、CSSではなくSCSSを使おう
前書き
CSSは計二回のアップデートにより、様々な特殊かつ高度なデザインが可能になりました。しかしその反面、理想とするデザインを実現するためには面倒な微調整を何回も繰り返さなければなりません。
ところが最近、"Sass"というデザイン業界の常識を覆す(というほどでもない)新たなスタイル記法が開発されています。
Sassでは、"Mixin"をはじめ、"Each"や"While"など様々な便利な記法をサポートしており、非常にスピーディーに開発ができるでしょう。インストール
Sassは当然、そのままでは実行できません。そこでCSSにコンパイルして利用しなければなりません。
まず、Rubyをインストールしてください。これがないとSassはコンパイルできません。
次に、コマンドプロンプトで"gem install sass"と入力してください。これで(多分)SCSSのコンパイラがインストールできます。確認するために、コマンドプロンプトに"sass"と入力してください。
何かが表示されたらインストールは成功です。コンパイルしてみよう
まず、すでにあるCSSファイルをSassに逆コンパイルするには、こちらのサイトがおすすめです。
CSS2Sassそれから、SassをCSSにコンパイルするには、先ほどインストールしたコンパイラを使います。
sass style.scss:style.cssSass記法とSCSS記法
Sassには、標準的なSCSS記法(おすすめです)と、Sass記法があります。
主な違いはインデントのやり方です。style.sass.red color:#FFF background:#F00style.scss.red{ color:#FFF background:#F00 }基本的なやり方
まず、このような場合、
index.html<div class="outline"> <div class="inline"> </div> </div>SCSSではこのように表記します。
style.scss.outline{ background-color:#F00; color:#FFF; padding:10px; .inline{ background-color:#00F; color:#FFF; padding:10px; } }次に"Mixin"という特殊な記法があります。
style.scss@mixin hoge{ color:#FFF; padding:10px; } .outline{ @include hoge; background-color:#F00; .inline{ @include hoge; background-color:#00F; } }さらには、"For"という記法があり、省略するのが便利です。
style.scss@for $var from 0 through 3 { .mb#{$var} { margin-bottom: 5px * $var; } }このコードが、コンパイル後にはこうなります。
style.css.mb1{margin-bottom:5px;} .mb2{margin-bottom:10px;} .mb3{margin-bottom:15px;}ほかにもいろいろあります(説明するの飽きた)
参考文献
この記事では書ききれなかったことがここに書いてあります(投げやりかよオイ)
Sassについて - 気まぐれ引きこもりんご80%
Sassの基本機能まとめました - Tree
Sassを使ってCSSを爆速コーディング！Sassの導入方法と使いかた。
gulp を使って自動でsass を自動コンパイルできるようにする最後に
この記事を見て、"いいね！"と思ったら、いいねボタンを押してください。
強制はしませんが、押してくれると筆者もすごく喜びます。ではまたの機会に。次回作にもご期待ください。
- 投稿日：2020-02-11T11:14:10+09:00
未経験から始めるHTML/CSS ~float解除編~
はじめに
2020年2月より未経験ながらHTML/CSSをProgateにて学習を開始し、
その中でHTML/CSSを学習するに当たって私自身が疑問に思ったことを纏めてみました。
今後お互いの学習に役立てれば良いと考えQiitaに投稿を始めました。
今回はその3回目、float解除について説明して行きます。対象者
- ProgateでHTML/CSSを学習中の方
自己紹介
こんにちは。
私は現在27歳で、4年間半導体業界でテストエンジニアとしてSierにて働いております。
この度半導体業界の不景気により仕事がない状態が続いており2月29日を持ちまして退職、
また脱Sierを目指し学生時代に興味があったweb関係の仕事に就こうと考えている者です。その前にfloatとは?
floatの記事については前回書きましたので下記を参照下さい。
未経験から始めるHTML/CSS ~float編~float解除の前に
float解除の説明前にこちらのソースを見てください。
こちらのプログラムは子要素のみにheightを適用し親要素にはheightを適用していません。
さてこのプログラムの実行結果はどうなるでしょうか。index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title> float </title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>style.css.parent{ background-color: red; } .child{ background-color: blue; width: 100px; height: 100px; }下記が実行結果です。親要素にheightを適用していませんが抱合の関係にあるので、
子要素に応じて親要素の高さが変動しています。
では次にfloatを子要素に指定し親要素にheightを指定しなかったらどうなるでしょうか。
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title> float </title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>style.css.parent{ background-color: red; } .child{ background-color: blue; width: 100px; height: 100px; float: left; }下記が実行結果です。何と親要素が消えてしまいました。
実は、floatを子要素に指定し親要素にheightを指定しないと親要素の高さが0になリます。
では親要素に高さを認識させるにはどうしたら良いでしょうか?
そこで出てくるのがfloat解除です。
float解除
前置きが長くなりましたがfloatを解除する3つの方法を説明します。
- float直後の要素にclear:bothを適用。
- 親要素にoverflow:hiddenを適用。
- 親要素にclearfixクラスを適用。
1. float直後の要素にclear:bothを適用
progateのHTML/CSSの単元で出てきますがclear:bothを使用するとそれ以降の要素は
floatの影響がなくなります。一番シンプルですが、人よっては毎回float直後の要素に
clear:bothを使用するのでソースが冗長的で美しくないと感じる方もいるでしょう。index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title> float </title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="parent"> <div class="child"></div> <div class = "floatRelease"></div> <!--毎回書くとソースが冗長--> </div> </body> </html>style.css.parent{ background-color: red; } .child{ background-color: blue; width: 100px; height: 100px; float: left; } .floatRelease{ clear: both; }2. 親要素にoverflow:hiddenを適用
clear:bothより冗長でないですが注意しないといけない点があるので個人的は推奨しません。
overflow:hiddenは子要素が親要素をはみ出した際に表示されないという欠点があるからです。
position: relativeとabsoluteを使用した際に注意が必要です。index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title> float </title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>style.css.parent{ background-color: red; overflow:hidden; } .child{ background-color: blue; width: 100px; height: 100px; float: left; }3. 親要素にclearfixクラスを適用
上記2つとは違い特にデメリットがないので使い易いです。
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title> float </title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="parent clearfix"> <div class="child"></div> </div> </body> </html>style.css.clearfix::after { content: ""; display: block; clear: both; } .parent{ background-color: red; } .child{ background-color: blue; width: 100px; height: 100px; float: left; }おわりに
Progateではfloatの解除はclear:bothが使用されいますが、
web上ではclearfixが多用されていたので解除方法にどういうものがあるか気になり調べました。
clearfixはデメリットがなさそうなので個人的には一番お勧めです。
またCSS3からはflexboxという新しいモジュールがあるので、煩わしいfloatを使わなくて良いので
興味がありましたら調べてみてください。
私の経験が皆さんの役に立てれば幸いです。Twitterもやっています!
もし興味が湧きましたらフォローよろしくお願いします。
