- 投稿日:2020-02-14T23:13:27+09:00
背景と背景の隙間
iSaraの模写していまして、
background-imageとbackground-color(オレンジ)の
間になぜか隙間ができます…
なぜでしょうか。一時期は
body{
margin: 0;
}
したら隙間なくなって喜んでいたのですがどこそこいじっていたら
いつの間にかまた隙間が…教えてください。よろしくお願いします。
- 投稿日:2020-02-14T22:54:41+09:00
Djangoでレンタリングするhtmlを共通化する
概要
<header>
や<footer>
、jsやcssの参照先を定義した<link>
や<script>
をhtmlファイル単位で書いていたら保守性が低下する。
thymeleafの様にLayout Dialect
で他のhtmlファイルを引用することはできないのか。
調べてみたところdjangoにはテンプレートの継承の概念があるのでこれを使うこととする。Djangoのテンプレート(html)の共通化と継承について
htmlファイルの継承関係
参照元には共通化したhtmlタグを記載し、参照元によって切り替わる部分にはテンプレートタグ
{% block <ブロック名> %}~{% endblock %}
を挿入するparent.html<!DOCTYPE html> <html> <head> </head> <body> {% block mainblock %} (1) {% endblock %} </body> </html>参照先にはテンプレートタグ
{% extends "htmlファイル名" %}
を記述し、切り替える内容にテンプレートタグ{% block <ブロック名> %}~{% endblock %}
を挿入する
extendsに指定するhtmlファイル名にはdjangoで作成されたtempleteディレクトリ配下からのフルパスを指定する。child.html<!DOCTYPE html> {% extends "pull/parent.html" %} (2) {% block mainblock %} (3) <div> <span>hello python!!</span> </div> {% endblock %}(1).参照先によって切り替えるエリア。blockは複数指定できる。
(2).参照するhtmlファイルを指定する。
(3).参照元に挿入したいエリアを書く。レンタリング後
<!DOCTYPE html> <html> <head> </head> <body> <div> <span>hello python!!</span> </div> </body> </html>感想
- thymeleafだと参照元のhtmlタグにて宣言が必要だが、djangoではその必要がない。参照先htmlで使用するテンプレートを指定するだけで、理解が浅い私にもわかりやすかった。
- 切り替えたい部分をテンプレートタグで囲むだけでよいのがとても分かりやすい。thymeleafでは切り替えたいhtmlタグに
layout:fragment
を書いて切り替えるので、埋め込み用のタグが必要。- java育ちのため継承と聞くと拡張したくなる。継承テンプレートを継承したテンプレートを参照することができるのか、できるけどそんなことしてよいのか・・・。暇があるときにでも試してみる。
- 投稿日:2020-02-14T19:05:03+09:00
テーブルを”楽に”角丸にする
基本的なやり方
See the Pen WNvrzav by sphenisc (@sphenisc) on CodePen.
ふつうのテーブルに
border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden;を付けるだけでいいです。
ただ、IEではうまくいかないらしい。もっと楽に
See the Pen dyoGmrq by sphenisc (@sphenisc) on CodePen.
ふつうのテーブルを角丸のラップで包んで角を消す方法です。
この方法の良いところは既に作った後のテーブルをtbl_wrapで包むだけで角丸に加工できることです。
- 投稿日:2020-02-14T16:01:36+09:00
ホバーすると押下できるボタン
前置き
昔 https://codepen.io/parcon/pen/obEReY/
これの一番右のボタンを作ってくれと言われたのですがテキストをHTMLではなく:beforeのcontentに入れないといけないのがめんどくさかったのでCSSをいじらないでいいものを作りました。簡単バージョン
- 投稿日:2020-02-14T12:14:58+09:00
リンク画像にマウスホバーすると画像がふわっと(重要)変化する方法
これからすること
ユーザビリティの観点から、リンクできる画像やボタンなどのパーツには ”リンクできそう” な見た目や演出が要求されるのですが顧客受けが良いのか
画像にマウスのカーソルを乗せるとふわっと変化する
を求められる場面が結構あります。
ホバーした時に画像を変えるだけなら$(function(){ $('a img').hover(function(){ $(this).attr('src',$(this).attr('src').replace('_off','_on')); },function(){ $(this).attr('src',$(this).attr('src').replace('_on','_off')); }); });img01_on と img01_off という2種類の画像を用意して JSに ↑ を書くだけで対応できるのですがふわっとすることなく一瞬で変わってしまします。
解決方法(JS不要)
See the Pen poJgWeQ by sphenisc (@sphenisc) on CodePen.
CSSでホバーしていない状態の画像を上から被せておき、ホバーするとimgタグで入れた方の画像が現れる仕組みになっています。
transition: all 1s;の部分をいじれば変化のさせ方を変えることができます。
ul li a:hover::after { opacity: 0; }の部分に
height:0;
を追加するだけでカーテンが上がるような動きにできます。
- 投稿日:2020-02-14T12:00:40+09:00
JSで要素間を線で繋いだり動かしたりライブラリ調査@202002
JSでオブジェクト間に線を引きたい調査メモ
diagramflowjs
削除や追加、リネームなど機能が豊富な感じで実用向けな感じ
https://lambot.blob.core.windows.net/github/diagramflowjs/index.html
SimpleFlowchart
バインバイン動く
svg.connectable.js
ソースコードなどが合って使いやすい
http://jillix.github.io/svg.connectable.js/
svg.draggy.js
SVGドラック簡単に追加できて便利
http://jillix.github.io/svg.draggy.js/
leader-line
結構いろんな線があるのでウェブで線を引きたいときには使いたい感じ
- 投稿日:2020-02-14T10:20:38+09:00
●リスト の"●"を疑似要素にしてカスタマイズする
問題点
こんなリストがあったとします。
- リスト1
- リスト2
- リスト3
みなさんは●の部分の色を変えたいと思った時どうしているでしょうか。
<li><span>●</span>リスト1</li>こんな感じでspanにCSSで色を付けたりしている方も多いと思います。
しかしこのやり方だとサイズの微調整が難しかったり、微妙に上や下にずれたり、HTMLコードが煩雑になったりして難点も多いです。クラスをつけて疑似要素にする
See the Pen GRJovNR by sphenisc (@sphenisc) on CodePen.
●をつけたいリストにclass名をつけてCSSで疑似要素として●を付けています。
後から■や画像に変えるのもCSSから一気にできるので楽ちんです。
- 投稿日:2020-02-14T09:50:54+09:00
行数が決まっていないテキストを ”上下中央揃え” にする
- 投稿日:2020-02-14T07:42:00+09:00
HTML + CSSでリアルなチョコレートを作る
本日はバレンタインということで、チョコレートを作りました(CSS的な意味で)。今回は
box-shadow
を多用して作っています。最近話題のNeomorphismもbox-shadow
を使って陰影を実装できますが、その参考になるかもしれません。See the Pen MWwaxqp by Nishihara (@Nishihara) on CodePen.
概要
矩形のブロックが基本構成なので、
box-shadow
を使って陰影を作りました。明るいbox-shadow
と暗いbox-shadow
を重ねることでハイライトと影を表現します。div
要素に加え、擬似要素にもbox-shadow
を使っているので、けっこう重ね掛けしています。今回は装飾に
text-shadow
も使って内エンボス加工風の文字も添えました。45度の突き合わせ
こだわったのは、角の部分です。斜め45度で突き合わせるのですが、普通に
box-shadow
を組み合わせてもパキッといきません。そこで、
mask-image
とlinear-gradient()
を使って、斜めのマスクを作成します。マスクを使って左斜め上と右斜め下のパーツに分けてくっつけて45度の突き合わせを実現したしています。マスクの端部を少しグラデーションさせてパキッとはしつつも、鋭角になりすぎないようにしています。今思えば、
border
とblur()
を使えばもっと手軽に実装できたかもしれません。mix-blend-modeとmix関数の活用
描画負荷は少し高くなりますが
mix-blend-mode
も活用しています。光が当たっている部分はscreen
を、影の部分にはmultiply
を使っています。また照りや影は、真っ白や真っ暗ではなく、実際には物体が持つ色を含んでいます。SCSSの
mix()
関数を使うことでチョコレートの色を含んだ反射光や影をつけました。作り方
では、作り方を解説していきます。1つのブロックに注目して進ます。なお、チョコレートの色は全体ラッパー要素である、
<div class="chocolate">
で指定しています。<div class="block block1"> <div class="outerBottomRight"></div> <div class="outerTopLeft"></div> <div class="innerBottomRight"></div> <div class="innerTopLeft"></div> <div class="edge"></div> </div>.block { width: 130px; height: 100px; position: relative; overflow: hidden; &:before { content: ""; display: block; width: 80px; height: 50px; position: absolute; top: 25px; left: 25px; box-shadow: inset 3px 5px 10px 3px rgba(mix($base, #000, 55%), 0.5); mix-blend-mode: multiply; } }1つの大きさは130px×100pxです。疑似要素で中に二周りほど小さい四角を作り、内側にシャドウをかけています。これだけだとただの箱です。ぽっこりと膨らんだ表現は外側と内側の2つの要素に分けて作っています。
外側の膨らみを作っていく
左上と右下に分けて作っています。
<div class="outerBottomRight"></div> <div class="outerTopLeft"></div>.outerTopLeft, .outerBottomRight { position: absolute; top: 0; left: 0; width: 130px; height: 100px; &:before { content: ""; display: block; position: absolute; top: 10px; left: 10px; width: 110px; height: 80px; } &:after { content: ""; display: block; position: absolute; } }ここでは共通部分を定義しています。大きさはブロックと同じですが、疑似要素はさきほどの内側の四角よりは大きい、一回り小さいサイズです。
.outerTopLeft { mix-blend-mode: screen; -webkit-mask-image: linear-gradient( -0.63rad, transparent 0 50%, black 51% 100% ); &:before { box-shadow: 0 0 3px 9px rgba(mix($base, #fff, 85%), 1); } &:after { top: 10px; left: 10px; width: 110px; height: 80px; border-radius: 3px; box-shadow: -5px -5px 3px 1px rgba(mix($base, #fff, 100%), 1), inset 1px 1px 3px 1px rgba(mix($base, #fff, 70%), 1); } }ここで、さきほどの書いた45度の突き合わせを使っています。
-webkit-mask-image: linear-gradient(-0.63rad, transparent 0 50%, black 51% 100%);
で擬似要素にかけたbox-shadow
の左上半分だけが表示されます。縁の部分にもinsetでわずかに白いハイライトいれることで、角が少し丸みをおびたように見えます。.outerBottomRight { mix-blend-mode: multiply; -webkit-mask-image: linear-gradient( -0.63rad, black 0 49%, transparent 50% 100% ); &:after { top: 0; left: 0; width: 130px; height: 100px; mix-blend-mode: screen; box-shadow: inset -2px -2px 3px 2px rgba(mix($base, #fff, 100%), 1); } &:before { box-shadow: 0 0 3px 9px rgba(mix($base, #fff, 55%), 1), inset 0 0 1px 2px rgba(mix($base, #fff, 50%), 1); } }同じようにして、右下も作ります。
内側を作っていく
外側ができたので、内側も作っていきます。基本的には同じ手法になります。
.innerTopLeft, .innerBottomRight { position: absolute; top: 0; left: 0; width: 130px; height: 100px; -webkit-mask-size: 100%; &:after, &:before { content: ""; display: block; position: absolute; top: 25px; left: 25px; width: 80px; height: 50px; } }共通部分を作り、
.innerTopLeft { mix-blend-mode: multiply; -webkit-mask-image: linear-gradient( -0.58rad, transparent 0 50%, black 52% 100% ); &:before { width: 90px; height: 60px; top: 20px; left: 20px; box-shadow: 0 0 3px 3px rgba(mix($base, #fff, 55%), 1); } &:after { box-shadow: 0 0 1.5px 6px rgba(mix($base, #999, 50%), 1); } }左上の影を入れ…
.innerBottomRight { mix-blend-mode: screen; -webkit-mask-image: linear-gradient( -0.58rad, black 0 48%, transparent 50% 100% ); &:before { box-shadow: 0 0 1.5px 6px rgba(mix($base, #fff, 85%), 1); } &:after { height: 53px; box-shadow: inset -2px -2px 3px 1px rgba(mix($base, #fff, 65%), 1); } }右下にはハイライトを入れます。これで、だいたいできました。
斜めのエッジにハイライトを加える。
左上の斜めの辺が一番光を強く受けるのでハイライトを加えます。
.edge { width: 12px; box-shadow: 0 0 2px 1px rgba(mix($base, #fff, 15%), 1); transform: rotate(0.75rad); mix-blend-mode: screen; position: absolute; top: 6px; left: 0; }これでブロックの完成です!
最終調整
あとは、これをで15個並べていきます。
<div class="chocolate"> <div class="block block1"> <div class="outerBottomRight"></div> <div class="outerTopLeft"></div> <div class="innerBottomRight"></div> <div class="innerTopLeft"></div> <div class="edge"></div> </div> <div class="block block2"> <div class="outerBottomRight"></div> <div class="outerTopLeft"></div> <div class="innerBottomRight"></div> <div class="innerTopLeft"></div> <div class="edge"></div> </div> <div class="block block3"> <div class="outerBottomRight"></div> <div class="outerTopLeft"></div> <div class="innerBottomRight"></div> <div class="innerTopLeft"></div> <div class="edge"></div> </div> <div class="block block4"> <div class="outerBottomRight"></div> <div class="outerTopLeft"></div> <div class="innerBottomRight"></div> <div class="innerTopLeft"></div> <div class="edge"></div> </div> <div class="block block5"> <div class="outerBottomRight"></div> <div class="outerTopLeft"></div> <div class="innerBottomRight"></div> <div class="innerTopLeft"></div> <div class="edge"></div> </div> <div class="block block6"> <div class="outerBottomRight"></div> <div class="outerTopLeft"></div> <div class="innerBottomRight"></div> <div class="innerTopLeft"></div> <div class="edge"></div> </div> <div class="block block7"> <div class="outerBottomRight"></div> <div class="outerTopLeft"></div> <div class="innerBottomRight"></div> <div class="innerTopLeft"></div> <div class="edge"></div> </div> <div class="block block8"> <div class="outerBottomRight"></div> <div class="outerTopLeft"></div> <div class="innerBottomRight"></div> <div class="innerTopLeft"></div> <div class="edge"></div> </div> <div class="block block9"> <div class="outerBottomRight"></div> <div class="outerTopLeft"></div> <div class="innerBottomRight"></div> <div class="innerTopLeft"></div> <div class="edge"></div> </div> <div class="block block10"> <div class="outerBottomRight"></div> <div class="outerTopLeft"></div> <div class="innerBottomRight"></div> <div class="innerTopLeft"></div> <div class="edge"></div> </div> <div class="block block11"> <div class="outerBottomRight"></div> <div class="outerTopLeft"></div> <div class="innerBottomRight"></div> <div class="innerTopLeft"></div> <div class="edge"></div> </div> <div class="block block12"> <div class="outerBottomRight"></div> <div class="outerTopLeft"></div> <div class="innerBottomRight"></div> <div class="innerTopLeft"></div> <div class="edge"></div> </div> <div class="block block13"> <div class="outerBottomRight"></div> <div class="outerTopLeft"></div> <div class="innerBottomRight"></div> <div class="innerTopLeft"></div> <div class="edge"></div> </div> <div class="block block14"> <div class="outerBottomRight"></div> <div class="outerTopLeft"></div> <div class="innerBottomRight"></div> <div class="innerTopLeft"></div> <div class="edge"></div> </div> <div class="block block15"> <div class="outerBottomRight"></div> <div class="outerTopLeft"></div> <div class="innerBottomRight"></div> <div class="innerTopLeft"></div> <div class="edge"></div> </div> <div class="overlay"></div> </div>
display: flex
で配置しています。下側と右側にborder
で厚みを加えています。.chocolate { width: 656px; height: 306px; background-color: $base; border-bottom: 6px solid mix($base, #000, 55%); border-right: 6px solid mix($base, #000, 45%); border-radius: 4px; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; position: relative; &:before { content: ""; display: block; position: absolute; z-index: -1; top: 15px; left: 640px; width: 10px; height: 270px; box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.6); } &:after { content: ""; display: block; position: absolute; z-index: -1; top: 300px; left: 10px; width: 640px; height: 0; box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.5); } }最後にオーバーレイ要素で全体的な濃淡の差を少し加えます。リアル感が少しでます。
.overlay { position: absolute; width: 650px; height: 300px; background-image: radial-gradient( ellipse at 5px 0px, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15) ); &:after { content: ""; position: absolute; width: 650px; height: 300px; mix-blend-mode: lighten; background-image: radial-gradient( circle at 70px 40px, rgba(255, 255, 255, 0.05) 5%, rgba(255, 255, 255, 0) 40% ); } }あとはよしなに配置すれば完成です。
おわりに
四角い矩形で比較的つるっとした表面なので、簡単に作れるかなって思っていましたが、やはりそれなりに時間はかかりました。
box-shadow
の良い練習になりました。
- 投稿日:2020-02-14T00:24:18+09:00
お絵かきできるSNSを作りたい!4
今回は少しでもアプリに近づけるためにmanifest.jsonを追加したいと思います。
これを追加することでAndroidでページを開いた際、ホーム画面にタイルを置きませんか?とメッセージを表示することが出来るんだとか。
場所はHEADの中に一行以下の記述を書くだけです。
<link rel="manifest" href="manifest.json">manifest.jsonの中身は↓こんな感じです。
{ "lang": "ja", "name": "sakura", "short_name": "お絵かき", "icons": [{ "src": "icon.png", "sizes": "129x129", "type": "image/png" }], "start_url": "https://127.0.0.1/", "display": "standalone" }言語、アプリ名・短縮アプリ名とタイルに置く画像を指定します。
start_urlはサーバがないので適当です。最後に自分がやりたそうにしていることをまとめておきます。
・PWA
・線の太さを変える
・線の色を変える
・画像を保存
・レイヤー
・戻る(Ctrl+Z)
・進む(Ctrl+Y)
・Webプッシュ通知対応
・好きな画像を下絵にしてトレースできるようにする