第8回 音声読み上げとWebライティング（その1） - WEBライティングと文章編集の実践テクニック - MdN Design Interactive
魅せる!読ませる! WEBライティングと文章編集の実践テクニック 文＝益子貴寛 （株）サイバーガーデン 代表取締役 Webプロデューサー／コンサルタント。（社）日本能率連盟登録資格「Web検定」プロジェクトメンバー。Webデザインに関する記事執筆、講義など多 数。『月刊web creators』（MdN）、ITpro（日経BP社）、Web担当者Forum（インプレスR&D）に連載をもつ。著書に『Web標準の教科 書 ─XHTMLとCSSでつくる“正しい”Webサイト』『伝わるWeb文章デザイン100の鉄則』（ともに秀和システム）。共著に『スタイルシート・デザ イン』（MdN）、『変革期のウェブ』（マイコミ新書）など。 url. www.cybergarden.net/ 第8回 音声読み上げとWebライティング（その1） Webライティングは、特に「テキスト情報の音声読み上げ」という点でアク
今さら聞けないRESTの話、効率的なコンテンツ配信を可能にするRESTとは？ - MdN Design Interactive
今、シンプルで扱いやすいRESTが注目を浴びています。昨今は1社が保有するWebサイトが増え、それぞれが異なるシステムを利用することも多く、管理が煩雑なケースがあります。このような場合の解決策の1つとしてRESTが活用されることもあります。さらに、行政データのオープン化に向けた動きが活発ですが、こうした場面でも効率よくデータ配信できるRESTの利用は進んでいます。今回は、セミナー登壇時にお話ししたことをベースに、RESTの概要と、参加者からよく受けるお悩みもあわせてご紹介したいと思います。 今回の内容は、PHPカンファレンス2016@東京にて「未来のWebに欠かせないREST APIをApache Solr + Drupalで実装しよう」というタイトルで講演したものです。当日使用したスライドも公開していますので、あわせてご覧ください。 URL：http://www.slideshare.n
スマートにレスポンシブWebをBiNDで実現！スマートにレスポンシブWebをBiNDで実現！ - MdN Design Interactive
スマートにレスポンシブWebをBiNDで実現！急務が叫ばれるサイトのスマホ化を本気で考えよう - いよいよスマホはPCからのアクセスを凌駕し、Googleも今後PC版よりもモバイル版のインデックスを主とすると発表をするなど、サイトのスマホ対応は無視できない状況にあります。そんな中で企業はどのようにスマホ対応に取り組んでいるのか、国内各所で開催されるマラソン大会を多く手掛け、大会にかかわる情報発信を自社で行っているランナーズ・ウェルネス情報管理部の清水敦子さんにお話を伺いました。今回は、大規模なマラソンイベントとして10年以上の歴史を誇る「湘南国際マラソン」のサイトのレスポンシブWeb化を通し、それを効率的に実現するツールBiNDを紹介します。 スマホユーザーにシフトする現代のWebサイト スマホをはじめとしたモバイル端末ユーザーに増加に伴い、Webサイトのスマホ対応が叫ばれ始めて久しいです
ドローンに関する法令や航空工学/飛行特性について学べる書籍「ドローンの教科書」 - MdN Design Interactive
ドローン関連書籍を取り扱うデジテックブックスは、ドローン検定協会公認の公式BOOKとして「ドローンの教科書」を発売した。無人航空従事者試験（ドローン検定）の対策テキストとしてはもちろん、無人航空機ドローンを扱う全ての人にとって活用できる内容の1冊。Amazonとドローン検定協会のWebサイトにて販売されており、全国書店での取り扱いも順次に開始される予定となっている。 本書は、航空工学や飛行特性、ドローンに関する法律などを分かりやすく解説した書籍だ。中央大学法科大学院客員教授 / 弁護士の寳金敏明氏が監修を務めており、ドローンを取り巻く法律関係についても言及されていることが大きな特徴。これまで発売されていたドローン検定公式テキストをもとに、12月に施行された改正航空法の内容を加えた書籍として構成されている。なお、無人航空従事者試験（ドローン検定）とは、ドローンを取り扱う従事者の知識レベルを客
Gitが、おもしろいほどわかる基本の使い方33_Chapter1-01 - MdN Design Interactive
［Chapter1-01］ Gitを使ったバージョン管理 チームで開発を行う上で、もはや欠かせない存在となったGit。でも、Gitを利用したことがない方、バージョン管理がよくわからない方は、Git が何をするものなのかもよくわからないでしょう。まずはGit によるバージョン管理の大まかなイメージをつかんでおきましょう。 2015年6月17日／TEXT：大串 肇 ■誰がいつ、どのファイルの何を変更したかを管理 ある開発プロジェクトをチームで行っている現場。「おーい、このファイル誰か更新した？」「あ、それボクです。」「え、どこ変えたの？」「えーとそれは……何行目だったけな…… 」「1カ所だけか？」「いや、何カ所か。あれ、メモっといたんだけど、えーとそのメモをどこのフォルダに入れたかと……。」「あ、。誰だよ、ファイル上書きしちゃったやつ！？」「あ、それ私。」「おれの書いたところが元に戻ってんじゃ
MdN Design｜総合情報サイト
01 text-shadow プロパティは「textshadow：X方向の距離、Y方向の距離、ぼかしの距離、影の色」の順に指定する。現在、FirefoxとGoogle Chromeではベンダープレフィックスなしで使用できる。まず、文字に単純なドロップシャドウをつけてみる【1-1】。コードは【1-2】だ。 【1-1】X方向とY方向10ピクセルの距離に影をつけた 【1-2】この後複数のタイポグラフィをつくっていくので、h1に共通のスタイルを指定しておく 02 X方向とY方向の距離を0にして、ぼかしの距離のみを指定すると、いわゆるグロ ー（光彩）を表現できる【2-1】【2-2】。写真等の上に文字を載せるときに、背景色にとらわれず文字を見やすくすることができる。この場合はRGBAのアルファ値の設定を併用するとより自然な表現になるだろう（アルファ値についてはLesson10にて解説。乞うご期待！）。
ゼロからはじめるHTML5でのサイト制作／第9回 XHTML1.0とHTML5のコーディングの違いを確認してみよう - MdN Design Interactive
これまでの連載では、HTML5での新要素の説明やHTMLから使用方法が変更になった要素、ブロックレベル要素とインライン要素の変わりとなった「コンテンツ・モデル」や「アウトライン」などについてまとめてきましたが、ここからは今まで解説したことのまとめとして、簡単なレイアウトをxhtmlとHTML5でのマークアップを比較しながら実際に作成してみたいと思います。 解説：（有）ムーニーワークス 林 豊／田崎一成 ●HTML5の基本の書き方 XHTML1.0とHTML5の基本のHTMLの違いを再確認してみましょう。HTML5といっても基本の書き方が大きく変わるわけではありません。極端なことを言えば、DOCTYPE宣言だけをHTML5の書き方にし、コンテンツのコードを既存のままにしてもHTML5になります。今回は新要素などを適切に使用して「コンテンツ・モデル」や「アウトライン」を意識してマークアップして
即戦力となるアナログ表現の技を押さえる - MdN Design Interactive
腕のいいデザイン事務所で修業しないと ふつうは身につかない知識と技と心得 10 即戦力となるアナログ表現の技を押さえる 解説： 高橋としゆき［Graphic Arts Unit］ url： www.graphicartsunit.com/ 使用ソフト: Photoshop CS3 かすれや汚れなどといった、アナログの演出がデザインで必要になる機会は多いはずだ。そうしたアナログ感の演出にはさまざまな方法があるが、基本的な手法はしっかり身につけておきたい。ここでは、デジタルだけでアナログ感を表現する方法を紹介しよう。 実際にプリントアウトして作業する時間や環境がない場合や、画材などを使ったアナログの作業を経ずに、もっと手軽にアナログ感を表現したいということもあるだろう。アナログ風の質感はPhotoshopのフィルタなどを駆使して表現することもできるので、そうした技を使った多彩なアナログ表現を覚
ゼロからはじめるHTML5でのサイト制作／最終回 ほとんどのCSSを変えずにxhtmlとHTML5で同じレイアウトを作成してみよう - MdN Design Interactive
前回までの記事で簡単なレイアウトを作成して、xhtmlとHTML5でマークアップしたものからHTML5の新要素の説明を行い、アウトラインを確認してみました。最終回となる今回はxhtmlとHTML5のCSSをほとんど変えずに同じレイアウトになるように作成してみたいと思います。 HTML5でCSSを設定する場合は新要素に対応していないブラウザに対してどうするのか。まだ確定していないHTML5の要素が変更になった場合を考慮して、スタイルの設定を考えた方が後々の大きな修正を回避できるのでベターです。ただ今回のレイアウトはほとんど同じCSSを使うということで作成するので、多少気になる部分もあるかと思いますが、ひとつの例として見ていただければと思います。 解説：（有）ムーニーワークス 林 豊／田崎一成 前回まででアウトラインを確認したそれぞれのマークアップしたページのサンプルこちらにあります。 ●HT
iPhone4Sで使えるケース総まとめ - MdN Design Interactive
初出：2011年10月21日／最終更新：2011年11月22日（商品追加） TEXT：MdN Design Interactive編集部 2011年10月14日に発売となったiPhone 4S。音声認識システムSiriが搭載されたりカメラ・ビデオがより綺麗に撮影できるようになったりと、大幅な強化が施されました。新たにiPhone 4Sを入手した人が次に購入するのは、ケースではないでしょうか。サイドボタンの位置がわずかに変更されたiPhone 4Sは、従来のiPhone 4用ケースが利用できないこともあります。そこでここでは、2011年10月以降に発表・発売されたiPhone 4S対応ケース情報をまとめました。ぜひご覧ください！ iPod関連製品やアプリのニュースはこちら >>> MdN Design Interactiveニュース＆トピックス「iPhone /iPod /iPad」の一覧を
MdN Design｜総合情報サイト
Node.jsのインストールと 下準備 Node.js のインストールは、UbuntusやMacを利用するのが簡単だ【4】。ちなみに今回はMacとパッケージ管理システムMacPortsを利用してインストールしている。MacPorts のインストールは、Web サイトからpkg 形式のインストーラが配布されているので参照して欲しい【5】。 Node.jsには開発を便利にするパッケ ージが多数配布されている。これらの一括管理には、パッケージ管理システムnpm(node package manager)【6】を使うとよい。npmはMacPortsではインストールできないため、curlを利用してインストールする。curlのインストールはMacPortsで可能だ【7】【8】。 Node.jsでWebSocketを利用したい場合、Socket.ioが便利だ【9】。Node.jsのパッケージとして配布さ
Facebookとソーシャルメディアマーケティングの歴史的大成功例との関係 - MdN Design Interactive
2011年1月31日 TEXT：小川 浩（株式会社モディファイ CEO 兼クリエイティブディレクター） クリス・ヒューズ（Chris Hughes）をご存じだろうか。 映画「ソーシャル・ネットワーク」でも、登場回数は少ないながら、Facebookの広報担当者として役割を果たした様子がうかがえる。そう、彼は世界最大のSNS、「Facebook」の共同創業メンバーのひとりなのだ。 彼はFacebookを創業したマーク・ザッカーバーグ（Mark Zuckerberg）のルームメイトで、取材が殺到するFacebookの初期のスポークスマンと して大きな役割を果たした。その経験を生かして彼が一気に全国区の知名度を得たのは、米国初の黒人大統領バラク・オバマ（Barack Obama）の当選に一役買ったためだ。 クリスは自身がゲイであるということからも、人権問題やマイノリティの社会的地位の向上について人
iPhone 4を買ったら入れたい、iPhone 4の機能を生かしたアプリ10選 - MdN Design Interactive
6月24日の発売以降、いまだに品薄状態が伝えられるiPhone 4。6月15日に予約を開始し、その数日後に予約した方でもまだ入手できていない方がいらっしゃる一方で、ショップの入荷状況や予約状況によっては“偶然”入手できた方もチラホラ。今後品薄状態は解消に向かうと思われます。また、発売が延期になっているiPhone 4のホワイトモデルも7月後半という発表がなされており（参考記事「アップル、iPhone 4白モデルは7月後半と正式に発表」）、ふたたび予約合戦が繰り広げられるかもしれません。 そこで本記事では、最新のOS「iOS 4」を搭載したiPhone 4の機能や性能、画面解像度や処理速度を生かしたiPhoneアプリを現時点で公開されているもののなかからご紹介します。 【こちらの記事もどうぞ!】 iPhone 4買ったらまずはじめに買いたい! iPhone 4ケース情報総まとめ これだけは入
超効率化！ たったふたつのフリーソフトで「何もないデスクトップ」を実現 - MdN Design Interactive
2010年6月24日 TEXT：藤原正平（株式会社ロフトワーク マーケティングdiv. プロデューサー） デスクトップにファイルやフォルダを置くと仕事が遅くなる 「デスクトップ上にファイルが多いと、PCの動作が遅くなる」という話を聞いたことはないだろうか。PCはデスクトップに置かれたファイルやフォルダのアイコンを描画するために、CPUやメモリに絶えず負荷をかけている。ウインドウを立ち上げて何らかの操作を行っている間も、その裏側でPCは絶えずデスクトップの描画を続けている。これは明らかにむだな負荷だ。 「すぐに使うから（よく使うから）デスクトップに置いておこう」という考え方もあると思うが、仕事が忙しく、業務が積み重なるうちにアイコンだらけのデスクトップで作業を行うことになりかねない。これではかえって仕事の効率は悪くなってしまう。 筆者のデスクトップ（決してコラムのために一時的に綺麗にしている
MdN Design｜総合情報サイト
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──コーディングに使えるツール（1） クラウド隆盛の昨今、ソフトウエアと同等か、それ以上に便利な機能を持ったオンラインサービス／ツールが豊富に取りそろってきた。本記事では、オンラインサービスの中でも無料利用が可能なものを選りすぐり、Web制作を6つのシーンに分類してより快適に作業するための 82の活用術の中から、今回と次回はWeb制作に使えるデザインに特化した無料オンラインツールの活用法の中から、コーディングに使える6点ずつ紹介する。デザインの幅を広げ、Webサイトの質を高める実践方法を試してほしい。 ■バックナンバー 第1回 デザインに使えるツール（1）はこちら 第2回 デザインに使えるツール（2）はこちら 第3回 デザインに使えるツール（3）はこちら Tweet [technique 01]CSS 3の表
手軽にWebを彩るCSSコーディングテクニック50 - 海外デザイン事情第7回 - MdN Design Interactive
第7回「手軽にWebを彩るCSSコーディングテクニック50」 2010年03月15日 基本的なCSSを使ったWeb制作はそれほど難しくないが、より高いレベルのデザインを実現しようとすると、難易度はグッと上昇する。そんなときは、世界中のデザイナーやデベロッパーが提供しているCSSテクニックを使ってみるとよいだろう。ここでは、世界各国のデザイナーやデベロッパーが紹介している、ビジュアル表現やレイアウトなどを中心としたCSSのコーディングテクニックを紹介していこう。 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) http://www.smashingmagazine.com/2010/0
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これからはFlexboxの時代!? 思わずテンションが上がってしまうCSS3のレイアウトモジュール「Flexbox」（後編） - MdN Design Interactive
モリサワWebフォント「TypeSquare」が文字詰めに対応！デザイナー、デベロッパー必見のカーニング機能。 - MdN Design Interactive
MdN Design｜総合情報サイト
MdN Design｜総合情報サイト
