CSS関連の記事一覧



Bootstrapをグリッドレイアウトっぽくする


みなさん、ウェブページの制作にBootstrap使っていますか。

最初から色々とclassが用意されていて便利に使えますよね。


しかし、Bootstrapは基本的にキレイに四角に並んだレイアウトをするのには向いていますが、並びに高さが違うものがあったりすると、あまりキレイに見えないのが難点です。


例えばこんな感じです。

Bootstrapで隙間が空いてしまう例


1行だけならまだ気にならないかもしれませんが、これが数行になると、高さが低い要素の下の隙間が気になります。この高さが違う要素をうまく処理できないものでしょうか。


そうした場合にMasonryという手法があります。

高さや幅が異なる要素のものを隙間なく敷き詰めるレイアウトの方法です。jQueryを使ったJavaScriptが有名ですね。


Masonry-01


今回はBootstrapを使いつつ、Masonryのようなグリッドレイアウトにする方法を紹介します。

スクリプト不要で、CSSを追加するだけなので、簡単に準備できる点がおすすめです。


ただ今回紹介する方法は、本格的なものではない簡易的なものなので、「幅が同じ」で高さが異なる要素を並べることに限定した使い方を想定しています。

具体的な使用例としては、TwitterやInstagramなどのSNS投稿をウェブページに埋め込むときに使います。

記事の続きを読む



20181125-HubSpotのフォームのスタイルCSSを変える-00

皆さん、HubSpot使っていますか?


ウェブのMA(Marketing Automation/マーケティング・オートメーション)でよく聞くツールのひとつがHubSpotです。

HubSpotの簡単な説明をすると、ベースにCRM(Customer Relationship Management/顧客とのやり取りを管理すること)としての機能がベースにあって、訪問客を惹き付け(アトラクト)、関係を築き(エンゲージ)、満足させる(ディライト)機能(※)があり、この流れを自動化も含め、より効果的に進めていくためのツールです。

もう少し知りたい方は以下のページをご覧ください。

インバウンドマーケティングとは? | ハブスポット

※ー罎付ける(アトラクト) 見込み客に転換する(コンバート) 8楜匆修垢襦淵ローズ) じ楜劼鯔足させる(ディライト)という定義もあります。


HubSpotのCRMは便利です。複数の営業担当がいる場合、お客様とのやりとりを自動で記録でき、コメントや売上情報なども残せるので、他の担当者がHubSpotのサイトで記録されたやり取りを見ることで引き継ぎが簡単に行えます。HubSpotのCRMはサインアップ(登録)すれば、無料ですぐに使えます。


さて、検索エンジンやSNSからウェブサイトへ訪問した方が、資料請求やお問い合わせをするときに必要となるのはフォームの機能です。HubSpotでは、資料請求やお問い合わせなどで使えるフォーム作成の機能を持っていて、フォームに入力された情報はCRMへそのまま記録することができます。

フォームのレイアウトはドラッグ&ドロップで簡単にできるので、複雑なプログラムがわからない方にもオススメです。


このフォームですが、標準のままだとフォームのスタイルの関係で、入力欄やエラー表示がわかりづらいのです。


HubSpotの有料版(HubSpot Marketing Starter以上)を契約していると、簡単に直せるようですが、まだそこまで本格導入するまでは…という方向けに、今回は無料版のままでも、フォームのスタイルの変更をできる方法を紹介します。

記事の続きを読む




●印刷にもWebにもそれぞれのルール

私はメインの業務が印刷データの処理を行うDTPオペレーションからWeb制作になってから、日が長いですが(とはいえ、つい先日も出力トラブルのあるデータの解析などをやっていましたが)印刷系のルールと、Web系のルールって、似ているようでかなり違うことを実感しています。


ここでよく勘違いされて困ることが、印刷系とWeb系でデザイン・制作をする際に、同じアプリを使用するということです。

IllustratorとPhotoshop、これは印刷でもWebでも必ず使うアプリです。

だから、印刷でIllustrator・Photoshopを使っていると、Webデザイナーになるのも簡単なのでは?と思ってしまいがちです。

そこが落とし穴!


印刷は印刷なりのルールがありますよね。


  • 裁ち落としを付ける
  • 画像の解像度は350dpiで
  • カラーはCMYKで
  • フォントはアウトライン化で
  • リンク画像はユニークなファイル名に

  • 他にもたくさんあります。こうしたルールが分かっていないと、「うわっ、データは来たけど結局手直しが必要…」とか「どこをどう直せばここが直るんだ?」とか「思ったカラーにならないけどどうするの?」とか、最終的にできあがる成果物(=印刷物)の品質に悪い影響が出たり、作業効率が悪くて後工程の人が納期や作業の面で辛い思いをしたりします。

    だからルールを学んで、品質を向上させ、作業がスムーズに流れるようにするのです。


    WebにもWebなりのルールがあります。

    そんなルールを現場のプロから学べる書籍が『プロにまなぶ現場の制作ルール84』(北村崇・浅野桜著、エムディエヌコーポレーション発行)です。

    20160416-プロにまなぶ現場の制作ルール84-01

    黄色い目立つ帯にはこう書かれています。

    PhotoshopやIllustratorでのデータの正しい作り方、納品するときの指示方法など、Webデザイナーとして“やるべきこと”と“やってはいけないこと”をまとめた、Webデザインの新しいルールブック。

    ルールを知ることで、Webデザイナーがどのような仕事と品質を求められているのかが分かる本です。

    記事の続きを読む



    20160217-日本語WebフォントをCSSでfont-family指定-00

    割と間違っている人は多いのかも?


    モリサワのWebフォントサービス「TypeSquare」を最近ようやく使い始めて、これは便利だと思い始めている今日この頃、みなさんいかがお過ごしでしょうか。



    ●目次



    ●ダメなCSSの書き方

    さて、既にタイトル落ちしている気もしますが、TypeSquareでは、

    font-family: "リュウミン R-KL","Ryumin Regular KL";
    font-family: "A1明朝","A1 Mincho";
    font-family: "中ゴシックBBB","Gothic Medium BBB";

    と、font-familyに同じフォントの「日本語のフォント名」と「英字のフォント名」を並べて書いてはいけません。

    記事の続きを読む



    20160212-Webフォントを滑らかにするCSS-00

    目次



    ●ブラウザーによってWebフォントの見え方が違う

    今更ですが、日本語のWebフォントを会社のサイトで使い始めました。


    元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。

    Webフォント - Wikipedia(Webフォント - Wikipedia)


    意外と導入は簡単で、そんなに読み込みが重く(遅く)感じることは少ない気がします。

    ただ、WebフォントはモリサワのTypeSquareを使っていますが、ブラウザーによって見え方が結構違うのだなと感じました。


    Windowsのブラウザーでは、ざっくり言うと、

    • Internet Explorer 11:キレイ
    • Edge 13:そんなにキレイではない
    • Chrome 48:そんなにキレイではない
    • Firefox 44:そんなにキレイではない

    と、こんな感じです。

    ※EgdeはEdgeHTMLのバージョン。ブラウザーのバージョンは25。


    意外にもInternet Explorer 11はそのままでOKです(笑)。逆に純正のEdgeはまだ発展途上のためか、そんなにキレイではありません。

    記事の続きを読む



    20150909-BootstrapとGoogleカスタム検索のCSS-00

    みなさん、Bootstrap使っていますか?

    私はこれがないともうWeb制作ができないほど毎回使っています(笑)。



    ●BootstrapとGoogleカスタム検索は相性が悪い?

    Bootstrapは非常に便利なのですが、Googleカスタム検索(Custom Search Engine:CSE)を使うと、こんな表示になりませんか?

    20150909-BootstrapとGoogleカスタム検索のCSS-01

    入力フォームは崩れ、虫眼鏡アイコンが入った検索ボタンは縦に潰れてアイコンが見えない…!


    今回はこうした表示のトラブルを解消する方法を紹介します。

    記事の続きを読む



    asahi.comが登場して20周年記念で、開設当時の様子を再現したページが公開されています。

    トップページでリンクしているニュース記事は2015年8月10日の最新のものだが、ページデザインは横480ピクセルに収まるサイズで作られており、背景色はシルバー(bgcolor="#c0c0c0")で、「HTML 3.0をベースにデザインしています。Netscape 1.x の使用を推奨します。」との注意書きもある。

    Netscape 1.xでの閲覧を推奨、20周年の「asahi.com」トップページが開設当時のデザインに -INTERNET Watch(Netscape 1.xでの閲覧を推奨、20周年の「asahi.com」トップページが開設当時のデザインに -INTERNET Watch)

    20150822-BlinkタグをCSS3で再現-02

    画像出典:Asahi NewsPaper Index(Asahi.com)


    懐かしいですね。灰色の背景とか、バナーの感じとか、微妙に英語とか。



    ●昔よく使われていた文字を点滅させるタグ「blink」

    このNetscape 1.0ネタではないですが、テキストを点滅させるblinkタグが昔のウェブブラウザーにあって、ホームページでよく使われていました。

    こういうものですね。(アニメーションGIFです)

    20150822-BlinkタグをCSS3で再現-01

    何か懐かしさを感じる表現ですね。

    最近のブラウザーではこのblinkタグに対応していないものがほとんどですが、これを新しい技術(CSS3)を使って再現してみます。

    記事の続きを読む



    20150801-Jimdo管理画面に文字を追加する-01

    画像出典:ホームページ作成サービス - Jimdo(ジンドゥー)


    ウェブサイトが簡単に作れるJimdoのロゴや管理画面が新しくなりましたね。



    ●新しい管理画面は分かりやすくなった

    さて、新しい管理画面ですが、以前Web担当者フォーラムのUX侍にてJimdoを取り上げたときにアイコンのラベルの常時表示した方が良いという話が出ていました。

    今回はこのUX侍の提案に沿った改善になっています。

    ▲▲ぅ灰鵐瓮縫紂爾離薀戰襪肋錣防充┐垢

    森田:あと、アイコンメニューのラベル文字は、常に表示しておくのが得策だと思います。マウスオンで見せるのでは、かっこいいかもしれないけれど、ユーザーは覚えられないし、メニューの意味がわからなければ、ユーザーは毎回マウスオンしないといけません。

    他にも、グラフのマークは、エクセルとかパワポを使っているユーザーは、図版が入れられるのかって勘違いしてしまいそう。アイコンは、どうしてもそういうミスマッチが起きるケースが多いので。アイコンを小さくしたとしても、ラベルを表示すべきだと思います。

    高畑:メニューのラベルの常時表示は対応検討します。

    スマホでウェブサイトを作る人増加中! UIリニューアルのカギは「モバイル対応」 Jimdo × UX侍 | UXサムライ(Web担当者Forum)


    ですが、以下の2つだけなぜか対応せず。ディスプレイっぽいアイコンと、電源マークのアイコン。

    これ、どういう機能か想像できますか?

    20150801-Jimdo管理画面に文字を追加する-01


    実は「編集しているページのプレビュー」「ログアウト」です。

    プレビューは分かりづらすぎでしょ…。なぜこの2つはラベルの常時表示にしなかったのか、理解ができません。


    というわけで、この2つのアイコンも常時ラベルを表示する方法を紹介します。

    記事の続きを読む



    20150507-Evernote-ClearlyでNoto-Sans-Japaneseを設定する方法-03

    先日「Webを読みやすくするEvernote Clearlyの表示フォントを游ゴシック体・游明朝体にする設定」というエントリーで游ゴシック体・游明朝体を指定する設定を書きましたが、Windows 8.1では游ゴシック体・游明朝体がインストールされていますが、Windows 7では游ゴシック体・游明朝体がインストールされていないので、設定しても意味がありませんでした。

    しかし、Clearlyの表示フォントがCSSで指定できるということは、Webフォントを指定することも可能です。

    Webフォントなら、サーバーに日本語Webフォントを用意しておけば、どの環境でも同じフォントで表示できます。


    というわけで、今回は、Clearlyの表示フォントを日本語Webフォント「Noto Sans Japanese」(別名:源ノ角ゴシック※)にする方法を紹介します。

    ※正しくは源ノ角ゴシックではありませんが、そっちの方が分かりやすい人もいるのであえてそう書きます。


    「Noto Sans Japanese」は、AdobeとGoogleが共同開発しているWebフォントです。

    「Noto Sans Japanese」はGoogleのWebフォントのサービスに登録されているので、すぐに使うことができます(参考:日本語ウェブフォント「Noto Sans Japanese」の指定方法(なぜか日本語に適用されない方向け)

    記事の続きを読む



    20150506-Evenote-Clearlyで游ゴシック体・游明朝体を設定する方法-00

    画像出典:Evernote Clearly(Evernote)


    みなさん、EvernoteのClearlyを使っていますか?

    このClearlyはFirefox・Chromeで使用できるアドオン・機能拡張で、Webの文章を読みやすくするためのアドオン・機能拡張です。


    このClearlyを使うと、本文にフォーカスした表示のされ方に切り替わって、文章がとても読みやすくなります。



    ●ClearlyでWebの文章がこんなに読みやすくなる

    例を見てみましょう。

    千葉県房総半島のいすみ市から大多喜町を走る路線のいすみ鉄道の社長さんのブログです。

    元のブログの体裁はこんな感じ(今はスタイルが変わりました)。

    左側にサイドバーがあって、ショップを見るボタンやカレンダーや最近のエントリーなどがあります。

    本文は右側に掲載されていますが、CSSでフォントがMSゴシックになっていて、行間は140%なので、ちょっと読みづらいです。

    20150506-Evenote-Clearlyで游ゴシック体・游明朝体を設定する方法-04

    画像出典:さようならトワイライト(いすみ鉄道 社長ブログ)(Internet Archiveのデータから)



    このWebページをClearlyを使って表示すると以下の様になります。

    本文だけが表示されるシンプルなスタイルに変更され、余計なものが目に入らなくなり、かなり読みやすくなりました。

    20150506-Evenote-Clearlyで游ゴシック体・游明朝体を設定する方法-07


    Clearlyは標準の設定でもWebの文章は読みやすくなりますが、今回は表示に使うフォントに「游ゴシック体」や「游明朝体」を設定して、さらに読みやすくする設定を紹介します。

    記事の続きを読む



    ブログ著者

    名前:(Google+のプロフィール)

    ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

    お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

    ブログ著者について

    サイト内検索