タグ

HTMLに関するgazi4のブックマーク (9)

  • 「HTML解体新書」リフロー版電子書籍を作りました - 弁護士ドットコム株式会社 Creators’ blog

    4月に発売された書籍「HTML解体新書」。その電子版は今までPDF版しかありませんでしたが、このたびリフロー版が発売となり、Amazonでも購入できるようになりました。 この記事では、HTML解体新書のリフロー版電子書籍を実際に作成した際の流れについて、なぜ作成したのか、どうやって作成したのか、どのようなトラブルがあったか、といった点をご紹介します。リフロー版の電子書籍の作成、出版を検討されている方の参考になれば幸いです。 リフロー版の電子書籍を作った理由 リフロー型と固定レイアウト型 リフロー型とアクセシビリティ リフロー版の電子書籍を作るには 電書協 EPUB 3 制作ガイド 実際の制作の流れ テキスト原稿を用意する XHTMLを作る その他EPUBに必要なファイルを準備する OCFコンテナのメタデータを用意する mimetype container.xml OPFパッケージのデータを

    「HTML解体新書」リフロー版電子書籍を作りました - 弁護士ドットコム株式会社 Creators’ blog
    gazi4
    gazi4 2023/01/16
    電書協通りにするとアクセシビリティは進まない/Markdownを起点にしようというのは2010年頃からある話らしい https://www.dtp-transit.jp/adobe/indesign/post_2157.html
  • pixiv小説のようにCSS3とjQueryでHTMLを縦書き表示する方法【I'll be NET】

    吾輩(わがはい)はである。名前はまだ無い。 どこで生れたかとんと見当(けんとう)がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪(どうあく)な種族であったそうだ。この書生というのは時々我々を捕(つかま)えて煮(に)てうという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌(てのひら)に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始(みはじめ)であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶(やかん)だ。その後(ご)にもだいぶ逢(あ)ったがこんな片輪(かたわ)に

    gazi4
    gazi4 2018/06/01
  • JavaScript を使わず HTML と CSS だけで Todo アプリを書く方法 - Frasco

    HTMLCSS だけで Todo アプリを作りました。TodoMVC(今回デザインを使用使わせてもらいました)と違って JavaScript は使っておらず、すべてのインタラクションが CSS で動いています。 どういう仕組みなのでしょう?簡単に説明すると、HTMLCSS の一般兄弟セレクタ(~)、CSS カウンタ、それから :checked 、:target、:required 疑似セレクタを組み合わせてできています。詳細についてはこれから説明していきます。 アプリを試してみる ソースを見る できること: Todo の追加(最大50件) Todo の完了 Todo の削除 フィルタリング(完了・未完了) 残りのアイテム数をカウントする 空文字の追加を許可しない できないこと: ページリロード後の永続性の維持 「すべての Todo を完了にする(Mark all as done)」

    JavaScript を使わず HTML と CSS だけで Todo アプリを書く方法 - Frasco
    gazi4
    gazi4 2017/11/27
  • LINE風の吹き出しをCSSだけで表示、マークダウンならたった4文字の組み合わせで簡単記述! - 移転→hapilaki.net

    ブログに慣れていない人でも記事の中で簡単にLINE風吹き出しを表示できるCSSを自作した。マークダウン記法なら4文字(「-」「 」「1」「.」)の組み合わせだけで、コピペ不要でLINE風吹き出しの会話形式を簡単に表現できるよ。 見 まずは見を見せてよ。 OK。 こんな感じ。 これが4文字の組み合わせでできるの? この会話例は2文字の組み合わせなんだぜ。 半角ハイフン(-)と半角スペース( )だけ。 まぁ、ステキ💕 解説:見の記述例を図解 上の会話例を入力するときは次のように記述した。(下の記述例はキャプチャー画像) 分かりやすいように、拡大して補足説明を入れるよ。 各行ごとの説明。 改行だけ 半角ハイフン(-)3つで改行 改行だけ 半角ハイフンの後に半角スペース( )で改行 半角スペース2つ、半角ハイフン、半角スペースの後に会話内容 4行目と同じ 5行目と同じ 5行目と同じ 特徴:

    LINE風の吹き出しをCSSだけで表示、マークダウンならたった4文字の組み合わせで簡単記述! - 移転→hapilaki.net
    gazi4
    gazi4 2016/09/12
  • MWebは理想のマークダウンエディタかもしれない(Mac用) - よつば手帖

    文章を書くのに何かと便利なマークダウン マークダウン(Markdown)という文書形式はご存じでしょうか? 文章に少しだけ記号などで装飾する事で、簡単にHTML可出来ます。 シャープ( # )記号を文章の頭につけると見出しになったり、アスタリスク( * )2つずつで文字の前後を囲えば太字になったり、一つずつで囲うと斜体になったり。 メモをとる時も文書構造を保って書く事ができるので便利です。 HTML化しやすいというメリットが最大の特徴ではありますが、コードを書かずに素早く書けるというのが一番の魅力だと考えます。慣れれば慣れるほどその効果は絶大です。 Web制作者であればユーザーマニュアルをマークダウンで作成しておくと、加筆・修正などがとてもやりやすいです(細かいレイアウト調整はできません) 書籍の執筆時もマークダウンを使用しています。 マークダウンエディタ難民でした マークダウンエディタは

    MWebは理想のマークダウンエディタかもしれない(Mac用) - よつば手帖
  • 音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて

    音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて Updated 2015.01.20 / Published 2015.01.19 スクリーンリーダーや音声ブラウザなどの音声出力環境で::before擬似要素、::after擬似要素にcontentプロパティで生成した内容は多くのソフトウェアで読み上げることができます。使い方次第で、薬にも毒にもなりえます。読み上げることがないように制御したい場合は、aria-hiddenをtrueで設定するしか有効な方法がなく、制御できるのは対応しているものに限られます。 CSSの内容生成について HTMLなどで作られた文書内に直接表現されないものを表現するためにCSSには擬似要素というセレクタが用意されてます。CSS2よりcontentプロパティを伴って文書中に内容を生成できる:before擬

    音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて
  • SVG未対応ブラウザにおけるインラインSVGの挙動を細かく検証しました - 聴く耳を持たない(片方しか)

    この記事はSVG Advent Calendar 2015への参加記事です。初日の今日は私(id:rikuo)が担当します。 第2日目は@masuPさんが「ラスタ画像を配置したSVGファイルを作成する際に気をつけること | トレンドウォッチ | デジパ株式会社」を投稿されています。 SVG Advent Calendarはまだまだ空きもあるので、気軽にご参加ください。 はじめに SVGはJPEGやPNG, GIF画像と同じように様々な要素で利用でき、 <img src="foo.svg" alt="代替テキスト"> このようにimg要素や CSSのbackground-imageなどで使えます。 div{ background-image: url("foo.svg"); } このときSVGに未対応な古い環境ではどうなるかというと例えばimg要素であれば、何らかの理由で表示に失敗した画像(

    SVG未対応ブラウザにおけるインラインSVGの挙動を細かく検証しました - 聴く耳を持たない(片方しか)
  • Adobe公式サイトのFlash埋め込みの記事は間違い

    Adobe公式サイトの記事 Adobe公式サイトのFlashディベロッパーセンターには、Flash(SWF)をHTMLに埋め込む方法について次のように解説しています。 将来を見据えた、新たなHTML内SWF埋め込み用コードの考察 http://www.adobe.com/jp/devnet/flash/articles/spark_project_swf_embed.html この記事は現在も多くの人が参照していて、はてなブックマークなども沢山ついています。記事の趣旨は以下の通りです。 [html][/html] レガシーコードの例 このレガシーコードは、さまざまな種類やバージョンのWebブラウザで適切にSWFが表示されるようにと、Webクリエイターたちが各Webブラウ ザの機能やW3C勧告への対応度を踏まえて試行錯誤した結果、到達したコードです。レガシーコードの内容を簡単に説明しますと、

    Adobe公式サイトのFlash埋め込みの記事は間違い
  • Evernoteの無限カスタマイズ。HTMLやマークダウンの内容をノートに反映させる方法。 - あなたのスイッチを押すブログ

    Evernoteのテキスト入力には限界があります。テキストのフォントをあれこれ弄ることができますが、あまり手の込んだレイアウトを作ることはできません。 これに不便を感じていたので、なんとか「見栄えの良いノートを作る方法はないか」と模索していました。 そこで辿り着いた方法が、Macのテキストエディタ「Mou」を使う方法です。 「Mou」はMacで使える無料のテキストエディタ。HTMLにもマークダウン記法にも対応しており、ライブプレビューが使えるのが特徴です。 そして、この「Mou」で書かれたHTMLやマークダウンの結果は、コピー&ペーストをするだけで、Evernoteのノートに全て反映されます。 これが非常に驚きでした。そして、Evernoteのノートレイアウトの可能性を感じた瞬間でもありました。 Mouで書ける内容をカンタンにご紹介 上述した通り、「Mou」はHTMLにもマークダウンにも対

    Evernoteの無限カスタマイズ。HTMLやマークダウンの内容をノートに反映させる方法。 - あなたのスイッチを押すブログ
  • 1