かよきせきデザイン|千葉のホームページ制作>kayokiseki-designブログ

レスポンシブデザインの表

表、つまり<table>タグ。もちろんここで言うのはテーブルレイアウトではなく、表としてのtable使用のことです。


レスポンシブデザインはPCが横長のデザインに対して、スマホサイズでは縦長のデザインとなります。よって横長の表はスマホに収まりにくく、逆に縦長の表はPCでは無駄なスペースが多く出来てしまうというなんとも困ったコンテンツなのですが、どうしても表でなければ効果的に伝えられない情報も実際にありますよね。


今回のエントリーは、表のレスポンシブについてです。

続きを読む

2015年「上に戻る」ボタン4パターン

多くのホームページの右下やフッターに「上に戻る」ボタンがあるのをご存知ですか?

3年ほど前でしょうか、jqueryを使った「ぬるっと上に戻るボタン」が発表されてからいっきに広まりました。わたしもモバイルだとどうしても縦長のサイトデザインになるため、フッター固定で設置することが多いです。

今回のエントリーは、レスポンシブデザインのサイトにおける「上に戻る」ボタンのパターンのご紹介と、このホームページのボタンをSVGで作り直しましたのでざっくりとご紹介します。


続きを読む

FC2スマホ用テンプレートを編集する

皆さんはブログを書いていますか?

わたしはこのブログを立ち上げる前より趣味で書いているブログがあり、FC2ブログを使わせていただいています。他に3か所のフリーブログを触る機会がありましたが、動きが重い・時間がかかる・テンプレートがいまいち・カスタマイズ性が乏しいなどマイナス面が目立ち、もう1本趣味ブログを建てましたがやはりFC2ブログを使わせていただきました。


趣味のブログなら無料ブログをぜひ使わせていただきましょう!今回はFC2ブログのスマートフォンでの見映えを編集する手順です(やる作業自体は簡単なのですが、HTML/CSSの知識がないとつらいかもしれません)。

続きを読む

SoyCMSでお知らせラベルを実装する

最近の企業ホームページのトップページにある「お知らせ」「ニュース」などに、ちょっとしたブームが見られます。それは、そのお知らせのカテゴリーをラベルでカラフルに表示して、閲覧者に視覚的に見やすくするという配慮です。


これは、CMSの投稿機能とCSSをうまく活用して実現しているものです。わたし自身もお知らせが多いクライアントさんには、このラベルを実装するようにしています。もちろんわたしはSoyCMSで提供していますので、Soyでもお知らせラベルを実装する方法を今回はご紹介します。

続きを読む

レスポンシブとアクセシビリティ

久々の「大手サイトに勉強させてもらったシリーズ」です。やはりWebデザインといえば海外が先行しているので、わたしは海外サイトをザッピングします。

今回「レスポンシブとアクセシビリティ」というタイトルをつけたのは、少々内容からすると皮肉めいています。

Webサイトはデバイスサイズがあまりにも多岐化しているため縛られてきている部分が少なからずあります。しかしこのサイトを見たとき、今後面白い方向に進む足音が聞こえた気がしました。「閲覧する権利」ではなく「閲覧する資格」を、閲覧側も積極的に持つ努力をすべきだ、というある意味強気のスタンスです。国の文化の違いもあろうと思いますが、いくつかのヒントを見つけていただければ幸いです。


続きを読む

twitterヘッダー画像の制作のコツ

2015年5月におくればせながら「twitterのヘッダー画像の設定をしよう」を書いたところ、Hotentryに次ぐアクセス数があります。そういえば、ヘッダー画像の作成サイズを書いたブログ記事は多くあれど、作成のコツを書いている記事はあまりありませんね。わたしも手作業で、確認をしていったものです。ぜひ素敵なヘッダー画像を作っていただきたく、第二弾として今回のエントリーです。

続きを読む

IE10~でもfilterを効かせるには

巷で話題の東京オリンピックエンブレム。酷似していると言われる「リエージュ劇場」を検索してみました。

さすが!海外のホームページは進んでいますね♪レスポンシブデザインで素敵だなぁと思ったので、じっくり拝見しておりました。するとちょっと気になった仕掛けがありました。いや元々あったんですが、わたしが使っていなかっただけです(汗)。CSSのfilter:grayscale;です。

 

IE8までIEは独自路線で進んでいたのでfilter:gray;で対応したものの、IE10からfilter自体使えなくなって、クリエーターになんの恨みがあるのか…IE。そんな皆様にわたしの迷ントリーがお役に立ちますように。

続きを読む

SNSボタンを簡単生成するツール

SNSボタンは、イメージカラーが美しくアイコンが洗練されているので、ホームページデザインの一部として配置するサイトが増えています。


今回はそのボタンデザインを見ていくとともに、以前のエントリー「レスポンシブでの画像やボタンについて」で「ボタンは画像ではなくテキストデータで」という内容を書いたところ、在り難いことによくお読みいただいている記事のひとつとなりました。そこで今回も内容は近いのですが、簡単にSNSボタンをテキストデータを生成できるサイトをご紹介します。

続きを読む

iframeバナーのサイズを変える

わたしはこのお仕事ブログの他に趣味のブログを2つ書いています。このたび旅のブログのサイドカラムにV社の提供するバナーを貼ろうと思いましたが、カラムの幅が狭くサイズ調整で少し苦戦したので、今回はその原因と解決方法についてご紹介します。


アフィリエイトにちょっと苦手なイメージのある方も、せっかくブログを定期更新しているのであれば、ブログの趣旨にあったバナーを貼ることもできるので、エントリーを賑やかしとサービス向上のために積極的に始めてみるとよいと思います。

続きを読む

キャプチャに便利なG拡張機能とアプリ

例えば制作過程での確認事項や、マニュアル作成の時など、もちろんこのブログを書くときも、わたしは画面キャプチャをよくします。もっともベーシックなWin機能の【PrtSc】キーで、ペイントなどにペーストしている方もいるかもしれませんね。

キャプチャツールは、皆さんの主な使い方がアプリに受け渡すか、あるいは保存するだけなのかによっても便利なツールは変わってくると思いますが、2015年夏現在、いろいろと見て、「これがオススメ」というものを今回はご紹介します。

続きを読む

ここは8ページ中4ページ目です

   << 2 3 4 5 6 >>