<script type="text/javascript" src="js/jquery.min.js"></script> <script type='text/javascript' src='./js/midnight.jquery.min.js?ver=5.4.1'></script>

フォームのデザインをかっこよくする選択プルダウンのCSSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインの入力項目は利用者の興味を引き付けます。 本記事ではフォームの中でも「選択式プルダウン(SELECT～OPTION)/ドロップダウンリスト」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 プルダウン/SELECT要素(シングル)の見栄えを劇的に良くするCSSデザイン例。ふわっとポップにアニメーションするドロップダウンリスト。See the Pen Custom Select by Yusuf (@yy) on CodePen. ポップでステキなデザインのプルダウン/SELECT要素です。 選択時にふわっとボックスが動くと同時に、選択肢が吹き出し形式で表

シナップの柿内です。 最近、CloudFlareという無料で簡単に使えるCDNサービスが話題を呼んでいます。 CDN（コンテンツ・デリバリー・ネットワーク）とはコンテンツを複数地域の複数サーバーに配置し、ユーザーのリクエストに対して最適なサーバーからコンテンツを配布する負荷分散サービスです。よくオープンソースをダウンロードする時に一番近いミラーサーバーを選択してダウンロードしますが、それをユーザーの操作なしに全部自動で行ってくれると考えれば想像しやすいのではないでしょうか。 本来CDNは大規模なリクエストを円滑に処理するように生まれたサービスなので、小規模なWebサイトで導入する事はあまりありませんでした。それがCloudFlareならば誰でも（後で解説するように利用するためには簡単な条件をクリアする必要がありますが）今日にでも利用する事が可能です。しかも無料で。 同じCDNサービスである

ものごとの本質を大切にする、 イベント&コミュニティープロデュースによって､ 人と社会のより良い循環を生み出す。 それが、わたしたちRoots です。 対話を基本に、 見えない本質的な課題を見つけ出す。 クライアントと同じ温度感をもってゴールへ、 さらには、その先までも共創(共走)してゆく。 隅々まで感情の行き届いた仕事によって生まれる そんな「繋がり」を循環させることが、 Rootsの流儀であり、信念です。

本日、BNN新社さまより「UIデザイナーのためのSketch入門＆実践ガイド（吉竹遼 著）」が刊行されました。 Amazonでのご購入はこちら （Kindle版もご用意しています） せっかくですので、執筆を務めさせて頂いた私の視点から、本書についての見どころを紹介させて頂きます。 どんな本か アプリやWebサービスなどのデジタルデザインにおいて、昨今普及が進んでいるSketchについての使い方を網羅的に解説した本です。Sketchに関する情報は、インターネット上に英語で書かれているものがほとんどのため、基礎を学ぶための環境や、リファレンスとして参照できる資料が少ないのが現状でした。ちなみに日本では電子書籍の「Sketchの基本。」が有名ですね。私自身、お世話になっております。 アップデートが頻繁に行われるソフトウェアの本を紙で出すのは勇気がいりましたが（実際、発売1週間前にバージョン44が

WHY MADE THIS? 今日もたくさんのフライヤーが刷られては捨てられている。 フライヤーはお店やお部屋を彩るインテリアのような存在だけど、 案外粗末にあつかわれている。 ほんとうはクリエイティブがたっぷりつまったアイデアの宝庫。そして、文化の象徴。 そんなフライヤーたちを記憶に残したくて「今日のフライヤー」をつくりました。 FOR DESIGNERS The life of flyers is short. The designs should be treated as a work of art that reflects the society’s style of living and also the cultures, but surprisingly it was often taken for granted and normally will be just th

商品名・シリーズ名・品番・ハッシュタグなど おすすめのハッシュタグ #かわいい #面白文具 #香り付き文具 #使いやすい #腹ペコ文具

WORKS 2021/2/15 Mon アドバンスクリエイト「保険市場」アポイント取得数160％増を実現したデータドリブンなOMOマーケティングとは

アイコンフォント、便利ですよねほんと。もう使わずにはいられない体になってます。 近頃はソーシャルアイコンも充実の一途を辿り。 しかしながら、ソーシャルボタンでもよく使われるはてなブックマークは日本人が対象。 アイコンフォントに含まれているわけもなく、自力でどうにかしてみよう！ということで。 考え得れた手段 自分で作って既存のものへ自分でマージする 自分で作って既存のものへマージしてもらう 全部自分で作る 難易度の低い順番に並べましたがそもそもの難易度が高い…。 作るしかないかーとはてブロゴを眺めていて、閃きました。 はてブのロゴって、文字。 文字ですよね。 はてブのロゴを眺めているさま 何が言いたいかってつまるところ、普通のフォントで代用できるんじゃないの？ということ。 現実的かつ簡単ぽい。 Windows と Mac 共通の欧文フォントをロゴと比べてみる Windows と Mac 共通

※gulp-ejsでのビルドを想定しています。 EJSでできること 数や文字列や配列やオブジェクトの宣言と処理(JavaScriptと同じ) HTMLへの値の展開 ループと条件分岐 外部ファイルの読み込みとパラメータの引き渡し <% %>の種類 <% %> このタグの内側はJavaScriptワールドになる。HTMLとしては出力されない

submitボタンのアイコンにアイコンフォント（Font Awesome）を使う フォームを送信する際にクリックする「サブミットボタン」にアイコンフォント「Font Awesome（Free版）」を使ってアイコンを表示させてみたいと思います。今回表示させたいアイコンは「 （虫眼鏡）」です。 Font Awesomeの仕様が変更になったため、記事の内容を更新しています（v5.0.4以上対応）。こちらから最新のCDNが取得できます。 input要素にアイコンを表示させる サブミットボタンにアイコンを表示させるためには、「input」要素の「value」の値にアイコンのコード（Unicode）をセットします。アイコンのコードはFont Awesomeのページから取得できます。「value」の値にセットするときはコードの頭に「&#x」を、おしりに「;」を追加してください。虫眼鏡のアイコンなら「&

Updated 2015.01.13 / Published 2015.01.13 word-break:break-all;は一切の禁則処理を解除し、どの文字の間でも改行するため、単語の途中や括弧の直前・直後で折り返したり、句読点が行頭にきてしまうことなどがあることから折り返しの制御には好ましくないとされています。望ましい折り返しの制御をしてくれるword-wrap:break-word;(overflow-wrap:break-word;)の用法について紹介します。 折り返しを制御する2つのCSSプロパティ 幅の狭い領域で長い英単語や長いURLの途中で折り返しを制御できるCSSプロパティは、特にスマートフォンなどの小さなディスプレイサイズ向けへの対応を考慮してよく用いられるようになってきています。ただし、CSS3には折り返しを制御できるCSSプロパティが2つ存在し、とてもややこしいので

パララックスをつかったサイトなど、縦長のページが昔に比べれば多くなった感じがしますがその際に、ページ内用のナビを設置する場合があると思います。スクロールした時そのコンテンツのエリアに来たら、ナビをカレント表示させるjsを調べて作ってみました。 参考にしたサイト 作ってみたと言いつつ、大部分が参考サイト通りなので先にご紹介いたします。 jQueryで長いページの区切り（セクション）ごとに背景を変化させる | webOpixel jQueryを使った長い縦スクロールページの現在地による制御 | 2GRAVITY カレント表示でaタグはそのまま とりあえずカレント表示されればOKのタイプ。カレントの箇所もクリックできます。 サンプルページ HTMLの抜粋は以下 <ul id="nav"> <li><a href="#section01">menu<a></li> <li><a href="#se

やりたかったこと メニューリンクによくある、いま自分のいるページ（現在地）へのリンクの文字色やら背景色やらが変わる、例のあれ。 某phpフレームワークでできているサイトでこれを作りたくて、if文なりなんなり書くのかなあ、と考えていたら、jquery でなんともあっさりできました。 コード jquery は読み込んだうえで。 <script> var url = window.location; $('.nav a[href="'+url+'"]').addClass('active'); </script> </head> <ul class="nav"> <li><a href="http://www.test.com/test.html">test</a><li> <li><a href="http://www.test.com/test2.html">test</a><li> </u

CSSは設計手法も大事ですが、どういう単語で名前をつけていくかも大事だと思っています。 個人個人でばらつきが出るところでもありますし、「単語名 英語」で検索をして探した単語を使ったけど若干意味合いが違ったといったこともあると思います。 クラス名を決めるためのリストを見かけることもありますが、英単語の読みは書かれていても意味合いが書かれていることは少ないように思います。 自分の確認用と、チームで製作するさいの基準になるようなものを作りたいと思い、単語とその意味を短くまとめてGitHubにあげています。 CSS クラス名リスト | GitHub 以下投稿時の内容です。 名前をつけることは難しいですが、とても重要なことです。 CSSには設計思想が必要ですが、実践するにあたり、名前と機能の意味がとおり、名前のつけ方にブレがないようにするべきです。 このドキュメントでは、CSSでよく使われる単語を分