• Example Post: float image and blockquote. Raindrops1.345

    DSC_0013 - コピー

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    雨ニモマケズ 風ニモマケズ 雪ニモ夏ノ暑サニモマケヌ 丈夫ナカラダヲモチ 慾ハナク 決シテ瞋ラズ イツモシヅカニワラッテヰル 一日ニ玄米四合ト 味噌ト少シノ野菜ヲタベ アラユルコトヲ ジブンヲカンジョウニ入レズニ ヨクミキキシワカリ ソシテワスレズ 野原ノ松ノ林ノ 小サナ萓ブキノ小屋ニヰテ 東ニ病気ノコドモアレバ 行ッテ看病シテヤリ 西ニツカレタ母アレバ 行ッテソノ稲ノ朿ヲ負ヒ 南ニ死ニサウナ人アレバ 行ッテコハガラナクテモイヽトイヒ 北ニケンクヮヤソショウガアレバ ツマラナイカラヤメロトイヒ ヒドリノトキハナミダヲナガシ サムサノナツハオロオロアルキ ミンナニデクノボートヨバレ ホメラレモセズ クニモサレズ サウイフモノニ ワタシハナリタイ 南無無辺行菩薩 南無上行菩薩 南無多宝如来 南無妙法蓮華経 南無釈迦牟尼仏 南無浄行菩薩 南無安立行菩薩

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    alternative text

    雨ニモマケズ 風ニモマケズ 雪ニモ夏ノ暑サニモマケヌ 丈夫ナカラダヲモチ 慾ハナク 決シテ瞋ラズ イツモシヅカニワラッテヰル 一日ニ玄米四合ト 味噌ト少シノ野菜ヲタベ アラユルコトヲ ジブンヲカンジョウニ入レズニ ヨクミキキシワカリ ソシテワスレズ 野原ノ松ノ林ノ 小サナ萓ブキノ小屋ニヰテ 東ニ病気ノコドモアレバ 行ッテ看病シテヤリ 西ニツカレタ母アレバ 行ッテソノ稲ノ朿ヲ負ヒ 南ニ死ニサウナ人アレバ 行ッテコハガラナクテモイヽトイヒ 北ニケンクヮヤソショウガアレバ ツマラナイカラヤメロトイヒ ヒドリノトキハナミダヲナガシ サムサノナツハオロオロアルキ ミンナニデクノボートヨバレ ホメラレモセズ クニモサレズ サウイフモノニ ワタシハナリタイ 南無無辺行菩薩 南無上行菩薩 南無多宝如来 南無妙法蓮華経 南無釈迦牟尼仏 南無浄行菩薩 南無安立行菩薩

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    雨ニモマケズ 風ニモマケズ 雪ニモ夏ノ暑サニモマケヌ 丈夫ナカラダヲモチ 慾ハナク 決シテ瞋ラズ イツモシヅカニワラッテヰル 一日ニ玄米四合ト 味噌ト少シノ野菜ヲタベ アラユルコトヲ ジブンヲカンジョウニ入レズニ ヨクミキキシワカリ ソシテワスレズ 野原ノ松ノ林ノ 小サナ萓ブキノ小屋ニヰテ 東ニ病気ノコドモアレバ 行ッテ看病シテヤリ 西ニツカレタ母アレバ 行ッテソノ稲ノ朿ヲ負ヒ 南ニ死ニサウナ人アレバ 行ッテコハガラナクテモイヽトイヒ 北ニケンクヮヤソショウガアレバ ツマラナイカラヤメロトイヒ ヒドリノトキハナミダヲナガシ サムサノナツハオロオロアルキ ミンナニデクノボートヨバレ ホメラレモセズ クニモサレズ サウイフモノニ ワタシハナリタイ 南無無辺行菩薩 南無上行菩薩 南無多宝如来 南無妙法蓮華経 南無釈迦牟尼仏 南無浄行菩薩 南無安立行菩薩


  • Example Post: float image + datalist Raindrops1.345

    DSC_0013 - コピー

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    add rd-float class

    alternative text

    datalist要素は、HTML5から新たに追加された要素です。
    <datalist>タグを使って作成するインターフェースの具体的な例を挙げると、 検索エンジンでキーワードの入力候補を表示するオートコンプリート機能などです。 この場合、キーワードの入力欄はinputタグで作成しますが、 inputタグのlist属性の値と、 datalistタグのid属性の値を同じにして、入力欄とデータリストを関連付けます。
    datalist要素は、HTML5から新たに追加された要素です。
    <datalist>タグを使って作成するインターフェースの具体的な例を挙げると、 検索エンジンでキーワードの入力候補を表示するオートコンプリート機能などです。 この場合、キーワードの入力欄はinputタグで作成しますが、 inputタグのlist属性の値と、 datalistタグのid属性の値を同じにして、入力欄とデータリストを関連付けます。

    default dl

    alternative text

    datalist要素は、HTML5から新たに追加された要素です。
    <datalist>タグを使って作成するインターフェースの具体的な例を挙げると、 検索エンジンでキーワードの入力候補を表示するオートコンプリート機能などです。 この場合、キーワードの入力欄はinputタグで作成しますが、 inputタグのlist属性の値と、 datalistタグのid属性の値を同じにして、入力欄とデータリストを関連付けます。
    datalist要素は、HTML5から新たに追加された要素です。
    <datalist>タグを使って作成するインターフェースの具体的な例を挙げると、 検索エンジンでキーワードの入力候補を表示するオートコンプリート機能などです。 この場合、キーワードの入力欄はinputタグで作成しますが、 inputタグのlist属性の値と、 datalistタグのid属性の値を同じにして、入力欄とデータリストを関連付けます。

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


  • トグル タブ表示 キーボードアクセシビリティ

    Raindrops1.326 タブキーによる移動で、以下のタブ表示やトグル表示操作できるようになりました。

    • Tab Area

    Lobster

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lato

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Open Sans

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    • Toggle Label
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


  • featured image 4

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


  • featured image 3

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


  • featured image 2

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


  • table text align class left and center

    class left

    this td is text-align centered

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis velit eros, congue eget pulvinar et, fringilla ut justo. Aliquam eget semper felis. Nulla elit turpis, convallis eget fringilla vel, commodo id urna. Pellentesque sagittis lobortis tortor, volutpat lacinia turpis rutrum quis. Etiam id ornare nulla. Quisque tellus velit, sodales quis cursus vitae, egestas ac magna. Integer a tortor et quam eleifend tempor.

    Donec ante lorem, suscipit vitae tempor semper, pretium quis nunc. Sed non justo ac orci viverra porttitor. Sed felis orci, adipiscing vitae tristique quis, mattis in risus. Donec in malesuada sem. Donec placerat blandit ipsum at imperdiet. Nunc et neque et nisl auctor semper id vitae erat. Vestibulum sapien arcu, varius a lobortis vitae, accumsan vitae est. Nulla non libero purus, quis suscipit leo. Nunc ultrices porta ligula ut elementum.

    this text align right

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis velit eros, congue eget pulvinar et, fringilla ut justo. Aliquam eget semper felis. Nulla elit turpis, convallis eget fringilla vel, commodo id urna. Pellentesque sagittis lobortis tortor, volutpat lacinia turpis rutrum quis. Etiam id ornare nulla. Quisque tellus velit, sodales quis cursus vitae, egestas ac magna. Integer a tortor et quam eleifend tempor.

    Donec ante lorem, suscipit vitae tempor semper, pretium quis nunc. Sed non justo ac orci viverra porttitor. Sed felis orci, adipiscing vitae tristique quis, mattis in risus. Donec in malesuada sem. Donec placerat blandit ipsum at imperdiet. Nunc et neque et nisl auctor semper id vitae erat. Vestibulum sapien arcu, varius a lobortis vitae, accumsan vitae est. Nulla non libero purus, quis suscipit leo. Nunc ultrices porta ligula ut elementum.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis velit eros, congue eget pulvinar et, fringilla ut justo. Aliquam eget semper felis. Nulla elit turpis, convallis eget fringilla vel, commodo id urna. Pellentesque sagittis lobortis tortor, volutpat lacinia turpis rutrum quis. Etiam id ornare nulla. Quisque tellus velit, sodales quis cursus vitae, egestas ac magna. Integer a tortor et quam eleifend tempor.

    Donec ante lorem, suscipit vitae tempor semper, pretium quis nunc. Sed non justo ac orci viverra porttitor. Sed felis orci, adipiscing vitae tristique quis, mattis in risus. Donec in malesuada sem. Donec placerat blandit ipsum at imperdiet. Nunc et neque et nisl auctor semper id vitae erat. Vestibulum sapien arcu, varius a lobortis vitae, accumsan vitae est. Nulla non libero purus, quis suscipit leo. Nunc ultrices porta ligula ut elementum.

    class center

    this td is text-align left

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis velit eros, congue eget pulvinar et, fringilla ut justo. Aliquam eget semper felis. Nulla elit turpis, convallis eget fringilla vel, commodo id urna. Pellentesque sagittis lobortis tortor, volutpat lacinia turpis rutrum quis. Etiam id ornare nulla. Quisque tellus velit, sodales quis cursus vitae, egestas ac magna. Integer a tortor et quam eleifend tempor.

    Donec ante lorem, suscipit vitae tempor semper, pretium quis nunc. Sed non justo ac orci viverra porttitor. Sed felis orci, adipiscing vitae tristique quis, mattis in risus. Donec in malesuada sem. Donec placerat blandit ipsum at imperdiet. Nunc et neque et nisl auctor semper id vitae erat. Vestibulum sapien arcu, varius a lobortis vitae, accumsan vitae est. Nulla non libero purus, quis suscipit leo. Nunc ultrices porta ligula ut elementum.

    this text align right

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis velit eros, congue eget pulvinar et, fringilla ut justo. Aliquam eget semper felis. Nulla elit turpis, convallis eget fringilla vel, commodo id urna. Pellentesque sagittis lobortis tortor, volutpat lacinia turpis rutrum quis. Etiam id ornare nulla. Quisque tellus velit, sodales quis cursus vitae, egestas ac magna. Integer a tortor et quam eleifend tempor.

    Donec ante lorem, suscipit vitae tempor semper, pretium quis nunc. Sed non justo ac orci viverra porttitor. Sed felis orci, adipiscing vitae tristique quis, mattis in risus. Donec in malesuada sem. Donec placerat blandit ipsum at imperdiet. Nunc et neque et nisl auctor semper id vitae erat. Vestibulum sapien arcu, varius a lobortis vitae, accumsan vitae est. Nulla non libero purus, quis suscipit leo. Nunc ultrices porta ligula ut elementum.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis velit eros, congue eget pulvinar et, fringilla ut justo. Aliquam eget semper felis. Nulla elit turpis, convallis eget fringilla vel, commodo id urna. Pellentesque sagittis lobortis tortor, volutpat lacinia turpis rutrum quis. Etiam id ornare nulla. Quisque tellus velit, sodales quis cursus vitae, egestas ac magna. Integer a tortor et quam eleifend tempor.

    Donec ante lorem, suscipit vitae tempor semper, pretium quis nunc. Sed non justo ac orci viverra porttitor. Sed felis orci, adipiscing vitae tristique quis, mattis in risus. Donec in malesuada sem. Donec placerat blandit ipsum at imperdiet. Nunc et neque et nisl auctor semper id vitae erat. Vestibulum sapien arcu, varius a lobortis vitae, accumsan vitae est. Nulla non libero purus, quis suscipit leo. Nunc ultrices porta ligula ut elementum.

    No table class

    this td is text-align left

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis velit eros, congue eget pulvinar et, fringilla ut justo. Aliquam eget semper felis. Nulla elit turpis, convallis eget fringilla vel, commodo id urna. Pellentesque sagittis lobortis tortor, volutpat lacinia turpis rutrum quis. Etiam id ornare nulla. Quisque tellus velit, sodales quis cursus vitae, egestas ac magna. Integer a tortor et quam eleifend tempor.

    Donec ante lorem, suscipit vitae tempor semper, pretium quis nunc. Sed non justo ac orci viverra porttitor. Sed felis orci, adipiscing vitae tristique quis, mattis in risus. Donec in malesuada sem. Donec placerat blandit ipsum at imperdiet. Nunc et neque et nisl auctor semper id vitae erat. Vestibulum sapien arcu, varius a lobortis vitae, accumsan vitae est. Nulla non libero purus, quis suscipit leo. Nunc ultrices porta ligula ut elementum.

    this text align right

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis velit eros, congue eget pulvinar et, fringilla ut justo. Aliquam eget semper felis. Nulla elit turpis, convallis eget fringilla vel, commodo id urna. Pellentesque sagittis lobortis tortor, volutpat lacinia turpis rutrum quis. Etiam id ornare nulla. Quisque tellus velit, sodales quis cursus vitae, egestas ac magna. Integer a tortor et quam eleifend tempor.

    Donec ante lorem, suscipit vitae tempor semper, pretium quis nunc. Sed non justo ac orci viverra porttitor. Sed felis orci, adipiscing vitae tristique quis, mattis in risus. Donec in malesuada sem. Donec placerat blandit ipsum at imperdiet. Nunc et neque et nisl auctor semper id vitae erat. Vestibulum sapien arcu, varius a lobortis vitae, accumsan vitae est. Nulla non libero purus, quis suscipit leo. Nunc ultrices porta ligula ut elementum.

    this text align center

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis velit eros, congue eget pulvinar et, fringilla ut justo. Aliquam eget semper felis. Nulla elit turpis, convallis eget fringilla vel, commodo id urna. Pellentesque sagittis lobortis tortor, volutpat lacinia turpis rutrum quis. Etiam id ornare nulla. Quisque tellus velit, sodales quis cursus vitae, egestas ac magna. Integer a tortor et quam eleifend tempor.

    Donec ante lorem, suscipit vitae tempor semper, pretium quis nunc. Sed non justo ac orci viverra porttitor. Sed felis orci, adipiscing vitae tristique quis, mattis in risus. Donec in malesuada sem. Donec placerat blandit ipsum at imperdiet. Nunc et neque et nisl auctor semper id vitae erat. Vestibulum sapien arcu, varius a lobortis vitae, accumsan vitae est. Nulla non libero purus, quis suscipit leo. Nunc ultrices porta ligula ut elementum.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis velit eros, congue eget pulvinar et, fringilla ut justo. Aliquam eget semper felis. Nulla elit turpis, convallis eget fringilla vel, commodo id urna. Pellentesque sagittis lobortis tortor, volutpat lacinia turpis rutrum quis. Etiam id ornare nulla. Quisque tellus velit, sodales quis cursus vitae, egestas ac magna. Integer a tortor et quam eleifend tempor.

    Donec ante lorem, suscipit vitae tempor semper, pretium quis nunc. Sed non justo ac orci viverra porttitor. Sed felis orci, adipiscing vitae tristique quis, mattis in risus. Donec in malesuada sem. Donec placerat blandit ipsum at imperdiet. Nunc et neque et nisl auctor semper id vitae erat. Vestibulum sapien arcu, varius a lobortis vitae, accumsan vitae est. Nulla non libero purus, quis suscipit leo. Nunc ultrices porta ligula ut elementum.