Haml/Sass
<body>
HTML+CSS
 </body>
�
�
%h2
  %span
%h2
-- %span
<h2>
  <span>   </span>


</h2>
!!! XML
!!!
%html
  %head
    %title
  %body
    %h1
    %h2
      %span   :
!!! XML
!!!
%html
  %head
    %title
  %body
    %h1
    %h2
      %span   :
!!! XML   <?xml version='1.0' encoding='u
!!!       <!DOCTYPE html PUBLIC "-//W
markup haiku


!!! XML     <?xml version='1.0' encoding='u
!!!         <!DOCTYPE html PUBLIC "-//W
markup haiku
          markup golf
!!! XML     <?xml version='1.0' encoding='u
!!!         <!DOCTYPE html PUBLIC "-//W
h2
  span
    :color midnightblue
h2
   span
     :color midnightblue




h2 span {
  color: midnightblue; }
%head
  %style{ :type => ‘text/css’ }
    :sass
      h2
         :font
           :weight normal
           :size medium
...
%head
  %style{ :type => ‘text/css’ }
    :sass
      h2
         :font
           :weight normal
           :size medium
...
%head
  %style{ :type => ‘text/css’ }
    :sass
      h2
         :font
           :weight normal
           :size medium
...
ifchanged
ifchanged
%body
  #header
    %h1
    %h2
      %span    :


  #main
    %h2
    .section
%body
  #header
    %h1
    %h2
      %span    :


  #main
    %h2
    .section
<body>
  <div id=”header”>
    ...
  </div>
  <div id=”main”>
    <h2>   </h2>
    <div class=”section”>
    </div>
  </di...
<body>
  <div id=”header”>
    ...
  </div>
  <div id=”main”>
    <h2>   </h2>
    <div class=”section”>
    </div>
  </di...
#main
  %h2
  .section
    %table
      %tr
        %td
        %td
        %td
#header
  ...
#main
  h2
     :border-left 10px solid midnightblue
     :padding-left 15px
  .section
     :margin-left 10...
#header
  ...
#main
  h2
     :border-left 10px solid midnightblue
     :padding-left 15px
  .section
     :margin-left 10...
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Haml/Sassを使って履歴書を書くためのn個の方法
Upcoming SlideShare
Loading in...5
×

Haml/Sassを使って履歴書を書くためのn個の方法

2,656

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,656
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Haml/Sassを使って履歴書を書くためのn個の方法

    1. 1. Haml/Sass
    2. 2. <body> HTML+CSS </body>
    3. 3.
    4. 4.
    5. 5. %h2 %span
    6. 6. %h2 -- %span
    7. 7. <h2> <span> </span> </h2>
    8. 8. !!! XML !!! %html %head %title %body %h1 %h2 %span :
    9. 9. !!! XML !!! %html %head %title %body %h1 %h2 %span :
    10. 10. !!! XML <?xml version='1.0' encoding='u !!! <!DOCTYPE html PUBLIC "-//W
    11. 11. markup haiku !!! XML <?xml version='1.0' encoding='u !!! <!DOCTYPE html PUBLIC "-//W
    12. 12. markup haiku markup golf !!! XML <?xml version='1.0' encoding='u !!! <!DOCTYPE html PUBLIC "-//W
    13. 13. h2 span :color midnightblue
    14. 14. h2 span :color midnightblue h2 span { color: midnightblue; }
    15. 15. %head %style{ :type => ‘text/css’ } :sass h2 :font :weight normal :size medium span :font-weight bold :color midnightblue
    16. 16. %head %style{ :type => ‘text/css’ } :sass h2 :font :weight normal :size medium span :font-weight bold :color midnightblue
    17. 17. %head %style{ :type => ‘text/css’ } :sass h2 :font :weight normal :size medium span :font-weight bold :color midnightblue
    18. 18. ifchanged
    19. 19. ifchanged
    20. 20. %body #header %h1 %h2 %span : #main %h2 .section
    21. 21. %body #header %h1 %h2 %span : #main %h2 .section
    22. 22. <body> <div id=”header”> ... </div> <div id=”main”> <h2> </h2> <div class=”section”> </div> </div> </body>
    23. 23. <body> <div id=”header”> ... </div> <div id=”main”> <h2> </h2> <div class=”section”> </div> </div> </body>
    24. 24. #main %h2 .section %table %tr %td %td %td
    25. 25. #header ... #main h2 :border-left 10px solid midnightblue :padding-left 15px .section :margin-left 10px table tr td :padding 0 5px
    26. 26. #header ... #main h2 :border-left 10px solid midnightblue :padding-left 15px .section :margin-left 10px table tr td :padding 0 5px
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×