「シングルページ」と呼ばれる、1ページで完結しているWebページを見かけることが多くなりました。シングルページの概要と、CSSフレームワークを使った実際のシングルページの作成を通して、シングルページのデザインの考え方や作成方法の知識を身につけられる連載をお届けします。解説はデザイナーの石嶋未来氏にお願いしました。(編集部)
「シングルページ」と呼ばれる、1ページで完結しているWebページを見かけることが多くなりました。シングルページの概要と、CSSフレームワークを使った実際のシングルページの作成を通して、シングルページのデザインの考え方や作成方法の知識を身につけられる連載をお届けします。解説はデザイナーの石嶋未来氏にお願いしました。(編集部)
以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」&コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで、1ページ分(1コンテンツ分)を画面遷移させるUIを実装できるjQueryプラグインを紹介しましたが、自分なりにもっと使いやすい形で実現できないかやってみた実験をご紹介してみます。 【2014/08/05 追記】 各ブロック内での横スライド機能を追加しました。 まずは動作サンプルから。 下記のサンプル画面でマウスホイールスクロールもしくは画面右側のナビゲーションボタン等を使って画面(ページ)を切り替えてみてください。 「jQueryで1ページごとにスクロールして画面遷移させるU
作成:2014/06/9 Web制作 > トレンド感のある動きや、洗練された見え方を実現するために、知っておきたいことや方法など。Web制作の現場で知っておくべきことをまとめました。全部取り入れるのは無理ですが、押さえておくことで今以上に見栄えのするサイトを作れると思います。ここ最近のトレンドをおさらいしたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビューで使いたいエフェクト 1.ロングシャドウ 2.ポリゴン 3.ラージフォトスタイル 4.ブラーエフェクト 5.フルスクリーン動画 6.画像シーケンス 脱ビットマップ画像 7.SVG 8.Webフォントを円で囲む 配色・フォント 9.配色(フラットデザイン) 10.タイポグラフィ(フラットデザイン) 11.フォント(フラットデザイン) 効果 12.Infinite Scroll(無限スク
ディスプレイサイズ(ブラウザサイズ)いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ(ブラウザ)のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します! 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max
この文書では、スキャナから読み込んだデータを Adobe Acrobat で検索や編集が可能なテキストとして認識させる方法について説明します。 「Optical Character Reader」 の略で、スキャナから印刷物の内容を取り込む時に、通常は画像として取り込まれる文字を、編集や検索対象となるテキストとして読み取ることができる機能のことです。 OCR 機能を使用しない通常の読み込みでは、文字はグラフィックとして取り込まれ、テキストの編集を行うことはできません。 Acrobat では、スキャナから取り込む際に OCR (光学式文字認識) を適用して、検索や編集が可能なテキストとして認識させることができます。取り込んだ後に OCR を適用することも可能です。 スキャナで紙の文書を取り込む際に、OCR を適用して検索可能な PDF ファイルを作成するか、画像のみの PDF ファイルを作成
レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記 2014.03.19】 元々のタイトルは「レスポンシブWebデザインに対応した横メニューの作り方」でしたが、よく考えるとスマホ対応になったら縦メニューになりますのでタイトルを変更しました。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; paddi
PayPal Pte. Ltd. はシンガポール法人であり、日本国金融庁に(1)資金移動業者(第二種資金移動業)(関東財務局長第00026号)および(2)前払式支払手段第三者型発行者(関東財務局長第00705号)として登録されています。 お客様により早く安全に情報をお届けするため、お客様が弊社のウェブサイトやサービス、またはアプリケーション等をご利用いただいく際、弊社や弊社が認定したサービスプロバイダがCookieやWebビーコンなどを使用する場合がございます。詳細は こちらをご覧ください。 ペイパルのマネーローンダリング、及びテロ資金供与防止対策に対する取り組み グローバルにサービスを展開する金融機関として、ペイパルはマネーローンダリング、テロ資金供与防止対策を経営上の重要な課題と位置づけており、犯罪収益移転防止法を始めとするマネーローンダリング、テロ資金供与防止対策に関する全ての法令や
こんにちは、デザイナーのモモコです。 今回はデザインの重要な要素の一つである、色選びの時に使える配色シミュレーションができるツールやサイトをご紹介します。Webカラーのカラーパレット系サービスを中心にチョイスしましたので、配色などでお悩みの方はぜひご参考にしてみてください! 独学でつまずいていませんか? 配色やデザインの基礎を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい!」という方は、ぜひこちらより資料をご請求ください。 coolors https://coolors.co/ 直感的な操作で色の組み合わせのシミュレーションができるサイト。スペースキーを押すことで自動で配色を行なってくれます。何度でも押せる
右の登録ボックスに「ご希望のホームページアドレス」「メールアドレス」「パスワード」を入力します。 最後に、利用規約の確認にチェックを入れて[無料ホームページを登録!]ボタンを押してください。 問題なく登録されれば、以下と同じ見た目の画面に切り替わるはずです。 ※すべて半角の英数字で入力してください。すでに使われているホームページアドレスは利用できません。 ※入力したホームページアドレス、メールアドレス、パスワードは忘れずにメモをとってください。
Jimdoは簡単にホームページを作成できるサービスです。 Web上で簡単にブログを作成するサービスは数多く存在していますが、それのホームページ版と考えていただくとよいと思います。 高機能なPro版,Business版がありますが、無料版がありますので気軽に始められます。 無料版で作ったページをそのままPro版,Business版にアップグレードできます。 Jimdoで無料ホームページを作成する Jimdoには多くのレイアウトが用意されており、選択するだけで美しく一貫性のあるデザインのホームページを作成することができますが、ちょっと凝ったことをやりたい方は「独自レイアウト」で一味違ったホームページを作ることもできます。 しかし、独自レイアウトはHTMLとCSSがわかっている方には簡単ですが、そうでない方にはかなり敷居が高いと思います。 そこで、当サイトでは独自レイアウトの編集方法を中心に、ち
このページでは ジンドゥークリエイター に関するサポートを検索できます。ジンドゥー AI ビルダーのサポートが必要な場合はこちらをクリック。
「WebデザイナーのためのJimdoスタイルブック」 このサイトのあっくんこと「野崎晃」とチッチの中の人「松浦知香」そしてshikama.netの志鎌さんとの共著でJimdoの本を書かせて頂きました!あっくんとチッチも出てきます!2012年3月27日発売!よろしくおねがいします!! 2020 / 10 / 30 Jimdo 「AIビルダーの使い方」を執筆しました! 2016 / 12 / 01 デザインを変更、スマートフォンに対応しました。 2015 / 04 / 13 エキスパートコラムのご紹介を更新しました。 2014 / 09 / 08 はじめてWEBエキスパートコラムの紹介ページを追加しました。 2014 / 08 / 13 あっくん&チッチの実践!ホームページ作成 を更新しました。 (第30回) 2012 / 12 / 17 サイト内の情報を最新のJimdoに合わせて更新しました
個人的に「探しやすい」と思うギャラリーサイトの特徴 ギャラリーサイトでWebデザインを探していた時、「次へ」ボタンを何回もクリックするのが面倒で、スクロールするだけでページが次々と読み込まれる「無限スクロール」の存在にとても助けられました。 個人的に、以下の3ステップのみで素早く目的のサイトに到達できる構造が好みです。 スクロールする サムネイルをクリックする 新しいウィンドウで該当ページが開く 次からは上記をすべて満たした私のおすすめギャラリーサイト10選をご紹介! straightline bookmark ダークなデザインがかっこいい「straightline bookmark」。ここが1番お世話になっているかもしれません。「tags list」からすぐにお目当てのデザインを検索できます。1番のお気に入りは「レイアウト」で絞り込めること。サムネイルの表示サイズを変更できるのも便利。
AndroidでChromeを使ってサイトを閲覧したときに、一部の文字が非常に大きく表示されることがあります。 ※確認した限りでは、Androidの「標準ブラウザ」では大丈夫だったので、おそらくChromeに固有のバグなのだと思います。 最初なぜこんなことが起こるのか分からなかったのですが、 色々調べた結果、意外とあっさりと解決しましたので、メモしておきます。 私の手元にある環境でしか調べられていないのですが、発生するのは、meta要素の「viewport」が設定されていないか、content属性の「width」が「width=760」のような数字になっている場合のようです。 <meta name="viewport" content="width=760">以下のキャプチャは、Google Chromeのエミュレータを使って、当ブログで再現したものですが、こんな風に非常に大きなフォントサ
自己定義化関数を使用すれば良いと思ったので、下記のように実装。 var sampleFunc = function(){ //初期値設定などの初期化処理 var initVar = 初期値; sampleFunc = function(){ //2回目以降に実行される部分 } } 最初、自己定義化関数の中身も初回関数呼び出し時に実行され、初回以降は自己定義化関数の中身だけが実行されると思っていたが、そうではない。 初回は初期化処理と関数定義だけが行われる。
JavascriptライブラリUnderscore.jsがすごい便利。 すごい便利なのにもかかわらず、あんまり日本語の情報がなかったので、公式のドキュメントをスピリチュアル抄訳してみた。 http://documentcloud.github.com/underscore/ Collection Functions each _.each(list, iterator, [context]) listの要素をイテレートする。すべての要素はiterator関数にyieldされる。iteratorには(element, index, list)の3つの引数が渡される。もしlistがJavascript Objectだった場合は(value, key, list)になる。 _.each([1, 2, 3], function(num){ alert(num); }); => alerts eac
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く