縦長のwebデザインをがむしゃらに集めています。

jQueryを使ってのスライダーってTOPページのメインビジュアルが基本ですが、それはフェード系やダイナミックなアニメーションが主流だった頃の話で、前後左右の画像を表示しつつスライドするカルーセルスライダーが出始めて、メインビジュアルだけでなくコンテンツバナーを複数表示させて左右にスライドするタイプの物がTOPのメインだけでなくサブコンテンツ部分にも多く見られてきてます。 今回とあるコンテンツ量の多いポータルサイトを作成した時にそのタイプのスライダーを作成したので備忘録としてまとめておきます。 どんな感じのスライダーかっていうと、bxSliderの本家サイトにあるサンプル「Carousel – dynamic number of slides」のような感じです。 まず、bxSliderをダウンロードして準備 まず、「bxSlider」の本家サイトからDownloadします。 ダウンロードす

CSSやHTML、javascriptやjQuery、WordPressやプラグインなど、WEBデザインにちょっと便利なTIPSまとめブログ。サイト制作時に見つけた小ネタなどをまとめて紹介します。

Ben Gremillion氏は、UXPinのコンテンツデザイナーです。以前はウェブデザイナー、およびその後にバックエンドディベロッパーを務めていました。彼は新聞デザインからキャリアをスタートさせ、デジタルの未来を見据えて即座にHTML/CSSを学びました。 実を言うと、ステークホルダーやその他の関係者があまり深く考えずに「整理・整頓する」ことを求めるのに、私は飽き飽きしています。整理されているということは、ただ単に物が少ないということではありません。整頓するということは、全てをなくすわけではありません。これらの言葉は、ページ上で重要でない要素を取り除くということを意味しているのです。 もし複雑な入力フォームがあったならば、ユーザーは一目見ただけですぐに去ってしまうでしょう。これを防ぐための手っ取り早い方法は、散らかっている要素を取り除くことと、グリッドを追加することです。今日は、ユーザー

かわいらしいイメージやあたたかい雰囲気を出したいときに、ゴシックや明朝フォントだとしっくりこない場合があります。そんなときには丸文字のフォントを当てはめてみるとしっくりくるかもしれません。 今回は商用可能なものに絞って、丸文字のフリーフォントを１０点ご紹介します。 瀬戸フォント JIS第四水準までの漢字や難しい漢字も収録されているので、他のフォントで漢字で見つからなくて困ったという時は、こちらのフォントで試してみてください。Unicodeを使った顔文字もだいたいが表示可能です。 丸文字「ニコモジ＋（プラス）」フォント ニコニコ動画で使われているフォントをイメージしてつくられたフォントです。ひらがな・カタカナ・英数字のみオリジナルで、それ以外の文字グリフ（漢字など）には源柔ゴシックが利用されています。 じゆうちょうフォント Version 2.07 太めのサインペンで書いたようなゴシック体の

Twitter Analytics（ツイッターアナリティクス）、使いこなせていますか？「Twitter（ツイッター）」でのユーザーの反応は、Webサイトのコンテンツの成果を測るための大事な指標です。 以前は、Webサイトに設置できるTwitterボタンに、そのページのTweet数が表示されていました。それが廃止されたため、その代わりとなるものとして重要になっているのが「Twitterアナリティクス」です。 Twitterアナリティクスでは、自分のツイートがどれほどTwitter上で見られているか、どれほど反応されているか、自分のWebサイトのページがどれほどツイートされているかが分かるため、反響の大きいコンテンツを知ることができます。 Twitterアナリティクスを使いこなして、自分のWebサイトやツイートの効果を測定し、それに基づいてコンテンツの質を改善していきましょう。 この記事は、3

フォントアイコンの導入方法を初心者向けに、FontAwesomeを例に説明しています。

クリエイターの仕事って？ クリエイターとは、創作活動に関わる人全般を指します。実際にはクリエイターという言葉に厳密な定義はなく、何を指すかは人によって解釈は分かれます。音楽や映像の制作、文筆活動、イラストやビジュアルデザイン、Webデザインなどの領域で、自らのスキルを以てアウトプットを出す人というのが解釈の一例です。 ただし、クリエイターを職業として、企業と仕事をするのであれば、求められる役割や仕事内容などで大枠が決まってきます。例えばWebデザイナーであれば、Web関連の技術スキルや企業のビジネスに貢献するかどうかという視点など、クリエイティブなセンス以外にもさまざまなスキルが求められます。ここでは、そうした各クリエイター職種の仕事内容や必要なスキルなどをご紹介していきます。 Webデザイナー Webデザイナーは、Webページ制作のデザインを担当する仕事です。仕事として携わる業務は幅広く

ユーザーインターフェース（UI）- どこかで聞いたことはあるしなんとなく想像は出来る。”このアプリのUIはイケテル”や、”UIデザイナー募集”など、最近ではテクノロジー系の記事や、デザインに関する話の中に頻繁に出てくるこの言葉。 しかしちゃんと言葉で説明してみてと言われると意外と難しい。 興味はあるけどはっきりとはわからない・わかっているつもりだけどもう一度復習したい・現状はわかっているからこれからのUIついて知りたい。 そんな人たちに向けて ユーザーインターフェースの歴史良いUIと悪いUIの違いUIのこれからという3つのセクションに分け、インターフェースの本質をまとめた。 1. ユーザーインターフェースの歴史そもそもインターフェースってなに？そもそもユーザーインターフェースの「インターフェース」とはどういう意味なのだろうか。「境界面・接触面」などと訳されるこの「インターフェース」という言

こんにちは！ Web心理マーケターの鈴木 公（@KouShinri）です！ Googleアナリティクスは便利ですよね！ 検索エンジンやSNS、広告からの流入数もわかるし、目標達成度や行動フローも分析できる！　だから、サイトの状況や価値を知るためにも重宝したい分析ツールですよね。あなたもきっと使っていることでしょう！ でも、Googleアナリティクスは複雑すぎる。どこをどう見ればいいのかもわからない。使い慣れていない時期なら、なおさら「？？？」がいっぱいになりますよね！ そんなGoogleアナリティクスを使い慣れていない方や、初心者の方のためにも……。Googleアナリティクスでは、レポートの「テンプレート」を取り入れ、簡単に分析結果を見れるようにする方法があるのです。 それが今回メインの「ソリューションギャラリー」！ この「ソリューションギャラリー」とは、他の人が見やすいように設定した独自

Web制作に欠かせないjQueryの基本を、スマホUIにおけるインタラクションの実装を通じて学んでいきます。最終回はフォームで入力漏れがあった場合に送信できない仕組みをjQueryで実装していきます。 ■ jQueryとは 皆さんは、Webサイトの画像がスライドしたり、ページがスムーズにスクロールしたり、画像をクリックしたらライトボックの中に画像が美しく表示されるのをご覧になったことがあると思います。そのようなサイトのインタラクションを実装するためのものとしてjQueryは人気を誇ってきました。 jQueryはJavaScriptのライブラリです。JavaScriptにはブラウザによって動作が異なるという弱点がありましたが、jQueryを使う事によって、IE6等のレガシーブラウザから最新のブラウザまで、ブラウザの違いを気にせずにインタラクションが実装できるようになりました。 ■ 事前準備

jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration

ここ数年でCSSは加速度的に進化し、ひと昔前まではJavaScriptを使用しないと実装できなかったのが、CSSのみで実装できるようになりました。また、サポートすべきブラウザもIE8が除かれるようになり、今まで躊躇していたテクニックも数多く利用できます。 アコーディオンやカルーセル、モーダルボックス、ポップオーバー、フリップ コンテンツなど、JavaScript無しのCSSで実装するテクニックを紹介します。

Yahooで検索して、いい商品を見つけた！ ググったことにより問題点が解決できた ニコニコ動画で動画が見たくなったのでURLを検索した インデックス状況を調べるためにsite:コマンドを使った 単純に検索エンジンで検索といっても、検索ユーザーの意図は様々です。 site:コマンドやlink:コマンドで運営しているサイトの状態を調べるような検索は特殊だとしても、その他の三つの検索意図は全く違います。 購入を考えており検索している人（取引型のクエリ） サイトに移動しようとして検索を使う人（案内型のクエリ） 調べ物をしている人（情報収集型のクエリ） その中で、企業サイトやECサイトで不足していることが多いのが、調べ物をしている人に向けた、情報収集型のコンテンツです。 Re:veryの情報収集型コンテンツでキラーコンテンツを作ろうという記事で、情報収集型のコンテンツを作る利点が解説されています。

ますます加速するウェブデザインの最先端を体感できる、最新 Web テクニックを実装した、HTML/CSSコードスニペットをまとめています。 デザインと同時にまとめてコードを確認できるので、コピペで手軽に試してみることも可能です。コード共有コミュニティーサイト CodePen で話題となっている作品を中心に、ウェブデザインにスパイスを加えてくれる、ユニークなエフェクトが揃っています。 詳細は以下から。 コピペで実装できる、最新ウェブテクHTML/CSSコードスニペットまとめ 右下に表示されている「Return」をクリックすると、エフェクトが再読み込みされます。また各ソースはHTML、CSS、JSタブをクリックすることで確認することができます。 Fullscreen Image Layer Views 並べられたキーワードにマウスを重ねると、フルスクリーン画面で写真が切り替わります。 See

なんとなくやってみて、もしかしたら今後使うことあるかもと思ったので備忘録。 CSSのtransform: rotate();とanimationを使って要素が常に回転するような動きを実装する際、単純に親要素にそれらを指定するだけだと中にある子要素の見栄えも回転します。 それを、子要素の見栄えは回転せずにそのままの表示が維持されているように見せる方法です。 イメージだけでは伝わりづらいかもですが、以下ではこのように5つの要素があり、それらが時計回りにくるくると回転する動きをCSSで実装していくものになります。 基本的なHTML・CSS 基本的なHTMLとCSSは下記のようなものを使用し、CSSで各li要素をposition: absolute;を使って先ほどのイメージのようになるようにそれぞれ指定していきます。 <i class="fa fa-xxx"></i>やpのHTMLやCSSに関して