inline-block を使う理由、それは 入れ子構造を作れることにより、改行位置の優先順位をつけられるから！ 詳しくは以降で説明します。 （前提）そもそも改行調整ってなんの話？ このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。 スペースで単語が区切られる欧文とは違い、日本語は単語の区切りがないので、改行すべき位置を機械的に判断できず、不自然な位置で改行されてしまうことがあります。そこで、見た目を整えるため、改行すべき位置を指定するための手法が必要になります。 他に詳しい記事がいくつもありますので、詳細はそちらを参照してください。 代表的な改行調整の手法 <wbr> 要素 <wbr>要素は、改行してよい位置を表す要素です。 親要素に対して word-break: keep-all; を指定して基本的には改行されないようにすることで、<wbr>要素がある位置で
CSSやJavaScriptのミニファイ（軽量化）、HTMLやCSSやJavaScriptやSQLのフォーマッター、各種エンコード・デコード、ダミーテキスト・ダミーデータ・ダミー画像・クレジットカードのジェネレーター、diff（ファイル比較）など、Web制作に役立つツールがまとめて利用できるSmallDev.toolsを紹介します。 いろいろなツールが揃っているので、ブックマークしておくと便利です。 SmallDev.tools smalldev-tools -GitHub SmallDev.toolsの特徴 SmallDev.toolsは、Web制作に役立つさまざまなツールが一箇所でまとめて利用できる便利サイトです。完全に無料で利用でき、登録など面倒なことは一切ありません。 最小限のインターフェース🤩 電光石火の速さ⚡ 広告はなし💩 プライバシーフリー🔐（データはすべて、サーバーに
昨今ではWebサイトやWebアプリケーションに対し「適切にページが表示されるか」だけでなく、ロード時間の早さやアクセシビリティといった使い勝手の良さも求められるようになっている。これらは利用者の満足度向上だけでなくGoogle検索の表示結果にも影響するため、できる限り対応しておきたい。そこで今回は、Googleが提供するWebサイト/Webアプリのパフォーマンスやアクセシビリティ診断ツール「Lighthouse」を紹介する。 さまざまな指標による診断を手軽に実行可能できるツール「Lighthouse」 WebサイトやWebアプリケーションを構築する際には、かつてはどんなWebブラウザでも同じように表示され同じように動作することや、検索エンジンによって高く評価されるようなマークアップを行うことが求められていた。これらは現在でももちろん重要ではあるのだが、昨今ではそれに加えて使い勝手の良さも求
2018年6月2日、WordCamp Osaka 2018にて。架空のWordPressサイト制作案件の詳細な見積とともに、日頃、私が何を考えて見積を組み立てているのかをご紹介しました。
可能な限り最新の情報を反映していますが、追いつけていないこともあります。本サイトに採用していても、記事に反映できていない設定もあります。ページのソースを読んでいただくと、参考になる箇所があるかもしれません。 ウェブページの高速化に関するテクニックは、ネットで検索すれば簡単に見つけることができます。優れた情報も数多くありますが、｢CSSとJavaScriptはminify（ミニファイ）しておけばOK！」のような都市伝説も少なくありません。 そこで、ここでは本サイトのデザインリニューアル時に施した対策をもとに、一歩進んだウェブページの高速化の方法と、それを支える原理について、できる限り分かりやすく説明したいと思います。フロントエンジニアやデザイナーの方からすれば「んなもん知っとるわ！」な情報なのかもしれませんが、都市伝説を駆逐すべく、私なりの仕方で解説（≒加勢）したいと思います。 初めに結果を
サイトごとにかかれているホームページ制作料金の相場がバラバラで、どれが本当の料金相場なのかがわからない。と感じていませんか？ 実際のところ、Googleで「ホームページ制作 費用 相場」等で検索して表示されているWEBサイトがいう料金相場は、決して間違えているわけではありません。 しかし、ホームページに求める効果・目的次第で、ホームページ制作費用の相場が大きく変わるので、適正な料金相場がわからないことが問題なのです。 こういった背景を踏まえてこの記事では、下記2点のことが分かります。 効果・目的別に必要なホームページの違いアナタの求めるホームページを制作するための適切な費用相場この2点がわかれば、使い物にならないホームページを作る事もなくなり、無駄に費用を掛けなくて済む助けになるかと思います。 ホームページ制作の費用相場（早見表）ホームページとはいってもコーポレートサイトや採用サイト、ポー
案の定です。想定通りです。そしてやっぱり完全無料です。 先日の『Google I/O 2016』で、Googleは本格的に「AI：人工知能使って色々やっていくよー！」と高らかに宣言したわけですが、やっぱり来ました。 GoogleアナリティクスへのAssistant機能提供です。 Google 純正AIが無料で診断＆アドバイスしてくれるAnalytics Appの新タブ『Assistant』 まずは手始めに。ということなのか、Android＆iOS版オンリーでの提供となりましたが、すでに提供が開始されています。 現状は英語版Googleアナリティクスアプリのみの提供ですが、日本国内からでもOSの設定言語を英語に変えればすぐに利用可能。 現状確認されているものとしては、どうやら以下のような感じでアドバイスをくれるっぽいですね。 先月と比較しての新規ユーザーこんくらい増えてるよこの画面、パフォー
私たちの会社では長らく、画面設計といえばPowerPointを使い、ワイヤーフレーム（以下、WF）を作っていました。Web制作会社における非常にスタンダードなやり方であったため、ベターな方法と受け入れつつも、例えば以下のような無駄も多く、決してベストではないとも感じていました。 設計者がコーダーに文書構造の意図を説明する時間の無駄 設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄 コーディング時にWFやPSD上のテキストをコピペして移し替える無駄 リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄 共通パーツに修正が入った時に各ページごとに修正を入れていく無駄 PC用とスマホ用の2種類のWFを作る無駄 更新するたびに新しいWFを印刷する紙の無駄 いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では？
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
はい高いですか？こんなもんですか？以下見積もりの説明です。 リニューアルと言っても、既存サイトはCMS化されておらず、たいして情報もアップされていなかったため、ほぼほぼ新規案件に近い、というイメージです。そのため、旧システムからのデータ移行費用が入っていません。その代わり、商品データベースは既存のものがあり、定期的にそこからデータを吸い出してCMS側の商品ページに反映するというカスタマイズが入っています。色々調査した結果、1週間でできそうという見込みのもとに見積もりしていますが、この要望はなかなか軽く収まらないことが多いですね。 コンサルティング費用にどのくらいかけるかというのはサイトの規模感によってまちまちだと思いますが、誰に向けたサイトで、何の目的で、対象となる閲覧環境は、用意するサーバーは、考えられるリスクは、など細かく資料に起こしていき、事前に複数回クライアント往訪のうえ打ち合わせ
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
このところHTML5関連のモバイルアプリケーション開発について調べていて、先週の水曜日にはSwapSkills主催のイベント「jQueryモバイルで簡単！ スマートフォンサイト作成」に参加してjQuery Mobileについて勉強してきました。 jQuery Mobileとは、jQueryのプラグインとして利用するモバイルアプリケーション用のライブラリです。そしてその驚異的なまでの簡単さは、これから業務用のモバイルアプリケーションの作り方を一変させてしまう可能性を感じさせます。 jQuery Mobileの大きな特徴は次の3つです。 1）HTMLを書くだけでモバイルアプリケーションができてしまう 2）モバイルのユーザーインターフェイス対応の部品が多く揃っている 3）iOS、Android、WebOS、Windows Moblie、Symbianなどクロスプラットフォーム対応である 具体的な
いろいろなところから2011年1月に集めてきた情報を要点を抑えて紹介していきます。これは何か、どんなシーンで使えるのかということを書くようにして、気持よく読めるようにまとめて行けたら良いです。情報を集めるのが苦手なあなたはこれだけ読めば結構身になるかもしれませんね。 これは Web サービスに使えると思った情報 使い方をその場で再現するスクリプト目の前でアニメーションして説明するスクリプト「Embedded Help System」 – GIGAZINE Web サービスのヘルプなどで使えるかもしれません。導入がそこまで難しくないようなので、ヘルプを作る際は一番最初にこちらを検討すると良いかもしれませんね。 ビジネスモデルについて学べるわかったつもりになっていませんか：「ビジネスモデル」とはなんだろう? 余談や説明が長すぎたので、個人的にためになりそうな要点だけ抑えておきます。 なんか微
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
「Favigen」は、画像からファビコンを作ってくれるサイトです。非常にシンプルで、画像をアップロードするだけでファビコンが完成しますよ。 以下に使ってみた様子を載せておきます。 まず、Favigenにアクセスしましょう。ファビコン化したい画像を指定して、アップロードします。大きさは、16px、32px、64pxの3種類から指定可能です。 しばらくすると、ファビコンが完成します。 「Download your favicon.」をクリックするとダウンロードできます。親切にも右下に、ファビコン設置用のHTMLコードもあります。コピペして利用しましょう。 シンプルで分かりやすいので、迷わずささっとファビコンを作れますよ。ブックマークしておくと便利です。 Favigen （カメきち）
笑顔を創りたいＷｅｂ屋の日常 Ｗｅｂ業界からひょんなことで専門学校の先生に。そしてまたＷｅｂ現場に戻ったＷｅｄディレクターのブログ。情報デザインやＷｅｂの勉強をしています。 あくまで”僕が”です。そこ大変重要ですｗ 僕もまだまだ勉強中で、これが全て正しいと思えるほど見極めていません。 他にもあるだろうし、もっと大事なものもあるかもしれません。 それは各々考えてもらって（もしよろしければ教えていただいてｗ）、とりあえず同タイプの仕事している人の叩き台にでもになればなと思って挙げてみた次第です。 というのもですね、僕はWeb屋としてみるとなんか物凄く変な経歴・経験をしている人なのですねｗ まあ、Web業界って割と他業界から来る人たくさんいますけどね。僕は印刷会社→大手Weｂ制作会社→専門学校教員（正規職員）→弱小ITベンチャーなので、なかなかこういう奴はいないと思いますｗ 教員とか普通はできま
Web制作時、個人的にかなり助かっ ているWebアプリやソフトウェアなど をご紹介。何度お勧めしても足りない 位、助けられています。低スキルな 自分にとっては無いと困る。そんな ツールをシェアしたいと思います。 もっと沢山あるんですが、特に利用しているものを。制作時には毎回利用しているかもしれません。基本的に無料のものを使っています。順不同。 960 grid system グリッドシステムです。ブックマークレットも含め、色々手軽なのが嬉しい。何よりグリッドレイアウトはお客さん受け良い傾向にある気がします。 960 grid system Firebug Web制作といえばFirebugですが、僕はChrome派なのでChromeエクステンションのLite版を使っています。元々、Chromeにはデベロッパーツールがありますし、FxのFirebugも使いこなせてなかったのでこれで十分。 Fi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
