ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン
さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。 今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。 改良のポイントは次の通りです。 文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取った
「アンティークの窓を組み合わせて自分で建てた家」が素敵過ぎる！ - ICHIROYAのブログ
家というのは、大工さんに建ててもらうものと思っていた。 だけど、大分の竹職人・経営者の高江さんは、自分でログハウスの家を建ててしまった。 また、大分由布院の森に、ブログ友達のアーティスト、コオロギさんと足達タツヤさんは、土のうでつくるアースバッグハウスを建ててしまった。 そもそも、家というものは、その気になれば、自分で建てることができるらしい。 そんな風に認識を変えたのは最近のことで、自分の家は、どこかの工務店さんが建てた中古の和風の家だし、立地も何の変哲もない住宅街の一角で、上のおふたりのように素敵な森のなかにあるわけじゃない。 実際のところは、「変哲もない」というのも褒めすぎで、家のすぐ近くに、巨大な巨大な球体の貯水槽があり、それがめちゃくちゃ目障りなのだ。 しかも、それは相当老朽化しており、大きな地震でもくれば、破裂して水を吹き出して僕の家まで水浸しにするか、最悪の場合、支えが壊れて
制作途中にお世話になる、ダミーテキスト・ダミー画像のジェネレーターいろいろ
2021年10月21日 便利ツール Webサイトや印刷物の制作中には、とりあえずで入れておく「ダミー」を使用する事が多々あるかと思います。日本ではアタリ・アテなどとも呼ばれますね。それらのダミーテキストやダミー画像を便利に生成してくれるジェネレーターをいくつか紹介します。いろんな種類のジェネレーターやサービスがあるので、うまく利用して時間短縮しちゃいましょう！ ↑私が10年以上利用している会計ソフト！ ダミーテキスト（英文） Lorem Ipsum ダミーテキストの大本命、Lorem Ipsum。Photoshopでも採用されている、「Lorem Ipsum…」から始まる有名なダミーテキストを生成できます。 Dummy HTML snippets for webdesigners HTMLタグ付きのダミーテキストのジェネレーター。左の要素を右側にドラッグ＆ドロップでカスタマイズできます。類
Illustratorでドットモザイク画像を作る方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今回はポップなドットモザイクの画像をIllustratorで作成する方法をメモしておきます。 01:画像を埋め込む 今回はお花の写真を配置しました。リンクは切っておいてください。（パスデータの場合はラスタライズして画像データに変換してください。） 02:画像にモザイクをかける 「オブジェクト」→「モザイクオブジェクトを作成」を選択。（CS3以前では「フィルタ」→「クリエイト」→「モザイク」） こんな感じになります～。 モザイクになったオブジェクトはグループ化されているので、グループ化を解除しておいてください。 03:モザイクタイルを丸ドットにする タイルをひとつ選択して大きさを確認します。 タイル一個の大きさを確認したら、画像全体を選択しなおして、「効果」→「形状に変換」→「楕円形」を選択します。 形状オプションで「値を指定」を選択、幅と高さをさきほど調べたひとつのタイルの幅と高さと同じぐ
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
すべての若い人に読んでほしい、今季のアメリカで最高の「卒業生に贈るスピーチ」 - ICHIROYAのブログ
はてなブックマークを見ていたら、ドロップボックス社ＣＥＯのドリュー・ヒューストン（Drew Houston）氏のMITでの卒業式のスピーチが良かったという記事が人気を集めていて、興味深く読んだ。 「人生のコツはこの３つだけ」Hiro Blog 彼は1983年生まれ、現在30歳である。 若くして大成功をおさめた天才起業家であり、その彼の話なので、もちろん、とても説得力がある。 しかし、もうひとつ、この卒業式シーズン（アメリカの）に、大きな感動を生んだ、卒業生に贈られたスピーチがある。 それは、作家、George Sanuders氏によって、Syracuse Universityで行われたもので、全文がネット上に書き起こされている。（原文はこちら） （Googleで検索すると、なんと何万、何十万件もヒットする。それほど、急速に共有されている） (追記：動画も上がっています：コメントで教えていた
フラットデザインのコツ的なアレ - 納豆には卵を入れる派です。
P4Dで教えていただいたエンジニアさんに聞かれたので、なんか整理しきれてなくてざっくりなんですが、取り急ぎ、なんかそれっぽくなるコツみたいなのを独断と偏見でまとめてみました。 3色〜5色くらいの色を画面の中で均等に使うのおすすめ 作りたいサービスが何で色分けできるか考えます。ちょうどよく3〜5種類くらいのステータスやカテゴリなどがあったら、それに応じて色が変わるとかするとうまくハマる。かも。 Flat UI Colorで色選び http://flatuicolors.com/ という便利なサイトがあって、ここから3〜5色くらい選ぶとよいです。クリックするとカラーコードがコピーされます。あら便利。赤は他の色と仲良くするのが難しめ。 Sassで彩度を抑えると落ち着いた色調になって、使いこなしの難易度が低くなります 上のサイトもそうなんですが、Flat UIによく使われている色は、鮮やかなが多く
平成モルモット - FC2 BLOG パスワード認証
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
Twitter公式の埋め込みガジェットがとっても素敵*二十歳街道まっしぐら
Twitterガジェットです。 「Twitter Widgets」から利用できます。 「自分のTL」「検索結果TL」「ふぁぼTL」「リストTL」の4つが選べます。 自分のTLです。 私みたいにさりげなく自分をアピールしたい方にもってこいですね。 埋め込み例： 検索結果TLです。 これは使い方がかなりありそうです。 たとえば上記画像のように自分のサイトURLの一部をいれておくとTwitterでの反響がわかります。 他には気になるキーワード、たとえば「iPhone」や「Google」などいれておくと、それらの最新情報が流せます。 埋め込み例： ふぁぼTLです。 自分のお気に入りを表示させるガジェット。 他人の面白い発言などをみんなにお知らせできますね。 埋め込み例： リストTLです。 リストを使うことで、自分を含めた他ユーザ交じりのTLが作られますね。 他にも有益な情報を流してくれる人やbot
2013年のリセットCSS。HTML5とCSS3対応！ | ホームページ制作｜大阪・東京
2013年、いよいよHTML5、CSS3がガンガン活用されてきました。 最近はCMSでWebサイトを作成することが多いのですが、やはり、ゼロからコーディングする事もあります。そこで、今まで使っていたリセットCSSを見直し、もっと効率良く作業できるようカスタマイズしました。ブラウザごとの違いをリセットするためのCSSに、よく使うCSS3をコメントアウトで入れておきました。 CSS3は、アニメーション系以外で頻繁に使うもの、テキストシャドウ、ボックスシャドウ、ボックスシャドウ内側、角丸、トランジション、透明、背景のみ透明、グラデーションのコードと、おまけでスマホ対応時の記述を書いておきました。使わなかったものは、サイト制作後に、消すだけです。 また、Float解除時に使う、「 clear:both; 」と、 背景色・背景画像を残したい時に使う「 .clearfix 」も書いておきました。 .
URAMAYU
19年ほど、自分の日常やウェブ系のネタやガジェット情報を、面白くさらりと読める、ささやかなエンターテイメントを目指して書いているブログです。2024年初にブログテンプレートが壊れて見づらくなりました。つらい。 こんな写真や、 こんな写真がHDR写真です。 まるでCGみたいな、または妙に写実的な絵画みたいな写真です。 このようなHDR写真がどういう仕組みで出来ているのか、そしてどうやって作成するのか、解説していこうと思います。 HDRとは、High Dynamic Rangeの略で、1枚の画像の中で白トビや黒つぶれを無くして、明るいところと暗いところを同時に階調を残して表現することができる写真の表現技法です。 暗い写真と明るい写真を別々に用意して、いいとこ取りして合成するというものです。 iPhone 4からカメラの標準機能としても備わりましたね。 HDRに向いている写真は以下のようなもの。
iPhoneサイト制作（スマートフォンサイト制作）最適化のために最低限必要なreset.cssをつくってみよう | HTML5でサイトをつくろう
iPhoneサイト制作（スマートフォンサイト制作）をする上で、ソースの無駄な記述を最低限に抑え、通信速度を上げることが「最適化」へとつながります。 スマートフォンサイト用に最適化したcssを制作する場合、reset.cssの記述を減らすことで、重複する命令を減らして、読み込みのスピードを上げることができます。 今回はスマートフォンサイトを制作する上で、最低限必要となるreset.cssの記述について紹介します。 iPhoneサイト制作（スマートフォンサイト制作）にreset.cssは必要？ そもそもreset.cssは各ブラウザ(IE・FireFox・safariなど)のブラウザ間のデフォルトのCSSの違いをなくすために読み込むものであり、必ずしもコーディングの際に必要となるものではありません。 PCサイトの場合は様々なブラウザやそのバージョンによって独自のデフォルトスタイルがあるため、r
【スマートフォン向け】新規でサイトを作るのに使えそうなの一式。 - CSS HappyLife
前回の更新日が見たくない程に時が流れている今日この頃・・・。 ブログを更新するモチベーションが中々上がらなかったんですが、まだ、だらだらでも良いから書いていきたいなと言う気持ちは有るんです。えぇ。 こんだけ更新が滞ってても、Twitterとかで時々ブログ読んでますって言ってもらえたり、最近なら「今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。」で、【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1 を紹介してもらったりしてうれしい半面、更新して無いなーと、何とも言えない気持ちになったり。 なので、これからはちょろっとでもネタが有れば更新していきたいなーと。 何をモチベーションに更新するかはまだ見つかってないけど＞＜ さて、そんな訳で、今回はスマートフォン向けの新規でサイトを作るのに使えそうな感じの一式です。 【スマートフォン向け】新規でサイトを
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
ore-memo.com - このウェブサイトは販売用です！ - ore memo リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
めんどうな作業がわずか数秒に！新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成
お客さんから送られてきた、Excelデータからせっせとリストや表のHTMLをコーディングしているあなた！そろそろ手がが疲れてきていませんか？ そんなあなたは、この記事で紹介するExcelテクニックをぜひ覚えてください。 面倒な作業が、わずか数秒で終わります！ Excelを使った高速HTML生成 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います！ DreamweaverでもCSVファイルを取り込むことはできるのですが、<dl>タグでマークアップしたい時とか、カスタマイズしたい場合は、これから紹介するExcelを使った方法が簡単で、効果的です。 さぁ、↓のようなお客さんから送られてきたExcelデータから ... こんな感じの、<dl>タグでマークアップされたHTML生成する流れを説明します。データ数はうんざりするくらいあると思ってください。 Let's Excel 1)
HTMLソースも分かりやすく | Travelogue
他の人が作ったHTMLページに変更を加えるような仕事をするとき、最初に制作を担当した人が、HTMLやCSSをきちんと整ったルールで綺麗に作ってくれていると、とても作業がはかどります。 逆に、メチャクチャで意味不明なHTMLやCSSの場合、予定より大幅に作業が遅くなってしまうこともあります。 仕事で作るWebサイトは、納品した後は他の人の手に渡ることも考えられるわけなので、ブラウザでの表示だけではなく、中身のHTMLソースも整理整頓されていて分かりやすいほうが、メンテナンス性の向上やミス防止に役立つという点で、クオリティアップと言えるでしょう。 効率よくHTMLやCSSを整理する方法についていくつか例を挙げます。 HTMLにソースフォーマットの適用 Dreamweaverには「ソースフォーマットの適用」という便利な機能があります。 これは、後からでもHTMLソースを整形することができる機能で
ちょっとまてｗｗｗｗｗｗ今気付いたけどｗｗｗｗｗｗｗはなまるうどんのエイプリールフールサイトのソースｗｗｗｗｗｗｗｗ
ちょっとまてｗｗｗｗｗｗ今気付いたけどｗｗｗｗｗｗｗはなまるうどんのエイプリールフールサイトのソースｗｗｗｗｗｗｗｗ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NameBright - Coming Soon
新着記事
