サイトをリニューアルしました。
当サイトのデザインテーマを一新して、リニューアルしました。
今回は、非常にシンプルな構成にしています。
当サイトのデザインテーマを一新して、リニューアルしました。
今回は、非常にシンプルな構成にしています。
フォーム内のテキストフィールドなどのパーツデザインのカスタマイズのまとめです。
サンプルはこちら
デザインは基本的にCSSのみで行なっています。セレクトボックスの下向き矢印のみSVG画像を使用しています。
フォームのHTMLはこちら。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<form> <input type="text" placeholder="テキストフィールド"> <br> <br> <textarea placeholder="テキストエリア"></textarea> <br> <br> <select> <option value="0">セレクト1</option> <option value="1">セレクト2</option> <option value="2">セレクト3</option> </select> <br> <br> <label class="option"><input type="radio" name="radio" value="0"><span><i></i></span>ラジオボタン1</label> <label class="option"><input type="radio" name="radio" value="1"><span><i></i></span>ラジオボタン2</label> <label class="option"><input type="radio" name="radio" value="2"><span><i></i></span>ラジオボタン3</label> <br> <br> <label class="option"><input type="checkbox" name="checkbox" value="0"><span><i></i></span>チェックボックス1</label> <label class="option"><input type="checkbox" name="checkbox" value="1"><span><i></i></span>チェックボックス2</label> <label class="option"><input type="checkbox" name="checkbox" value="2"><span><i></i></span>チェックボックス3</label> <br> <br> <input type="button" value="汎用ボタン"> <input type="submit" value="送信ボタン"> </form> |
CSSはこちら。ラジオボタン、チェックボックスでは本来のパーツを非表示にして、<span>タグで独自のパーツを作成しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
body { font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Verdana, Meiryo, sans-serif; } input[type=text], input[type=email], input[type=password], input[type=button], input[type=submit], textarea, select { box-sizing: border-box; font-size: 16px; line-height: 30px; outline: none; border: none; margin: 0px; border-radius: 5px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type=text], input[type=email], input[type=password], select, textarea { background-color: #eeeeee; } input[type=text], input[type=email], input[type=password], textarea { line-height: 20px; } input[type=text], input[type=email], input[type=password] { height: 30px; text-indent: 10px; padding: 5px 0px; } input[type=button], input[type=submit] { display: inline-block; text-align: center; color: #ffffff; cursor: pointer; padding: 0px 10px; background-color: #666666; transition: 0.25s opacity ease; } input[type=button]:hover, input[type=submit]:hover { opacity: 0.75; } label.option { margin-right: 20px; } label.option input[type=radio], label.option input[type=checkbox] { display: none; } label.option input[type=radio] + span, label.option input[type=checkbox] + span { display: inline-block; position: relative; width: 20px; height: 20px; vertical-align: middle; cursor: pointer; margin-right: 5px; background-color: #eeeeee; } label.option input[type=radio] + span { border-radius: 50%; } label.option input[type=checkbox] + span { border-radius: 5px; } label.option input[type=radio] + span i, label.option input[type=checkbox] + span i { display: block; position: absolute; opacity: 0; transition: 0.25s opacity ease; } label.option input[type=radio] + span i { width: 10px; height: 10px; left: 5px; top: 5px; background-color: #666666; border-radius: 50%; } label.option input[type=checkbox] + span i { width: 5px; height: 10px; left: 6px; top: 1px; border-right: 3px solid #666666; border-bottom: 3px solid #666666; transform: rotate(45deg); } label.option input[type=radio]:checked + span i, label.option input[type=checkbox]:checked + span i { opacity: 1; } select { height: 30px; padding: 0px 40px 0px 10px; background-image: url(images/arrow-select.svg); background-repeat: no-repeat; background-position: right 10px center; background-size: auto 10px; } select::-ms-expand { display: none; } textarea { padding: 5px 10px; } |
高機能アニメーション用ライブラリ「TweenMax」を使ってみました。
JavaScriptによるアニメーションのライブラリはいくつかありますが、その中でも「TweenMax」はパフォーマンスも高く、機能も豊富です。
サンプルはこちら
単純なアニメーションであれば、下記のように書くことができます。
1 2 |
//TweenMax.to(要素, 秒数, プロパティ); TweenMax.to("#box1", 1, {scale:2}); |
もう少し複雑なアニメーションの場合には、TimelineLiteクラスを利用したほうが良いかもしれません。
1 2 |
var tl = new TimelineLite(); tl.to("#box2", 1, {scale:2}).to("#box2", 1, {rotation:90}).to("#box2", 1, {scale:1}); |
TimelineLiteクラスでは、メソッドチェーンで連続したアニメーションを作成できます。
上記では「TweenMax」「TimelineLite」を使っていますが、その他に「TweenLite」「TimelineMax」があります。
名称の通りMaxが付く方が全機能版で、Liteは軽量版になります。
SVGやCanvasにも使えるので、アニメーションの作成には重宝しそうです。
Drupal8でテーマ作成時などに、Twigのキャッシュを無効化する際のメモです。
次の2点のファイルに、それぞれ記述します。
sites/default/settings.php
1 2 |
$settings['container_yamls'][] = DRUPAL_ROOT.'/sites/development.services.yml'; $settings['cache']['bins']['render'] = 'cache.backend.memory'; |
sites/development.services.yml
1 2 3 4 5 6 7 |
cache.backend.memory: class: Drupal\Core\Cache\MemoryBackendFactory parameters: twig.config: debug : true auto_reload: true cache: false |
上記を記述後に「管理 > 環境設定 > パフォーマンス」ページで、一度だけキャッシュをクリアーする必要があります。
ベクターベースのSVG画像は、ディプレイの高解像度化が進む中、今後より重要になっていきそうです。
SVG画像自体はイラストレータなどベクターグラフィックのソフトで作成し書き出すこともでき、また単純な図形であれば、XMLにより直接記述することも可能です。
SVG画像の強みとしては、JavaScriptで操作することもできるため、画像内のパーツに対して個別にアニメーションを加えることも可能です。
JavaScriptで操作の際に、HTMLに直接SVGを記述するインライン形式では簡単にjQueryから操作できますが、objectとして埋め込まれたSVGに対しては、少しだけ工夫が必要です。
サンプルはこちら
下記は「test.svg」という円のみ描かれた単純なSVG画像で、円をマウスオーバーによって透明度を変化するスクリプトです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(function() { $("#test").on("load", function() { //object読み込み後に実行 var rect = $("#test").contents(); //objectで埋め込まれたSVGの内容を取得 var circle = rect.find("#circle"); //SVGの中の円を取得 circle.on({ "mouseenter": function() { $(this).css({opacity:0.5}); //マウスオーバーで透明度を0.5に }, "mouseleave": function() { $(this).css({opacity:1}); //マウスアウトで透明度を1に } }); }); }); |
「test.svg」ファイルの中身はこちら
1 2 3 |
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <circle id="circle" fill="#333333" cx="50" cy="50" r="50"/> </svg> |
注意点としては、objectの内容を読み込んだ後での実行が必要なことと、「.contents()」にてobjectの内容の取得が必要です。