Sign up or Sign in to view personalized recommendations, follow creatives, and more.
Dashboard - Sai Nihas
Sign up or Sign in to view personalized recommendations, follow creatives, and more.
[JS]スクリプト初心者でも簡単！レスポンシブ対応のナビゲーションやコンテンツを横から表示するスクリプト -Slidebars
最近よく見かけるトレンドの一つ「Off Canvas」、コンテンツの横からナビゲーションやコンテンツをアニメーションでスライド表示するjQueryのプラグインを紹介します。 デモページ：幅780pxで表示 Slidebarsの使い方 Step 1: 外部ファイル 当スタイルシートをhead内に、jquery.jsと当スクリプトを</body>の上に記述します。 <head> ... <link rel="stylesheet" href="slidebars.min.css"> <head> <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="slidebars.min.js"></script> </body> St
Off Canvas Menu with Animated Links
Description Learn to make a simple off canvas mobile navigation with delayed link animation. The links have a simple transition effect of fading in from right to left when the navigation is toggled. But the animation occurs in a chained way where the links animate one after the other. This is done by adding a transition-delay to every link.
もはやStingerには見えない！参考にしたいWordPressカスタマイズブログ集
巷で話題のWordPress無料テーマ『Stinger』。このブログも愛用させて頂いてますが、Stingerを愛して止まないカスタマイズブロガーが大量発生中です。カスタマイズの参考にしたくても、たくさんStingerブログが増えすぎて、探すのが大変になってきました。 ということで今回は、数あるStingerブログの中から厳選した“素敵すぎるStingerブログ”をご紹介します。 中には「これ本当にStingerなの？」と思うほどカスタマイズされたブログもあります。それでは、オリジナリティ溢れる素敵なStingerブログをご覧あれ！ スポンサーリンク Stinger上級者ブログ編 ENJILOG（エンジログ） おすすめ情報ブログ ENJILOG（エンジログ） まずはこの人！Stinger制作者、@ENJILOGさんのブログ。 今さら説明する必要はありませんね。Stingerテーマを使ってみた
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
国内外のフリー画像素材サービスまとめ48サイト（2013年冬版）｜男子ハック
@JUNP_Nです。毎年恒例の画像素材サービスのまとめ記事。昨年は34サイトでしたが、今年は14サイト増えて48サイトです。利用規約等については各サイトを確認のしてから、ご利用ください。
女性誌にみる女性向けデザインを研究したまとめ
どうも、シンプルやかっこいいWebデザインよりも甘いガーリーテイストのWebデザインが好きなガリザワです。 女性向けのデザインをする時に、女性ファッション誌を参考にすることがあります。しかし一概に女性ファッション誌と言っても数多くありその発行されている雑誌の種類は100種類もあります。そんな中で、主な女性ファッション誌の傾向とデザインの分析をまとめてみました。 女性ファッション誌エディトリアルデザインに学ぶ 女性ファッション誌には、WEBデザインには無い女性デザインの雰囲気を感じれる、WEBサイトではあまり見かけないようなデザインパーツなんかも数多くあるので、デザインをするときに参考にしている。 特に女性向けのデザインをするときに、ターゲット層が細かく分けられており、そのターゲット層にあったデザインをする必要がある。その上でターゲット層に合った雑誌の傾向をまとめてみた。 （伊藤忠ファッショ
たかみ幼稚園 | 北九州市八幡の幼稚園
北九州市八幡東区にある、食育や子育て支援に力を入れている高見幼稚園です。子どもの笑顔を喜び、健やかな成長を願い、一人ひとりの感性を伸ばし、仏の子どもを育てます。
XD（クロスディー）｜体験にフォーカスするメディア
【コラム】 吉田奈緒子｜“ギフト”がつくる循環 アイルランドの「カネなし男」が引き出した、ローカルな経済圏の可能性
コンテンツからみるWebアクセシビリティの課題と提案 : could
コンテンツは本当にアクセシブルか Webアクセシビリティは、大きく分けて 2 つの『デザイン』があります。ひとつは、情報を分かりやすく整理し、目的の情報へた辿り着くための Web アクセシビリティ。この要素は、色、形状、動き、スピードなど、UI デザインの課題と重なるところが多いです。もうひとつの要素は、情報の構成や文章のスタイルといった「編集」とも呼べる Web アクセシビリティです。 前者の情報構造や操作性は、明確なガイドライン化がしやすく、チェックもしやすいですが、後者の編集の部分は、パッと見では判断がしにくいだけでなく、ガイドラインとして共有するのも難しいです。 Webアクセシビリティにある 2 つの『デザイン』 もちろん JIS X 8341–3:2010 でも「利用者が理解できるコンテンツ」を制作・維持できるようにすることが重要であると書かれていますが、技術で解決できるところに
アイデアに脱帽！ページ分割デザインだけを集めたサンプル | バシャログ。
今月は徒歩通勤すると決めたminamiです。 今年のWebデザイントレンドの一つに、シングルページデザインや無限スクロールデザインなどがありました。そういったデザインに必須ともいえるあしらいが、画面全体を区切るページ分割の要素。それだけをやたらと集めてCSSも公開している記事がおもしろかったのでご紹介します。 :before,:after などの疑似要素や、SVGを使っていますのでモダンブラウザでの閲覧が前提になります。 A Collection of Separator Styles | Codrops 吹き出し風の下向き三角形。中央下向きに視線を誘導して使いやすい形ですね。 斜めにスパッと。別名「イアイ」っていうやつですね。 ポッチ。三角よりかわいい雰囲気。 これも使いやすい斜めの交差。下向きの矢印がエスカレートしたらこんな風なデザインになっていった感じですかね。 曲線を使って柔らかく
映画の言葉
日本人が最も愛したミュージカル映画が新しい吹替音声と新しい特典映像を収録して甦る！マリアに平原綾香、トラップ大佐に石丸幹二、長女リーズルに日笠陽子。ジュリー･アンドリュースが再びザルツブルクを訪れた特別映像を収録！ © 2011 Twentieth Century Fox Home Entertainment LLC. All Rights Reserved. “Twentieth Century Fox”, “Fox” and their associated logos are the property of Twentieth Century Fox Film Corporation and are used under license.
Webデザインのスキルを磨こう！Webサイト模写のススメ
Webデザインのスキルを磨こう！Webサイト模写のススメ先日、Webデザイナーになってもうすぐ2年がたつというMさんから、「どうすればデザインのスキルを磨くことができるのか？」という旨のご相談を頂きました。今回は彼女の相談メールでもふれられている、デザインのスキルアップに有効なWebサイトの模写のやり方について掘り下げてみようと思います！ 頂いたご相談メール実は最近スランプぎみになっていて、サイトデザインを作成してもなぜかダサい、野暮ったいデザインになってしまいます。 デザインスキル向上させるために、いいデザインのサイトを模写するといいときいて模写もしてみたのですが、ぴったり一致するように作るのに意識がいってしまい、あまりデザインスキルが上がったと実感できないでいます。（模写したデザインを自分のオリジナルで活かせない） もし模写するときはどういう部分を意識してやるとかあればアドバイスいただ
sichoru.net
sichoru.net このドメインを購入する。 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
[CSS]水平に配置したセクションを分けるスタイルのさまざまな素敵なテクニック
1ページに複数のセクションを水平に配置した際に、それらの区切りとなるさまざまなスタイルを紹介します。 縦長の1ページで構成されたプロモーションサイトやポートフォリオなどで見かけるものだけでなく、こんなこともできるのかとアイデアが素晴らしいものもたくさん！ デモページ 各デモと共にそのスタイルを紹介します。 まずはHTMLから。基本となるのは、2パターンです。 1つ目は、section要素にclassをつけるだけ。 <section class="ss-style-hogehoge"> コンテンツ </section> 2つ目は、svg要素を使用します。 <section> コンテンツ </section> <svg id="hoge"> SVGの中身 </svg> sctionだけの場合はclass、svgを使用するものはidになっています。 以下、各デモとそのスタイルです。 HTML/C
[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
価格表のデザインをまとめたデザイン集「21 Examples of Pricing Pages in Web Design」
TOP > WebDesign > 価格表のデザインをまとめたデザイン集「21 Examples of Pricing Pages in Web Design」 WEBサービスでよく見かける、サービスの形態ごとの価格表、そのプランで何ができるのか？いくら位の差があるのかというのを一瞬で見分けられるように整理されており便利でスタンダードなデザインですが、これがいざ作るとなるとなかなか難しく苦労したというデザイナーの方も多いのではないでしょうか？今日紹介するのは価格表のデザインをまとめたデザイン集「21 Examples of Pricing Pages in Web Design」です。 Spotify 全部で21もの価格表がまとめられたています。今日はその中から気になったものをいくつかピックアップして紹介したいと思います。 詳しくは以下 Treehouse できることが明快で、比較
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
新着記事
新着記事
