Webブラウザで本を作ろう【CSSで組版 第1回】 本コーナー「がっつり試し食い!」の新連載【CSSで組版】をスタートします!本連載では、HTML+CSSで組版を実現するVivliostyleでの組版を紹介しつつ、そこで使われるCSS仕様を解説していきます。
印刷・出版のためのオンラインエディタ Viola のご紹介 spring-raining (Vivliostyle プロジェクト コラボレーター) はじめまして、Vivliostyle プロジェクト コラボレーターのspring-rainingです。今回は Vivliostyle を活用して私が制作したオンラインエディタ、Viola についてご紹介したいと思います。 開発経緯 2016 年、私はソフトウェア開発について紹介する同人誌を執筆するため、組版ソフトウェアを探していました。当時(そして今でも)そのような用途のための組版ソフトウェアのうち、デファクトスタンダードは LaTeX でした。しかし、私は自力で技術書を執筆し、レイアウトを思い通りに変更できるほど LaTeX を自在に扱えるとは言いがたく、別の選択肢を探していました。そんな時見つけた Vivliostyle は、Web アプリ
HTML/CSSを書くとき、「あれ、これ何だったっけ?」ってことがありますよね。私はしょっちゅうありますw そういうとき、ちらっとチートシート(カンペ)を見て効率よく作業を進められるよう、便利なチートシートをまとめました。 似たような記事は既にたくさんありますが、リンク切れになっていたりするので、自分用に便利なチートシートをまとめ直してみます。 HTML HTMLクィックリファレンス HTML5 タグ★チートシート(PDF版/画像版) CSS スタイルシートリファレンス CSS3プロパティ&ブラウザ対応一覧 CSS初期値一覧なチートシート CSS Flexboxチートシート CSS3 Media Queriesの書き方 HTML HTMLクィックリファレンス www.htmq.com 老舗ですね。HTML他CSSの早見表、HTML/CSSの基本があります。とりあえず困ったときはココ! HT
今回は見出し(h1〜h6タグ)のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" /> /* 好ましくない例 */ これを使うことで横幅1024px以下のデバイスでアクセスされた場合に、ipad.cssを読み込むということはできるんですが、PCの場合でもこの程度の解像度のものはありますし、なおかつ利用しているブラウザが最近のものであれば、このコードを理解してしまいます。 つまり、「iPadだけ」に適用させるということは実質できないということになります。 この点はご注意ください。 デバイスの幅に左右されないリキッドレイアウトにする 前述のユーザーエージェントの話に次いで、レイアウトの話です。 iPadのデバイスとしての画面サイズはポートレート(縦向き)であれば 横
リニューアル後のmixiを2カラム/750px幅化するユーザースタイルシートを書いてみた 2007-10-01 別に2カラム原理主義者というわけではないのですが、カラム変更オプションが無くなったのでついカッとなって書いてみました。 目次 適用前、適用後 適用前 適用後 解説 Firefox向けで、ユーザースタイルシートの適用は「Stylish」拡張をインストールすると便利です。 2カラムにするだけではなく、個人的にほとんど使わない機能へのナビゲーションまで削除しちゃってるので、ちょっと注意が必要です。リニューアル後のmixiのHTMLはid名とclass名が変態的なまでにきっちり設定されているのでCSSがわかる方はソース眺めつつ調整してください。ユーザースタイルシートの内容は以下の通り 調整 全体の横幅 750px化 全体を中央揃え フッターリンク左右の余白調整 非表示 右カラム全部 ロゴ
Ed Eliot氏およびStuart Colville氏は9月28日(ドイツ時間)、Webページにおける画像の読み込みオーバーロードを軽減するためのおもしろい取り組みをWebサービス「CSS Sprite Generator」として公開した。ページを読み込む場合、画像を要求するHTTPリクエストが発行されるわけだが、「CSS Sprite Generator」はその要求数を低減させようとするものだ。 ページが画像を多く含んでいる場合、画像を取得するためのHTTPリクエストが大量にWebブラウザから発行されやすくなる。このHTTPリクエストを軽減するために、ページで使われている画像をひとつの大きな画像にマージしてしまい、かわりにCSSの機能を使ってマージされた画像から必要な部分だけを表示しようというのがCSS Sprite Generatorでの発想だ。 CSS Sprite Generat
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く