HTML関連の記事一覧




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

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


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

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

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

そこが落とし穴!


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


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

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

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


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

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

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

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

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

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

    記事の続きを読む




    20160318-Illustratorの文字組みや詰めをWebで再現する-00


    ●Webでタイポグラフィはムダ?

    はてなブックマークで話題のページでこんな記述がありました。(以下は原文ママ)

    文字の間隔や改行位置がデバイスやユーザーの環境によって変わり同じ見た目を保証できない中、それをコントロールすることに注力すべきでしょうか?それを実装するエンジニアの工数は効果に見合ったものでしょうか?ユーザーはどんなメリットが得らるのでしょうか?何をもって美しいタイポグラフィとするのでしょうか?

    Dear Web designer(Medium)

    なるほど。

    でも、作り手の苦労はクライアントからしたら結構どうでも良くないですか?


    クライアントも、何の考えもなしに「紙とWebって同じようにできませんかねぇ」と言っているのではなく、(レイアウトやタイポグラフィ含め)印刷物で表現した世界観をWebでも同じように再現できれば、「紙のカタログは凝っているけど、ウェブはちょっと違うな…(メイリオフォント)」みたいな世界観の断絶を少しは和らげられるのでは、と思って発言されているのだと思います。

    それをメディアが違うから…と頭ごなしにバッサリ切ってしまうのは、少し違うと思うのですよね。(もちろん考えなしに発言する人も多いでしょうが)


    当然、コストの問題もあると思いますので、(改行位置はともかく)ユーザーの環境で同じように見えて、工数が少なければ良いのか!(ポジティブ思考)と考えて、Illustratorで制作したタイポグラフィ・文字組みを同じようにWebでも反映したいという要望に敢えてチャレンジしてみました。


    記事の続きを読む



    20150530-IEの条件付きコメントをJavaScriptに置き換える-01

    今回紹介するのはWeb制作の中でInternet Explorer(IE)の条件付きコメントが使用できない場合(禁止されている場合)にJavaScriptで対応する方法です。


    ●条件付きコメントとは?

    条件付きコメントというのはIEで動作する、HTMLのコメント機能を利用した条件分岐ができる機能です。

    簡単な例としてはIE6だけ読み込ませたい内容を書くには以下の様に書きます。IE6で独自に適用したいスタイルシートやJavaScriptの読み込みをすることが可能です。

    <!--[if IE 6]>
     ここはIE 6だけが読み込みます
    <![endif]-->

    なお、この機能は、便利な機能ですがIE10で廃止されました。



    ●条件付きコメントをJavaScriptで置き換える

    たとえば、IE8(Internet Explorer 8)以下で、HTML5の要素を有効にして、メディアクエリーを有効にしようとこんなコードを使いたいとします。

    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    


    しかし、諸般の事情で条件付きコメントが使用できない場合は、JavaScriptで置き換えることで対応できます。

    記事の続きを読む



    20150417-Google-Codeの終了でhtml5shivがロードできなくなる-01

    画像出典:Google Code


    Google Codeがスパムや悪質なプロジェクトのために2016年1月25日に終了するというニュースが3月にありました。

     米Googleは3月12日(現地時間)、開発者向けにAPIなどを提供したり、オープンソースプロジェクトをホスティングするサービス「Google Code」を来年1月に閉鎖すると発表した。同日、新たなプロジェクトの作成はできなくなった。
    「Google Code」、2016年1月25日に閉鎖へ GitHubへの移行を奨励 - ITmedia エンタープライズ


    その時は「開発者向けのページが閉鎖か、別に開発者ではないし…(プロジェクトをアップしているわけでもないし)」という位にしか思っていなかったのですが、実はWeb制作者に影響があるかもしれません!(というか私は影響がありました(汗))


    ●IE8対応で…

    Internet Explorer 8(IE8)でHTML5対応するために、こんなコードをheadタグ内に書いていませんか?

    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->


    そう、IE8はHTML5の新しい要素に対応していないので、スクリプトで対応するようにしてくれる優れもの「html5shiv」です。ファイルを自分で用意しなくてもホスティングしてくれているので簡単ですよね。

    老舗のサイト「TAG index」のページでもそう書かれています。


    私も使っています。というか、このブログのPC版は現在そうなっています。


    この素晴らしいスクリプトのhtml5shivですが、ホスト名をよく見てみると「html5shiv.googlecode.com」。

    そう「html5shiv.googlecode.com」です。


    ダメですね…。

    2016年1月25日を過ぎたら、html5shivのファイルがロードできなくなって、IE8では体裁が崩れます。

    記事の続きを読む



    今回は少し(?)お恥ずかしい話を。


    会社のウェブサイトで営業所や店舗一覧みたいなページってありますよね。

    そこに各営業所や店舗の地図を入れることも多いですよね。その際に、地図を描くのではなく、Googleマップを入れることも多いのではないでしょうか。


    ●Googleマップには2つの表示方法(配置方法)がある

    ウェブページ配置用のGoogleマップには、2つのタイプがあります。

    まず、拡大・縮小・スクロールなどの操作ができるインタラクティブタイプがあります。


    そして、単なる画像として表示するスタティックタイプ(Google Static Maps)です。

    この単なる画像として表示するGoogle Static Mapsはいわゆるガラケー(スマートフォンではない携帯電話)のブラウザーでも表示できるので、結構以前から使用されていました。

    私は以前からウェブページの制作でGoogle Static Mapsを使用していますが、現在でも、よく使用しています。



    ●Google Static Mapsが表示されない!?

    このGoogle Static Mapsは画像としてimgタグで挿入できるので、コントロールがしやすくて便利なのですが、会社のスタッフから「会社の事業所案内のページで地図が表示されないことがある」との意見をもらいました。

    早速確認してみると、地図は表示されています。

    ただ、何回かリロードしてみると表示したり、しなかったり…。

    謎の現象です。(表示されるかされないかはっきりしてくれ!)

    記事の続きを読む



    ●ページの公開時間や更新時間はGoogleの検索結果に表示される

    早速本題ですが、ページの公開日時や更新日時をHTMLタグでページ内に書いておくと、Googleで検索する際に表示されますよ、というお話。

    パッと見で、新しい情報か、古い情報かがすぐ分かって便利ですね。


    以下の画像は「授与品袋」で検索した結果。

    スニペットの部分に「2010/50/21」と日付が表示されています。

    20150227-HTML5のtimeタグでページの更新日時-01


    これは、授与品袋・手提げ紙袋・たとう紙(吉田印刷所)のページのフッター部分にある「公開時間」が反映されています。横に更新時間もありますが、そこの日時はGoogleの検索結果では出てきていません。

    つまり、検索結果をコントロールすることができるのです。

    20150227-HTML5のtimeタグでページの更新日時-02


    そのために使うのが、HTML5のtimeタグです。

    timeタグは日付を表す際に使用します。それだけで特に公開日時や更新日時を表すものではありません。


    細かなtimeタグの話は上記ページをご覧頂くことにして、記事タイトルにある「ページの更新日時をHTML5のtimeタグを使用して表現」してみましょう。

    記事の続きを読む



    20150205-MovableType-TinyMCEでBootstrapアイコン-01

    ●リッチテキストエディタでBootstrapのアイコンが消える

    Movable Type 6にて標準搭載されているリッチテキストエディタのTinyMCEがあります。

    このTinyMCEのエディタを使用し、HTML編集モードにして以下のHTMLを記述します。

    <p><span class="glyphicon glyphicon-circle-arrow-right"></span></p>

    <span class="glyphicon glyphicon-circle-arrow-right"></span>はBootstrapのアイコンの記述です。


    その後、リッチテキストエディタ(WYSIWYGモード)に切り替えると、HTMLのタグが消えて以下の様になってしまいます。

    <p><br /></p>

    これでは本文中にBootstrapのアイコンを入れることができません! なんてこった!

    記事の続きを読む



    みなさん、はてなブックマーク使っていますか? そしてブログに設置していますか?

    今回ははてなブックマークボタンを設置するにあたって、(本当に)ほんの少し高速化した状態で設置してみましょう。素早く表示されるのは訪問者にとっても悪くないはずです。


    ●はてなブックマークボタンの設置について

    はてなブックマークボタンは、はてなブックマークボタン作成のページでフォームに必要事項を入力すれば、HTMLコードが右側に表示されるので、コピーして使えば簡単に使えます。

    20140511-はてなブックマークボタン表示高速化-03

    画像出典:はてなブックマークボタンの作成・設置について(はてなブックマーク)


    こんなHTMLコードです。

    <a href="http://b.hatena.ne.jp/entry/http://dtp.jdash.info/" class="hatena-bookmark-button" data-hatena-bookmark-title="jdash2000 site" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img  src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" style="border: none;" height="20" width="20"></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>


    このHTMLコードを設置すると、HTMLコードに書かれているスクリプトが読み込まれるまで、以下の画像が表示されます。(表示される4倍のサイズにしています)

    20140511-はてなブックマークボタン表示高速化-01


    スクリプトが読み込み終わって実行されると、以下の画像の様に、はてなブックマークでブックマークされている数と共に表示されます。表示される4倍のサイズにしています)

    20140511-はてなブックマークボタン表示高速化-02


    今回、このHTMLコードで読み込まれている画像に注目してみました。

    記事の続きを読む



    このブログのフッター部分にはメッセージを送るフォームがあります。

    このフォームで何も書かずに「確認する」ボタンを押してフォーム送信したらどうなるのでしょうか。

    20140424-フォームコントロール-HTML5-01


    ページが移動して(画面が遷移して)エラーが表示されます。

    「名前を入力して下さい」「メッセージを入力して下さい」というエラーが表示されます。

    20140424-フォームコントロール-HTML5-02


    こういうパターン、一昔前にはよくありましたよね。フォーム送信した後にエラーが表示されるパターン。

    一昔前のフォームであれば、これでも仕方が無いのですが、HTML5の時代です。フォームのエレメントに属性を付けるだけで、フォームを送信する前にエラーのチェックができるのです。

    属性は5秒以内で付けられる簡単なものですので、フォーム入力がある場合、ぜひ付けておきましょう。

    それではその属性を紹介します。Firefox 28・Internet Explorer 11・Chrome 34での動作も調べてみました。

    記事の続きを読む



    狙ってやったわけではないですが、アイドルマスター Live for You!の「隣に…」(双海真美版)の動画をTwitterに共有したら、動画のサムネイルがひどいことになった。


    これは吹かざるを得ない(笑)。

    20140119-隣に…のYouTube動画をTwitterに共有-01

    デカすぎですよ!(゜Д゜)

    何ピクセルあるんですか!!!!(測ったらプレイヤーの高さは780ピクセルでした)




    記事の続きを読む



    ブログ著者

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

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

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

    ブログ著者について

    サイト内検索