HTML5 & CSS3 で電子書籍 も紙の本も作れるという話 2013-11-30 for HTML5 Conference 2013 LT 村上 真雄 (@MurakamiShinyu) Antenna House Formatter 開発者 HTML&CSSでWebを作れるなら、本も作れます。 電子書籍の世界標準仕様 EPUB。 EPUBの中身は、HTMLのコンテンツとCSSのスタイル、それと本の情報をまとめたもの。 Amazon KindleはEPUBと少し違うけど、HTML+CSSでできてるのは共通。 EPUB3.0（2011年）で、CSS3 Writing Modesによる縦書きとか、HTML5により動画やインタラクティブな電子書籍も可能に。 あらゆるものがHTML5でできるように… EPUB電子書籍もそうだけど、アプリの形した電子書籍も その他いろんなアプリも サイネージとか
このように@mediaを使用して出力先や解像度、サイズなどで条件分岐をしていき、必要のない要素を非表示にしたりして、見栄えを切り分けて製作していきます。 レスポンシブWebデザインのメリット・デメリット 前述のとおり、RWDでは同じCSSファイルで各デバイスのスタイルを共有します。そのため、共有しているスタイル変更の影響を受けやすく、制作をデスクトップとモバイルで分担している場合などは細かいレギュレーションを最初に決める必要があります。 とはいえ、モバイルとデスクトップをHTMLから切り分けた場合、完成後の更新の手間も二重にかかってしまいます。CSSで分岐して必要なプロパティのみ上書きしてデバイスに最適化するだけで同じ素材を共有できることは、サイト運営者にとって非常に魅力的です。 RWDのメリット デバイスごとに切り分けず1つのHTMLファイルで管理可能 スタイルを共有してテイストの統一性
Creative.Edge @commonstyle パネル3スタート：「CSSにおける将来の日本語レイアウト」／モデレータ: 石井 宏治氏(W3C CSS WG Editor)、パネリスト: 小池 利明氏(ボイジャー)、齋鹿 尚史氏(シャープ)、Nat McCully氏(アドビ システムズ) #css2011jp 2011-05-30 13:12:47 狩野宏樹 @KAN0U Natさんの説明まとめ(1) 各社ヒアリングをしてInDesign に最初に追加した機能は、ベースラインの計算。フォント毎に欧文ベースラインの設定がまちまちだったのが、行のずれの原因になっていた。 #css2011jp 2011-05-30 13:32:49
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回…
CSSWARPはテキストをベジュ曲線や円に沿って表示するJavaScript/CSSライブラリです。 Web Fontの登場によってWebサービスのロゴをテキストで記述するサイトも増えています。しかしまっすぐではなく多少のイフェクトをかけようと思ったらIllustratorのようなソフトウェアを頼らざるを得ませんでした。そこでCSSWARPを使って複雑な文字の描画を実現しましょう。 これがテキストというのが驚きです。 ちゃんと文字として選択できます。 こちらは自分で文字を作れるデモ。 ビジュ曲線でぐりぐり動かせます。 回り込みもできます。 円に沿って描いています。 その結果のHTMLを取得できます。IE9/Opera/Firefox/WebKit対応です。 CSSWARPはベジュ曲線などに沿って文字が描けます。テキスト、曲線の動き、フォント、フォントの配置など細かく変更が出来ます。後は生成
2011/05/17 画像タグのみ版追加→CSSだけでサイズ不定画像の中央を正方形に切り抜きサムネイル (かんたん！) 長方形の画像の中心部を正方形に切り出してサムネイル表示したいんだけど、縦横比が定まってない画像の場合ってどうやって中心部を切り出したらいいかしらね、という話。 画像の縦横比が分かっている(一定である)場合 このケースであればoverflow:hiddenな枠で画像を囲って位置を調整してあげればOK。特に問題は無いでしょう。 ↓等が参考になるかと思います。 http://www.multi.ne.jp/staff_note/2008/10/000543.php 画像の縦横比が不明だったり画像ごとにばらばらな場合 前述の方法だと、画像の真ん中辺を表示するために何pxずらして表示すればいいのか分かりません。できるエンジニアなら「じゃぁサーバーサイドでやるわ」とか「JavaScr
当初作っていたロングバージョンの方です。 先程の実際に使ったスライドは、作ったあとで、リハーサルして、削ったり足したり入れ替えたりしての完成型なのですが、こちらはとりあえずがががっと作ってみた、って段階のものなので、誤字とかちょいちょいありますし、解りにくい説明や順番だったりします。 試作ということでご了承くださいませ。 続きを読む
「紙媒体のデザイナーのためのWebデザインツール」――。そんなコンセプトの新しいソフト「Adobe Muse 2.0」を8月21日、アドビ システムズがリリースした。英語版は2011年8月にパブリックベータが公開されていたが、日本語版の提供は今回が初めて。単体パッケージは販売せず、Creative Cloudのメンバー（月額5000円〜）向けに提供する（単体サブスクリプションは計画中）。 マスターページ、ガイド、スウォッチ……おなじみの機能 Adobe Museは、HTMLやCSSなどのコードを記述せずに、Webサイトを制作できるソフト（Mac OS X/Windowsに対応）。Webサイトの制作では、PhotoshopやFireworksなどのグラフィックソフトでカンプを作成し、HTML/CSSをコーディングする流れが一般的で、HTML/CSSの知識が必須。「ホームページ作成ソフト」を使
The document discusses Twitter Bootstrap, an open-source front-end web development framework. It provides information on Bootstrap's history and features, including its grid system, typography, forms, buttons, navigation and other components. The document also offers tips on getting started with Bootstrap, customizing it using LESS, and related tools and resources.Read less
このサイトでは、W3C CSSの、主に日本語レイアウトに関する仕様を非公式に日本語翻訳した結果を掲載しています。 本ページがCSS日本語レイアウト関連仕様の理解の助けとなり、仕様策定を促進することを目的として作成しました。 更新情報 2013.8.7: 血統の森にてCSS Text Decoration Module Level 3(W3C Candidate Recommendation 1 August 2013)がすでに翻訳されておりましたので、本サイトでの翻訳を中止し、そこへのリンクを貼る形といたします。 2013.8.5: CSS Text Decoration Module Level 3 が2013.8.1にCRとなりましたので、仕様がある程度安定したと判断し、翻訳を開始いたします。 2012.6.10: 都合により、仕様がLast Callになるまで仕様の翻訳を休止いたしま
CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。 あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。 それ
Get 20+ {{creative-cloud}} apps for less than the price of 3 apps. The All Apps plan includes 20+ apps and services plus 20,000 fonts, storage, templates, and tutorials for less than the price of {{acrobat}}, {{photoshop}}, and {{premiere-pro}} sold separately. https://main--cc--adobecom.hlx.page/cc-shared/fragments/merch/products/catalog/marquee/includes {{free-trial}} {{buy-now}}
HTMLやCSS、DynamicHTML、JavaScriptやPerl、Windowsコマンド、ネットワークコマンド、Linuxコマンドといった、Webサイト構築やアプリ開発に欠かせないプログラミング言語とコマンドのリファレンスマニュアルです。各項目のサンプルコードは、コピーし貼り付けてすぐに使えます。入門講座も用意しました。ぜひブックマークしてお役立てください。 HTML HTMLは、Webコンテンツを作成する上で、最も基礎となる記述言語です。各タグについての概要や属性などをサンプルを交えて説明します。 HTMLリファレンス（107項目） HTMLリファレンスの使い方 HTML入門 CSS CSSは、Webページのレイアウトなどといったコンテンツの見栄えを指定する記述言語です。各スタイルの概要や使い方を説明します。 CSSリファレンス（73項目） CSSリファレンスの使い方 CSSの基
詳しくはコチラ→ position ボックスのレイアウト方法を指定するpositionプロパティ topプロパティ topプロパティは、ボックスを配置する場合に上からの距離を指定します。基準位置の上端から配置するボックスの上端までの距離を示します。positionプロパティが「static」以外のときに有効となるプロパティです。 詳しくはコチラ→ top ボックスを配置する場合に上からの距離を指定するtopプロパティ bottomプロパティ bottomプロパティは、ボックスを配置する場合に下からの距離を指定します。基準位置の下端から配置するボックスの下端までの距離を示します。positionプロパティが「static」以外のときに有効となるプロパティです。 詳しくはコチラ→ bottom ボックスを配置する場合に下からの距離を指定するbottomプロパティ leftプロパティ leftプ
2017年7月25日 Webサイト制作, 便利ツール 今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います！ ↑私が10年以上利用している会計ソフト！ 1. コーディング手順を簡略化する これは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。 CSSのレイアウトをノートに書き出す レイアウト部分（ヘッダー・メイン・サイド・フッター）のHTMLマークアップ CSSでレイアウト部分のスタイリング 表示確認 うまく表示できない箇所の修正 ヘッダー内のHTMLマークアップ CSSでヘッダー内の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
