Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vivliostyleの公式テーマをカスタマイズして、ゆめみ大技林 '22のテーマを作った

macneko-ayu
December 18, 2022

Vivliostyleの公式テーマをカスタマイズして、ゆめみ大技林 '22のテーマを作った

2022/12/18に開催された2022年12月-Vivliostyle開発者会議で登壇した際の資料。
https://vivliostyle.connpass.com/event/269454/

macneko-ayu

December 18, 2022
Tweet

More Decks by macneko-ayu

Other Decks in Technology

Transcript

  1. Vivliostyle




    '22
    2022 12 -Vivliostyle

    2022/12/18


    macneko_ayu

    View Slide



  2. Twitter: @macneko_ayu


    iOS


    iOS DTP


    PEAKS
    iOS 3


    View Slide

  3. 22



    View Slide





  4. Zenn Vivliostyle
    '22

    View Slide

  5. 22

    View Slide

  6. 22
    iOS
    13


    Vivliostyle
    22
    https://techbookfest.org/product/
    9
    g
    7
    iLPz
    8
    dzmL
    2
    QrrbedbxG?productVariantID=gfsBNShXyWyxHiubY
    2
    f
    1
    m
    7

    View Slide

  7. View Slide





  8. 1
    C


    Markdown



    CSS

    View Slide

  9. tech-book B
    5
    A
    5









    etc.

    View Slide

  10. A
    5







    View Slide

  11. _variables.scss A
    5

    View Slide

  12. _variables.scss


    InDesign
    CSS

    View Slide

  13. _variables.scss


    View Slide



  14. _media.scss _counter.scss

    View Slide

  15. _base.scss 0.2em

    View Slide

  16. pre
    CSS


    https://lab.syncer.jp/Web/CSS/Snippet/
    1 1
    /


    URL
    FIX

    View Slide

  17. 1
    C
    1C PDF
    1C




    _variables.scss

    View Slide

  18. 1
    C
    _variables.scss


    _variables.scss if
    $print-mode 1C 4C

    View Slide

  19. 1
    C

    View Slide

  20. Markdown


    Markdown
    _base.scss CSS


    https://vivliostyle.org/ja/tutorials/con
    fi
    gure-page-text/
    #%E
    3
    %
    83
    %
    9
    A%E
    3
    %
    83
    %BC%E
    3
    %
    82
    %B
    8
    %E
    3
    %
    8 1
    %AE
    %E
    5
    %A
    7
    %
    8
    B%E
    3
    %
    81
    %BE%E
    3
    %
    82
    %
    8
    B%E
    5
    %
    81
    %B
    4

    View Slide

  21. Markdown


    View Slide

  22. Vivliostyle Vol.
    5



    https://docs.vivliostyle.org/#/ja/create-
    book#%E
    5
    %A
    5
    %A
    5
    %E
    4
    %BB%
    98
    %E
    3
    %
    8
    1
    %AE%E
    8
    %BF%BD%E
    5
    %
    8
    A%A
    0

    Vivliostyle Vol.
    5

    https://vivliostyle.org/ja/samples/
    #:~:text=Vivliostyle%
    2 0
    %E
    3
    %
    81
    %A
    7
    %E
    6
    %
    9
    C%AC%E
    3
    %
    8 2
    %
    9 2
    %E
    4
    %BD%
    9
    C%E
    3
    %
    8 2
    %
    8
    D%E
    3
    %
    81
    %
    86
    %
    2 0
    Vol.
    5

    View Slide

  23. Markdown

    View Slide

  24. _theme_common.scss


    View Slide

  25. CSS


    Vivliostyle: PDF
    CSS


    https://zenn.dev/sky_y/articles/markdown-
    advent-
    2
    0 20
    -
    vivliostyle
    4
    #%E
    3
    %
    8
    3
    %
    86
    %E
    3
    %
    8
    3
    %BC%E
    3
    %
    8 3
    %
    9
    E%
    E
    3
    %
    82
    %
    92
    %E
    3
    %
    82
    %B
    3
    %E
    3
    %
    83
    %
    9
    4
    %E
    3
    %
    8 3
    %BC%E
    3
    %
    8 1
    %
    9 7
    %E
    3
    %
    81
    %A
    6
    css%E
    3
    %
    8
    2
    %
    92
    %E
    8
    %BF%BD
    %E
    8
    %A
    8
    %
    9
    8
    %E
    3
    %
    8
    1
    %
    9 9
    %E
    3
    %
    8 2
    %
    8
    B

    View Slide

  26. CSS
    _base.scss CSS


    Markdown
    HTML

    View Slide

  27. CSS
    CSS


    View Slide








  28. https://zenn.dev/macneko/articles/
    06
    aec
    1
    3
    8
    a
    3 57
    b
    9
    #%E
    7
    %AB%A
    0
    %E
    3
    %
    82
    %BF%E
    3
    %
    8
    2
    %A
    4
    %E
    3
    %
    8 3
    %
    8 8
    %E
    3
    %
    8
    3
    %AB%E
    3
    %
    81
    %AB%E
    9
    %A
    3
    %BE%E
    3
    %
    82
    %
    8
    A%E
    3
    %
    82
    %
    92
    %E
    3
    %
    81
    %
    84
    %E
    3
    %
    82
    %
    8
    C%E
    3
    %
    8 2
    %
    8
    B

    View Slide

  29. View Slide




  30. Vivliostyle


    CSS


    View Slide



  31. Class

    View Slide

  32. Vivliostyle





    Vivliostyle


    FIX

    View Slide

  33. CSS
    HTML HTML


    View Slide

  34. View Slide

  35. 22


    Vivliostyle




    Vivliostyle

    View Slide

  36. View Slide