★ページトップへ戻るボタンの実装方法：jQuery
先週末まで2週間インターンシップに行っていたのでバタバタしてましたー！やっと落ち着いて来たので久しぶりの更新です。 今回は様々なところで見かける『スクロールして、ページトップに戻るボタン』の作り方です。 超簡単&コピペでOK！ ページトップへ戻るボタンの実装方法：jQuery jQuery初心者さんが、まず1番最初にやりたいのはこの『トップページへ戻るボタン』なはず！！！ なぜなら私がそうだったから！ ！ ボタンを押すとスーっと上に移動してくれる。この動きがたまらなく気持ちいい。 このブログにも最近やっと実装しましたが、クセになりますよね。 ページが縦に長くなりがちな方はぜひぜひ設置してみてくださいませ。 demo このブログがまさにdemoページそのものです！トップページから少しスクロールすると、右下に出てくる水色のボタンです。動きを試してみてください。 『ページトップへ戻るボタン』を知
[css] CSS3時代の上下中央に配置するパターン
最近多用するので…。 要素の全画面化について 先に親になる要素を画面いっぱいに広げる方法について補足しておく。 大きく分けると絶対配置とサイズ指定の２つある。 絶対配置は、position:absoluteを指定した上で ４方向の位置を0（または任意の値）にする。 #wrapper { position:absolute; top:0; right:0; bottom:0; left:0; } サイズ指定は、widthとheightを指定するだけだが、 対象の要素だけでなくその親も高さと横幅がないと指定したサイズにならない。 特に高さについての指定がハマりやすい。 単純にbody直下に要素を配置しただけの場合、 <body> <div id="wrapper"></div> </body> htmlとbodyもheightを指定してないと画面いっぱいに広がらない。 html, body,
![[css] CSS3時代の上下中央に配置するパターン](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
Webデザインの基本原則 「近接、整列、対比、反復」 | DENBI BLOG! ブログ | 熊本電子ビジネス専門学校
今日は、デザインの基本原則を紹介します。 ワープロやプレゼン資料を作る際にも、この４原則を意識しながら制作すると資料が見違えるように良くなりますので、デザイナー志望の人に限らず是非マスターしてください。 目次 近接の原則 整列の原則 対比の原則 反復の原則 ■近接の原則 A ～ Fは画像です（あえて内容は表示していません） そこで、左側の「タイトル１」や「タイトル２」は、A ～ Cのどの画像のタイトルか分かりますか？ 画像の内容が見えれば判断できると思いますが、 これだけでは、ちょっと判断できませんよね？ では、次に右側の「タイトル３」や「タイトル４」は、D ～ Fのどの画像のタイトルでしょうか？ こちらは、画像の内容が分からなくても判断できるのではないでしょうか？ これが良いデザインと悪いデザインの違いです。 近接の原則は、関係ある情報は近づけて配置し、関係ない情報は遠ざけて配置するとい
1ヶ月である程度のWebデザインができるようになった独学勉強法を書いてみる - Yukihy Life
最近はてなブログのカスタマイズ記事ばかり投稿しているゆきひーです。 ４月ぐらいまでは「HTMLって何？」ってレベルだったのですが、この数ヶ月でいろいろと学んできて、素人ではあるもののレスポンシブデザインぐらいまでなら作れるようになりました。 実際に集中して学んだのは１ヶ月ぐらいですが、趣味程度には十分だと思うので、どのようにして学んだのかをまとめてみたいと思います！ Webデザインをある程度できるようになるためのステップ Step1 「Progate」で作りながら学ぶ Step2 「ドットインストール」で総復習&補完 Step3 書籍を数冊読んでできることを確認する Step4 実際に自分のブログに応用してみる その他Webデザインを効率よく学ぶコツ Webデザイン系ブログをFeedlyで定期購読する クロームの拡張ツール クロームのディベロッパーツール Color Pick Eyedro
【成果を上げる色の選び方】色彩心理学から学ぶ サイトカラーの「正解」 | LISKUL
Webサイトの見た目を改善するために、これまでたくさんの「配色デザイン」の本や記事が投稿されてきました。これらの情報を使えばあっという間にサイトの配色を決めることができます。 ただその配色、「自分が好きな色」になっていませんか？ それぞれの商品やサービスの配色には「正解」があります。 今回「サイト」「ロゴ」「コンバージョンボタン」に分けて、それぞれに対して有効な色や法則をまとめてみました。 自分のウェブサイトではどんな色が一番理想的なのか、実例を参考にしながら導き出してみましょう！ また、この記事は無料でPDFとしてダウンロードも可能です。配色デザインを考える際にお手元に置いておくのがおすすめです。 【PDF】【成果を上げる色の選び方】色彩心理学から学ぶ サイトカラーの「正解」>>無料ダウンロード そもそもなぜ「色彩」が大切なのか？ 引用元：Why All Sale Sings Are R
Webデザインのアイデアに困ったら！参考になるさまざまなコンポーネントやレイアウトをまとめた -Call to Idea
Webページによく使用される、アイテムを並べるリスト、ギャラリー、タブ、ナビゲーションといったさまざまなコンポーネントをはじめ、打ち出しコンテンツのレイアウト、サンプルの表示方法、AdWordsの配置、データがない状態のレイアウトなど、Webデザインのアイデアをまとめているサイトを紹介します。
デザイナー向けコーディング講座
主に文書構造理解を進めるためのお話をしています。 そこからHTML5まで合わせてお話しています。
ヘッダーデザインのレイアウト（構成要素の配置）が苦手なら黄金比・白銀比ツールを活用しよう。Photoshop編
HOME ブログ webデザイン , ヘッダー , 画像加工 ヘッダーデザインのレイアウト（構成要素の配置）が苦手なら黄金比・白銀比ツールを活用しよう。Photoshop編 魅せる伝えるヘッダーデザインを作成する5つの工程の2番目、ここでは② 構成要素の配置について解説します。レイアウトが苦手でどうしてもしっくりこないという悩みも黄金比ツールを活用して解決しちゃおう！ ① 基調と概念② 構成要素の配置③ 色彩の統一④ 文章の表現⑤ 細部の作り込み ↑ これじゃーちょっとカッコ悪いですよね・・ ② 構成要素の配置基調と概念に沿った画像をphotoshopで開く。 電脳狂想曲さんのWEBデザインの小技へアクセスし、ヘッダーサイズの横幅・縦幅を入力、黄金比（A4ポスターなどのJIS規格の場合白銀比のが相性が良いかも）にチェックしサクサクラインを引いていく。うまくいかなかったらリセットできます。
すごく役立った！サイト制作でさりげなく使われているCSSテクニックまとめ
作成：2014/04/21 更新：2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 横並び １．今までの回り込み解除 ２．横並びや並び順 ３．均等に並べる／段組み ナビゲーションメニュー ４．多階層 ドロップダウン ５．amazon風 メガドロップダウン ６．ドロワーメニュー コンテンツメニュー ７．モーダルウィンドウ ８．アコーディオン ９．タブパネル テーブル １０．ストライプテーブル １１．レスポンシブ＋テーブル リスト １２．カウント
『アラサーアラフォーにとって居心地のよいデザインとは？』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさま、こんにちは！ 2013年に新卒入社したハヤサカと申します。 現在、大人のブカツbk2というSNSサービスのデザインを担当しています。 今回は担当しているサービスの中で、Amebaユーザーの30代～40代を意識しながら作っているUIデザインについて、スマホアプリを中心にご紹介させていただきたいと思います。 大人のブカツbk2とは大人のブカツbk2は、"趣味でつながる"25歳以上限定のコミュニティサービスです。 「スマホ写真部」や「大人のラーメン部」、「なんか友達少ない部」など個性豊かな4000以上のブカツから自分にぴったりのブカツを見つけて、
[css]画像を使わずにcssだけで矢印を作る方法 | xxxx7
この図のような矢印を、画像を使わずにcssだけで作ってみたいと思います。上のとがった部分と、下の棒の部分を切り分けて作る、というのが基本的な考え方です。 上向き矢印の作り方 まずは、html部分を作ります。といっても、div要素だけです。 <div class="up"></div> 次に、上のとがった部分を作ります。高さ0、幅0の要素に、borderを設定すれば作ることができます。この方法は、以前にも紹介したことがあるので、そのリンクを貼っておきます。[css][/css]折り返しリボンの作り方を解説するよ .up{ position: relative; width:0; height:0; border: 16px solid transparent; border-bottom-color: #999; } この時点では、図のようになっています。上のとがった部分が出来上がっているの
[JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll
デモページ：3番目のパネルを表示 各パネルへの直リンクやURL表示にも対応しています。 One Page Scrollの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.onepage-scroll.js"></script> <link href='onepage-scroll.css' rel='stylesheet' type='text/css'> </head> Step 2: HTML mainはコンテナで、各パネルはse
Photoshopで簡単にギザギザしたアイテムを作る方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーの白浜です。 今回はPhotoshopでギザギザしたアイテムを作る方法をご紹介します。 ジグザグラインの作り方 まずはジグザグミシンで縫ったようなジグザグラインの作り方です。 ラインツールや長方形ツールで細長い線をひきます。 次に「フィルタ」→「変形」→「波形」ツールを使います。 ※この時パスはラスタタイズ化されてしまうので注意。 波型のオプションを上記のように設定します。ポイントは波数を1にすることと、三角波にチェックを入れること。これで均等で角がとがったジグザグになります。 上の設定でできたジグザグはこんな感じです。 このツールの困った点は、ご覧のとおりプレビュー画面に拡大機能がないのでプレビューが意味をなしていないことです。（CS6使用。CCだとどうにかなってたりするかな？） 白色だとよりわかりづらいですね。 一部を新規レイヤーにコピーして、線だけにしてからフィ
CSS(スタイルシート)の基本、小技、テクニック総まとめ
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
画像を使わない擬似フォームUIの作り方 第01回 「CSS3を使った装飾」｜クロノドライブ
ブラウザ標準のフォームUI（チェックボックスやセレクトボックス）のデザインは、標準ゆえに「フォーム」だと分かりやすいデザインですが、どうしてもサイトカラーに合わずに野暮ったい印象になるときがあります。そういった場合にデザインを自由に変更できるといいのですが、フォームUIへのスタイル適用は制限があり、自由に変更できません。 そういったときに、実際のフォームUIを隠し独自のフォームUIを表示し、それに対して行ったアクションを隠してあるフォームUIに反映させる手法があります（ここでは擬似フォームUIと呼びます）。 本コラムでは主にスマートフォン向けにCSS3とJavaScript（jQuery）を使い、画像を使わない擬似フォームUIの作り方を4回に分けて紹介していきます。 ※PCではGoogle Chromeのみ動作確認をしています。 第01回目の今回はCSS3を使った装飾と後ほどjQueryで
Webデザイナーによるカラーコードを使った便利なテクニックあれこれ
By OliBac コンピュータが色に名前を付ける時、数字やアルファベットを6つ並べた1677万7216通りの組み合わせで表される16進数カラーコードが使われます。カラーコードは他のコンピュータ言語と同じく論理的なシステムに基づいて作られるため、Webデザインを行う人間にとって16進数カラーコードを知っておくことは非常に助けになるとして、WebデザイナーのBen Gremillionさんがカラーコードの仕組みや便利なテクニックをまとめているのが「The Code Side Of Color」です。 The Code Side Of Color | Smashing Coding http://coding.smashingmagazine.com/2012/10/04/the-code-side-of-color/ そもそもスクリーン上のカラーは指定がない場合は黒いままで、16進数カラーコ
無料で商用利用可なフリーアイコン素材サイト13選【デザイナー厳選】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの花ちゃんです！ Webサイトのデザインをしていると、アイコンを取り入れる場面がよくあると思います。アイコンには文字だけではわかりにくい情報を、ユーザーに対して直感的に素早く伝える効果があります。また、モチーフを簡略化しているので、限られたスペースでもしっかりその機能を果たしてくれます。 今回は、Webサイトはもちろん、図版や資料作成にも欠かせない、無料で使えるアイコン素材サイトをテイスト別にまとめてみました！ 独学でつまずいていませんか？ Illustratorの使い方を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-css3.jp - このウェブサイトは販売用です！ - スマートフォン 編集者 方法 サイズ 日本 ツール ブラウザ テスト リソースおよび情報
IBM Developer
1216彩票-官网平台