[素材有]CSS+画像で作るスマートフォン向けラジオボタン＆チェックボックス
こんにちは、霙(@xxmiz0rexx)です。 漂う今更感の中、スマートフォンでタップしやすい形のラジオボタンとチェックボックスを作る機会があったのでメモとして残しておきます。 ON/OFFの画像も作ったので、もし使いたい人がいたらご自由にダウンロードしてくださいませ :) 今回目指したのはこんなイメージ。 デフォルトのチェックボックス＆ラジオボタンを使ってみた結果、タップ範囲が狭く選択しづらかったので iOSアプリのように押しやすいUIにしたいと思い、CSS＆画像で作ってみました。 これなら横一列がタップ範囲なので不器用なわたしでも押し間違いをしたり「何これ押せない…！」なんてことが発生しにくく、非常に快適に使うことが出来ました♪ html <form id="infoForm"> <fieldset> <legend>Pray for rain</legend> <ul class="
![[素材有]CSS+画像で作るスマートフォン向けラジオボタン＆チェックボックス](https://cdn-ak-scissors.b.st-hatena.com/image/square/4114ba944fbc4ad7dce3f5e3929f4d782427892b/height=288;version=1;width=512/http%3A%2F%2Fwebimemo.com%2Fwp-content%2Fuploads%2Fe7be25fbc0824211d3f10797e07eeb33.png)
良質なワイヤーフレームを超簡単に製作できるFireworks拡張機能『Placeholder』がめちゃめちゃ便利!!
フリーランスでWEB製作をされている@sou_labさんから ドラッグ＆ドロップするだけでサイズ表記付きの良質なワイヤーフレームが作れてしまう 超便利なFW拡張機能の存在を教えて頂き、実際に使ってみたのでご紹介したいと思います。 FW持ってるけど使ったことない・・という方にも是非読んでいただきたい記事です！！ ワイヤーフレームとは デザインにとりかかる前にサイトの骨組みを視覚化し、 要素の漏れを防いだり、全体のイメージを掴むために用意するものですよね。 実はわたしは今まで作ったことがなかったのですが、 しっかり骨組みをしておけばデザイン時・コーディング時の作業がスムーズに進みますし、作っておいて損はないモノですね。 Placeholderとは そんなワイヤーフレームですが、自分用ならともかく クライアントさんにお見せする場合は、要素ごとにwidthやheightの数値なども記載してあった方
不動産サイトのWEBデザインで一番大事なことは | ウェビメモ
最近、とあることから不動産サイトを眺める機会が増え、不動産サイトとは何たるかを悶々と考えています。 おもに不動産売買、不動産投資についてのサイトをよく見てるんですが、デザインするにあたり どんな要素が必要なのか、構成にルールはあるのか、気になったので自分用にまとめてみました。 一番大事なのは「雰囲気をつくること」 高額な商品を扱う不動産サイト。 やはりそれ相応のふさわしい雰囲気を創り出す必要があると思うんです。 私が特に気を付けたいと思ったのは以下の３つ。 その１：安心感 もうこれはお客さまがいる時点で絶対条件でしょうけれど、 不動産投資のサイトって一歩間違えるととても胡散臭くなるので、扱う文章などにも気を付けたいところですね。 その２：シンプル 不動産購入をする方・投資をする方は、若者よりもある程度年齢を重ねられたお客さまの方がはるかに多いですよね。 購入物件の情報はどこから見る事ができ
せっかく購入したCodaをちゃんと使うために準備したものと覚えておきたいショートカットキー21個のメモ
去年MacBookAIRを購入してから、念願だったMac専用のwebオーサリングツール『Coda』をインストールしたんですが、 DWとの違いにかなり戸惑ってしまいあまり使いこなせていなかった霙（@xxmiz0rexx）です。 使い方さえ覚えてしまえばさらに快適なコーディングライフを送れると思うので、機会を作ってちゃんと覚えてみようと思い記事にしました。 プラグインを入れて快適に使う まずはCodaの環境を整えます。DWではpタグやhタグなどはショートカットキーで挿入していたので、 まったく同じキーではないにしても同じような事ができないかと思い探したところ、Zen-CodingのCoda版プラグインである『TEA for Coda | One Crayon 』を入れれば良いという結論に達しました。 このプラグインを入れておけば、例えばpタグやhタグ、strongタグなどを素早く挿入することが
WordPress管理画面にオリジナルメニューを追加した時の手順メモ
前回もちらっとメモしたんですが、 もっと具体的な内容も覚えておきたいので改めて実際のコードとともに手順をメモしたいと思います。 オリジナルの管理画面を用意しておくと、クライアントさんがサイトの更新を行う場合に安心して更新をお任せできますｗ ゴールはこれ。 不要なダッシュボードウィジェット、左メニューなどをすべて非表示にし、 オリジナルで用意したヘッダー＆メニューを差し込みます。 デフォルトの管理画面は高機能な分、メニューがずらーーーっと並んでおり WEBに詳しくない方にとっては何が何だか分からないものですからね。 ここは一思いにばっさりと切り捨て、クライアント専用にやさしいシンプルな見た目の管理画面を用意してあげることで 大幅に間違いが減りますし、説明の時間も短縮できると考えてます。 ちなみに、上記キャプチャに表示されているメモは『Headache With Pictures』というプラグ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
