サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
世界禁煙デー
www.weblab.co.jp
HTMLには、テーブル(表)を作成するためのTABLEタグがありますよね。 テーブルをPCで見る場合は、大抵ウィンドウに十分な幅があったり、ブラウザの幅をある程度まで縮めた場合に画面全体が横スクロールできるようになったりするため、テーブル自体が伸縮することはあまりありません(デザインによっては伸縮するものは勿論あります)。 対してスマートフォンの場合は画面幅が狭いため、画面からはみ出してしまったり、わずか数文字で折り返されてしまうこともあり、非常に見にくくなってしまいます。 今回は、テーブルをレスポンシブ対応するための工夫をご紹介します。 ①PCと同じレイアウトにする テーブルの行数、列数、文字数によっては、PCと同じレイアウトでも問題なく表示される場合があります。そういった場合は特別な対応をする必要はありません。 工夫するとすれば、テーブル内のpaddingをPCより控えめにすることで、
※2023年5月29日に一部内容を更新しました 基本無料で使っている立場上、あまり文句は言えない気がしますが、急にサービスを立ち上げたり、リニューアルしたり、ある日突然サービスが終わっちゃったりと、いろいろな驚きをもたらしてくれる、Google。 この度、ある一つのサービスが急に終わってしまったんです。 そのサービス名は、Google翻訳の「Webサイト翻訳ツール」というもので、このサービス終了に伴いどんな影響が発生するのか、まとめてみました。 突然Google翻訳埋め込みサービスが終了 Googleアカウントさえあれば誰でも使えて誰でもサイトに埋め込みができる、「Google Webサイト翻訳ツール」が終了しました。これさえあればGoogle翻訳機能をサイトに埋め込み、サイトを移動せずに無料で100言語以上の翻訳が可能だったのに…。 <サイトでは以下のようにサービス終了を説明> http
こんにちは、ウェブラボクリエイターズメモです。 皆さんはスマートフォン上でWebサイトからPDFファイルを閲覧するとき、操作が手間に感じたことはありませんか? 当たり前のように使用しているPDFですが、PDFの閲覧には専用のビューアが必要なため、一部の環境では閲覧に手間取ってしまうことがあります。 特にAndroidなどの一部のスマートフォンではビューアを起動して閲覧するために、一度PDFをダウンロードする必要があります。 サイズの大きいPDFをダウンロードする手間は、利用者のストレスになることも考えられますよね。 そこで今回は、ブラウザ上でPDFビューアを起動してスマートフォンでも快適にPDFを閲覧できるjsスクリプトをご紹介します。 DEMOはこちらです。 DEMOの動作はスマートフォンでも確認してみてください。 実装方法 1.jsのダウンロード 「PDF.js」配布サイトのダウンロー
※2023年6月15日に最新の情報に更新しました トグルスイッチとは トグルスイッチとは、オンまたはオフに切り替えることができるデジタルのスイッチで、アプリやWebサイトでしばしば使用されるUI要素の一つです。基本設定、のような画面で見かけることが多いかもしれませんね。 トグルスイッチは実は身近なインターフェースで、部屋の電気を点灯と消灯を切り替える物理的な電源スイッチがもっともポピュラーかもしれません。その他電化製品などでも、このトグルスイッチを活用しているものが多くあります。 こうして私たちは日常的にトグルスイッチに触れているため、アプリやWebサイト上でも直感的に利用することができているのです。 トグルスイッチの例(iPhone「設定」) ただ、普段から使い慣れているという面があるため、すでにトグルスイッチを採用している場合は誤って使用していないかどうか自社のアプリやWebサイトをチ
みなさん、こんにちは。ウェブラボデザイナーチームです。みなさんは、「ニューモーフィズム」という言葉を聞いたことがありますか?フラットデザインやマテリアルデザインに次いで、最近注目されているデザイン手法です。今回はそのニューモーフィズムについてご紹介します。 ニューモーフィズムとは? ニューモーフィズムとは、フラットデザインやマテリアルデザインのようなミニマムでシンプルな要素と、スキューモーフィズムの現実的な陰影や立体感が組み合わさったデザイン手法です。 ※スキューモーフィズム…よりユーザーの理解を促すために、ユーザーに馴染みのある装飾や体裁を取り入れたデザイン手法。 ニューモーフィズムの特徴は? 一見ニューモーフィズムは、マテリアルデザインと混同されやすい手法です。どのような違いがあるのか見て確認しておきましょう。 ベースに対して要素が浮いているマテリアルデザインに対し、ニューモーフィズム
こんにちは。なかなか梅雨が明けずバイク乗り、自転車乗りの方はロードバイクに跨がれない季節を迎えていますが、今回はroadではなく、loadです。ウェブラボクリエイターズメモです。 過去の記事で「jQueryで外部にあるHTMLを読み込む」について書きましたが、 今回はそれをもっと簡単に記述できるjQueryの「.load()」メソッドと、ネイティブJavascriptにこだわりを持つマニアの方々へ書き換えJavascriptを紹介します。 先にデモページをどうぞ DEMO jQuery「.load()」メソッド 「.load()」をネイティブJavascriptに書き換え jQuery「.load()」メソッドでパーツのみを読み込み パーツのみ読み込みの書き換えJavascript 1.jQuery「.load()」メソッド jQueryの.loadメソッドを使えば、他ファイルからHTML
こんにちは、ウェブラボクリエイターズメモです。 最近個人的にパララックスなどWebサイトに動きを付ける機会が多くあり、いいプラグインなど無いかな? と思い探してみたところ見つけたのでその紹介をしたいと思います。 →まずは作成したDEMOをご覧下さい スクロールすると背景が少しずつ動いていく良く見るパララックスですね。 これがとても簡単に実装できてしまうんです! まずは下記の公式サイトからプラグインをダウンロードしてきましょう。 →Parallax.js公式 ダウンロードしたファイルのparallax.min.jsだけあれば大丈夫です。 ではまずはHTMLから解説していきます。 まずはjQuery本体と一緒にプラグインを読み込ませます。 ■HTML スクリプト部分 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0
こんにちは、ウェブラボ技術メモです。 今回はコンテンツ要素を無限ループさせるスライダーを実装してみたいと思います。 まずはどのようなスライダーなのか、作成したDEMOをご覧ください。 横並びになっている5個の画像が自動でスライドしているのがわかりますね。 実装にあたってこちらの紹介ページを参考にさせていただきました。 http://black-flag.net/jquery/20110707-3305.html それでは実装まで解説していきます。 まずはhead内でjquery本体と動作に必要なCSSを読み込ませ、 動作させるためのスクリプトを記述します。 ■スクリプト <link rel="stylesheet" href="../common/css/common.css"> <script type="text/javascript" src="http://ajax.googlea
※2023年6月13日に最新の情報に更新しました レンタルサーバー会社を変更したい、もしくはサーバー会社と契約しているプランを変更したい、となったときに必要となるのがメールサーバーの移行です。 しかし、これがなかなか小難しいもの。 メールはサーバーを移行している間も誰かしらメールを送っている人もいるはずです。だからメールサーバーの移行は慎重かつミスなく行いたいものです。もたついていたら、メールの取りこぼしが発生し、せっかくのビジネスチャンスを逃しかねません。 必要な作業 まずは概要を説明します。メールサーバーを移す際に必要になるのは以下の作業です。 メールを利用している端末やシステムの把握 新しいサーバーに現在のサーバーのコンテンツ、メールアカウントをアップロード DNSの書き換え プロパゲーション期間の確保 もしこの作業の内どれかで失敗してしまうと…メール取りこぼしてしまうので注意しまし
こんにちは、ウェブラボ技術メモです。 今回は、背景画像でスライドショーを実装できるjQueryプラグイン「Vegas」を利用してみたいと思います。 このプラグインでは動画も背景に埋め込めるみたいですが、今回は画像だけで実装していきます。 まずは公式からファイル一式をダウンロードしましょう。右下辺りにDOWNLOADとあります。 →「Vegas」公式 HTMLのhead内でCSS、jQuery本体と一緒にプラグインを読み込ませます。 <link rel="stylesheet" href="css/vegas.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/vegas.min.js"></script>
こんにちは、ウェブラボ技術メモです。 今回は、jQueryで外部HTMLの指定した部分を読み込んでみたいと思います。 具代的には、外部にあるお知らせ一覧ページから、指定した件数だけ読み込んで表示するDEMOを作ります。 外部にあるお知らせ一覧ページは以下のようなものを作りました。 →お知らせ一覧ページ|外部HTML ■外部ページの読み込みたい部分のHTML <div id="demo_block"> <ul> <li><span>2016/09/25</span>1つ目の記事1つ目の記事1つ目の記事1つ目の記事1つ目の記事1つ目の記事1つ目の記事1つ目の記事1つ目の記事</li> <li><span>2016/09/24</span>2つ目の記事2つ目の記事2つ目の記事2つ目の記事2つ目の記事2つ目の記事2つ目の記事2つ目の記事2つ目の記事</li> <li><span>2016/09/2
突然ですが、「スカンツ」と「ジレンチ」ってご存知ですか? ファッションに興味のある方なら、聞いたことがあるかもしれません。 どちらも今年のトレンドファッションだそうです。 「スカンツ」=まるでロングスカートのようなガウチョパンツ 「ジレンチ」=ジレ+トレンチコート(袖のないトレンチコート) ファッションに毎年トレンドがあるように、実はwebデザインの世界にも、トレンドってあるんです。 今回は「ストーリーテリング」というwebデザインについてご紹介します。 ストーリーテリングってなに? 今年のWebデザインのトレンドらしいです、ストーリテリングって。 ストーリーテリングとは、シンプルに言うと、Webサイトが一つの物語になっている感じです。 ストーリーテリングのWebサイトは、ページをスクロールしていくと、まるで絵本を読んでいるかのように一つの物語として構成されているので、Webサイトを訪れた
ウェブラボ代表の山浦が、 Web担当者・経営者・起業家に向けて配信するコラム Webを集客に活用したい人のための Webサイト・マネジメント術 最新のトピックや実務家ならではの身近なちょっとした疑問に回答しています。 Web制作の外注にあたって、オリエンシートは必要ですか? オリエンシートにはどんなことを書いたら良いですか? オリエンシートは絶対に必要です。理由は3つあります。 そしてオリエンシートに記載する定番の項目は... オリエンシートは、確かに絶対に作った方が良いのです。 なぜなら、次のような理由があります。 [理由1] 自分たちの頭の整理、共通認識を持つため Web制作会社に伝えるべき項目を書き出してみることで、 「本当にこれで良かったっけな?」とか 「念の為、上司にも確認しておこう」という項目が出て来るものです。 後から、「こういうことをやりたかったんじゃない」とか社長や上司か
今月からウェブラボ技術メモが復活します! 新しい技術や、有用な情報をお伝えしていきたいと思いますので、宜しくお願いいたします。 さて、今回紹介するのは、JavaScriptを使ってラジオボタンのチェックの有無でコンテンツの表示非表示を切り替える、というものです。 実際の動きを見た方がわかりやすいと思うので、まずはデモをご覧ください。 DEMOはこちら チェックを切り替えるごとに表示されるコンテンツも切り替わっているのがわかると思います。 フォームの項目は多くなってしまうと、ユーザーはストレスを感じてしまいます。 そんな時、チェックした項目によってその後の内容を変化させれば、よりユーザビリティに優れたフォームになります。 例えば、「初めての方」と「2回目以降の利用」で入力項目が違う場合は「初めての方」にチェックを入れると名前や住所などの入力欄を表示させ、「2回目以降の利用」にチェックを入れた
先日、あるお客様より 「スタッフの名前で検索されてしまうことがあるので何とかしたい。」 というお問い合わせをいただきました。 もちろん、仕事のつながりから名前で検索される場合もあると思いますが、全く関連性のないところから検索されているとなると、確かにあまり好ましいものではないかもしれません。 1.名前部分の画像化 —————————————- 山田太郎 ↓ —————————————- 上記のように、名前の部分を画像として作成します。 この時、alt属性に名前を入れてしまっても検索エンジンには読み込まれてしまうので、alt属性は空欄にしてください。 2.Javascriptでの外部ファイル化 —————————————- document.write(“山田太郎”); —————————————- テキストエディタで上記のような記述を行い、「***.js」(Javascriptファイル形式
サーバーによってその仕様は異なりますが、一般的に http://○○○○.com/フォルダ名/ とURLを指定すると、そのディレクトリに格納されている「index.html」 または、「index.php」が表示されます。 しかし、さくらインターネットなど一部のサーバーでは「index.html」 または、「index.php」 がないディレクトリをブラウザで表示するとファイルの一覧画面が表示されてしまいます。 そのディレクトリに格納されている全てのファイルが表示されてしまうので、セキュリティ的にも大変危険です。 「.htaccess」を使用してこのファイル一覧を表示させない方法をご紹介します。 .htaccessファイルを作成し、以下の記述をします。
Webサイトの開発をしていると、その過程ではいろいろなデータファイルが加工・作成されます。それらは大きく分けると、以下3つになります。 最終成果物であるWebサイトそのもののデータ (HTMLやgif、jpegファイル)1を作成するための、PhotoshopやFlashなどのデザインデータ (psdやflaファイル)原稿や写真などの元素材 1. は、特殊な契約になっていない限り、基本的にはクライアント(依頼主)の著作物です。 2. は、いわゆる中間生成物といって、制作会社の著作物です。 印刷で言うと、“フィルム”や“版”に当たるものです。 これをクライアントが取得したい場合は、一般的にはデータファイルの買取費用を別途、制作会社に支払う必要があります。 3. は、その元の出所によります。 クライアントが執筆・撮影した元素材であれば、クライアント(依頼主)の著作物です。 問題は、
WEBページを作成する際、コメントアウトというものがあります。 HTMLソース内に「」と記述するこのコメントアウトは 実際のブラウザの表示には関係ありませんが ・タグの構造やページ構成を分かりやすくするための「メモ」 ・今後の制作や更新に必要だが、まだ公開したくない部分 ・削除しなくてはいけないが、今後の制作や更新に必要なので残しておきたい部分 として、主に使用されます。
デザイナーのagataです。 サイト職人をお使いになられているお客さまや、ご自分でサイトを運営されているかたのお役に立てるような、小ネタや便利な機能などを紹介してまいります。 【第1回 素材をつくる!「黒板編」】 女性向けのサイトで最近特に多い黒板ネタです。 上のタイトルでも使っていますが、インパクトもあるしちょっとアナログ感もあっていいですよね。 つくりかたはとてもカンタンです! 【1】黒板にしたいサイズで新規画像をつくります。 【2】新規レイヤーを1枚つくって黒板ぽい緑で塗りつぶします(例:R18/G69/B48) とりあえず黒板ぽいですが、せっかくなのでもうひと手間かけましょう。 【3】塗りつぶしたレイヤーにパターンを適用させます。 レイヤー>レイヤースタイル>パターンオーバーレイ ・描画モード:オーバーレイ ・不透明度:25% ・パターン:グワッシュ水彩画 ・比率:100% それっ
最近、制作案件でFlashを背景として使用することが多いので、その方法を簡単にご紹介します。 はじめに、レイヤー階層について説明します。 以下に3つの画像があります。 これらは、通常ですとこのように横並びに表示され画像が重なることはありません。画像を重ねて表示するには以下のように設定します。 ●まず、「position:relative;」を設定したボックスを設置します。 <div style="position:relative;"></div> ●このボックスの中に、全ての画像を格納します。 <div style="position:relative;"> <img src="01.gif" /> <img src="02.gif" /> <img src="03.gif" /> </div> ●次に、それぞれの画像に対して「position:absolute;」と「z-inde
Web制作に関する当社の実績の一部をご紹介します。 ここには掲載できない実績も多数ございます。また、業種別やWebサイトのタイプ別の実績資料もございます。 詳しくは、お気軽にお問合せください。 最近のWeb制作実績 成果で見るWeb制作実績 最近のWeb制作実績 宿泊業 リニューアル ハイランドリゾート株式会社 様 金融業 新規制作 セゾン投信株式会社 様 金融業 新規制作 セゾン投信株式会社 様 小売業 新規制作 オフィスコム株式会社 様 金融業 新規制作 セゾン投信 様 宿泊業 新規制作 ハイランドリゾートホテル&スパ 様 宿泊業 新規制作 ハイランドリゾート株式会社 様 小売業 新規制作 オフィスコム株式会社 様 サービス業 リニューアル 株式会社ECLADIA 「Dr.HEAD」 様
モバイルサイトは携帯電話のキャリアや機種によって動作やレイアウトが 異なる場合があります。これはそれぞれのキャリアや機種によって規格の違いがあるためです。 最近ではこの規格を統一しようという動きもありますが、いつになるか分かりませんし 古い機種の携帯電話を長く使われる方もいますので、しばらくはそれぞれのキャリアや機種での 使用の違いを意識する必要があります。 以前は3キャリア共通で動作やレイアウトに違いのないようなコーディング方法となると 制約が多く、デザインの自由度が低いのが悩みの種でした。 日進月歩のこの業界、3キャリア共通で使用できるコーディング方法が以前に比べ だいぶ変わって来ましたので、モバイルサイトのXHTMLでのコーディング方法を ご紹介します。 「livedoorディレクターブログ」で『ケータイ livedoor』のアクセスシェアが公開されているのを発見
以前のエントリーで、SEO対策として最も基本的で、最も重要なtitleタグの記述について、検索エンジンで上位表示させたいキーワードを含めるとともに、検索結果に表示された際に、どうしたらユーザーがクリックしたくなるかという観点で、正しい文章として、タイトルとして、自然な記述をすることが大切だと紹介しましたが、今回は、それを示しているデータを紹介したいと思います。 ※AOL Real Search Query Data, March 2006 ~ May 2006, AOL 2006 少し古いデータになりますが、現在もそれほど変化なく、同じようなデータになるのではないかと思われます。 このデータから、検索結果の1位に関してはやはり高い割合でサイトにアクセスされていますが、2位以下になるとクリック率が大きく下がり、4~10位になってくると、クリック率に大きな差が見られないことがわかります。
PCサイトに比べると情報量の少ないモバイルサイトは、 ページ内部でのSEO対策をしようとしても、 基本的なもの(<title>タグや<meta>タグの設定)に限られてしまいます。 そこで今回は、モバイルサイトに効果的な外部施策としてのSEO対策を紹介します。 モバイル版のディレクトリ型検索エンジンへの登録を行い、被リンクを増やすことで、サイトの評価を高めることができます。 ・Yahoo!カテゴリ モバイル版 http://view-mobile.dir.yahoo.co.jp/i/ ※商用サイトの場合はYahoo!ビジネスエクスプレス(有料)での登録となります ・Jエントリーモバイル http://www.jlisting.jp/jentry_m/ ・クロスレコメンドモバイル http://www.xlisting.co.jp/Service/XrecommendMo
※2023年5月29日に一部内容を更新しました ブラウザのデフォルトフォントサイズとは ブラウザによって文字の見た目の大きさが異なる場合があります。 これは、それぞれのブラウザが基準としている文字の大きさ”デフォルトフォントサイズ”が違うからです。 デフォルトフォントサイズとはフォントサイズを指定せずにHTMLファイルに文字を記述した際に表示されるサイズのことです。 しかし2023年4月現在主流といわているシェア率上位5位のデスクトップブラウザのデフォルトフォントサイズは全て16px(12pt)で統一されています。 シェア率上位5位のデスクトップブラウザ Google Chrome Safari Microsoft Edge FireFox Internet Explorer(日本国内シェア)、Opera(世界シェア) そのため、そこまで気にする必要はないでしょう。 しかし最小フォントサイ
ウェブサイトにおいて、アクセス解析を用いて今後のサイトの運営方針を考えている方は多いと思います。 アクセス数・セッション数・ページビューなどのサイトを訪れた人数の統計はサイトの運営していく上で大変重要な指数です。 今回は、少し変わったページの統計を紹介します。 PHPベースのオープンソース・ソフトウェア「Clickheat」。 画面上で、どの部分がクリックされているか視覚的に分かり、何度もクリックされるとサーモグラフィのように色が変わっていきます。日本語化もされており、日ごと、グループごと、ブラウザごとなどでフィルタリングが可能です。サイトにはデモ画面もあるので必見です。 「Clickheat」デモ (login/password: demo/demo) http://www.labsmedia.com/clickheat/index.php ・ユーザーがどの部分に興味を持っ
昨日、Yahoo!検索スタッフブログで、「リンクスパムとして報告されたURLのほぼすべてが『スパム』」という記事の補足記事がアップされました。 ↓「リンクスパムとして報告されたURLのほぼすべてが『スパム』」 http://searchblog.yahoo.co.jp/2008/10/url_yahoo.html ↓「リンクスパムとして報告されたURLのほぼすべてが『スパム』」に補足します http://searchblog.yahoo.co.jp/2008/11/url.html Yahoo!には、Google でいうウェブマスターツールにあたる「Yahoo!検索 サイトエクスプローラー」というサービスがあります。 この中に、自分のサイトへ不適切なリンクがはられた場合に、Yahoo!にリンクスパム報告をする機能というものがあります。 上記の記事は、そこから報告を受けたリンクスパムはやっぱ
ウェブサイトにおいて、アクセス解析を用いて今後のサイトの運営方針を 考えている方は多いと思います。 アクセス数・セッション数・ページビューなどのサイトを訪れた人数の 統計はサイトの運営していく上で大変重要な指数です。 今回は、少し変わったページの統計を紹介します。 PHPベースのオープンソース・ソフトウェア「Clickheat」。 画面上で、どの部分がクリックされているか視覚的に分かり、何度もクリックされるとサーモグラフィのように色が変わっていきます。日本語化もされており、日ごと、グループごと、ブラウザごとなどでフィルタリングが可能です。サイトにはデモ画面もあるので必見です。 「Clickheat」デモ (login/password: demo/demo) http://www.labsmedia.com/clickheat/index.php ・ユーザーがどの部分に興味を持って
最近、お客様よりよくご質問いただく「ページサイズ」について。 今までは、本当に特殊な場合を除いては、最小想定モニタサイズを800×600ピクセルで想定して、ページの横幅を780ピクセル前後で作るのが一般的でした。昨年、当社が扱った数十案件のプロジェクトの中で、最小想定モニタサイズを横幅1024ピクセルに想定して、ページの横幅を960ピクセルで作ったのが1件だけ。 今年に入って、appleのWebサイトが、本国に続いて日本サイトを横幅980ピクセルでリニューアルしました。それでも、appleの場合は、主な想定ユーザーがMac利用者だと思うし、冒険心のある会社なのでそれもありかなと思っていましたが、先日、Yahoo!Japan が新トップページ(ベータ版)をアップし、その横幅が950ピクセルになりました。 これまでの歴史を振り返ると、Yahoo!Japan はスタイルシートの導入なども遅くて、
次のページ
このページを最初にブックマークしてみませんか?
『ウェブサイト制作会社「ウェブラボ有限会社」のホームページ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く