Skip to content

Latest commit

 

History

History
135 lines (94 loc) · 2.42 KB

仕様.mkd

File metadata and controls

135 lines (94 loc) · 2.42 KB

仕様

暫定

独自のタグや属性をサポート

<script src="./runtime/htmlx.js" defer></script>これで読み込み

現状サポート　タグ

boxタグ

divの様なタグですが、flex(横並び)となります。

<box>
    <p>111</p>
    <p>222</p>
</box>

h1h6代替えタグ t1t6 h1と同じスタイルですが、SEOには影響しません。

<t1>見出し</t1>

現状サポート 属性

全ての要素にhref属性をサポート

<div href="/test"></div>
<img src="./hoge.png" href="/hoge">

hover時、及びhoverを外した時にjavascriptを実行

<div class="bg" onhover="alert('hover!')" onhoverout="alert('hoverout!')">
    <a href="https://google.com" target="_self">google</a>
</div>

スクロールの簡易実装 及び　テンプレートデザイン

scroll="x" scroll="y" scroll="xy"

<div scroll="x">
    aaaaaaaaaaaaaaaaaaaスクロール!!aaaaaaaaaaaaaaaaaa
</div>

//テンプレートデザイン機能未実装

size属性　任意のfontSizeを指定可能。

<p size="10px">10px desu</p>
<p size="1.5rem">1.5rem desu</p>

animation属性

anime="x-rotate 1s ease-in-out infinite"　通常のcssプロパティ animation:と同じように指定できます。

x-アニメーション名　はデフォルトで用意されたアニメーション

//アニメーション名を纏める

<p anime="x-rotate 1s ease-in-out infinite"></p>

emoji属性 絵文字の表示を最適化

<p emoji>🤣</p>

CSSを属性名で簡単に設定出来ます。 css:{CSSのproperty名}="{値}"

<p css:color="blue">blue</p>

br属性 テキストの量が要素を超えたときに、自動で折り返します。

<p br>hogehogehogepeiaerrrrrrrrrrrrrrrrrrrrrrrrrrrrr</p>
<p BR>hogehogehogepeiaerrrrrrrrrrrrrrrrrrrrrrrrrrrrr</p>

markdown属性 markdown式の文章をhtmlに変換します。 このパースは簡易的(基本的な構文はサポート)な物です。 marked.js等やフレームワーク固有のやり方をおススメします。

<div markdown>
# Hello HTMLX!
## XXX!
### AAA
#### BBB
##### CCC
###### DDD

[twitter](https://twitter.com/macl2189)
![Liberluna_icon](https://liberluna.github.io/_astro/liberluna-logo.902d590c.svg)

**hello**  
*world*
--back--
    
---
___
***

`inline`

code

</div>

ToDo

Referenceと仕様と属性値等を纏める