<!doctype html>
<html>
    <head>
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-108351166-2"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag() {
                dataLayer.push(arguments);
            }
            gtag('js', new Date());
            gtag('config', 'UA-108351166-2');
        </script>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <meta property='og:title' content='HTMLソースの難読化ページ'>
        <meta property='og:type' content='website'>
        <meta property='og:url' content='http://jpn.phpkobo.com/html-nandokuka'>
        <meta property='og:description' content='HTMLソースの難読化ページ　(JavaScriptを使わない方式）'>
        <meta property='og:image' content='http://jpn.phpkobo.com/mod/NHENT/img/hnandoku.png'>
        <meta property='og:image:type' content='image/png'>
        <meta property='og:image:width' content='850'>
        <meta property='og:image:height' content='770'>
        <meta property='og:image:alt' content='HTMLソースの難読化ページ'>
        <title>HTMLソースの難読化ページ　(JavaScriptを使わない方式）</title>
        <script src="https://jpn.phpkobo.com/mod/main/v2.00/mod/btpl-v2/js/fscript.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <link href="https://jpn.phpkobo.com/mod/main/v2.00/mod/btpl-v2/css/site.min.css" rel="stylesheet">
        <script>
            var _url_root_ = "https://jpn.phpkobo.com/";
        </script>
        <script src="https://jpn.phpkobo.com/mod/main/v2.00/mod/btpl-v2/js/site.min.js"></script>
        <style>
            html {
                scrollbar-color: #abc8e5 #dee7ef;
            }
        </style>
        <script>
            _no_scrollbtn_ = true;
        </script>
        <style>
            body > main {
                width: auto;
                max-width: none;
                padding: 0;
            }
        </style>
        <style>
            .page-body {
                margin: 0 auto;
                max-width: 720px;
                display: flex;
                flex-direction: row;
            }

            .main-content {
                flex: 0 1 720px;
                padding: 10px 20px 50px 20px;
            }
        </style>
    </head>
    <body>
        <header>
            <style>
                .dropdown-menu a.new, .linkbox a.new {
                    position: relative;
                }

                .dropdown-menu a.new::before, .linkbox a.new::before {
                    display: none;
                    content: "NEW!";
                    position: absolute;
                    padding: 3px 4px 2px 4px;
                    font-size: 10px;
                    font-weight: bold;
                    color: white;
                    background: red;
                    border-radius: 6px;
                }

                .dropdown-menu a.new::before {
                    top: 3px;
                    left: -24px;
                }

                .linkbox a.new::before {
                    top: 3px;
                    left: -42px;
                }
            </style>
            <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top-menu" accesskey="m">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="./" style='position:relative;top:-5px;'>
                            <span class="glyphicon glyphicon-th">
                                <img class='site-title' src='https://jpn.phpkobo.com/mod/main/v2.00/mod/btpl/img/header/title.png' style='vertical-align:-6px; width:85px;height:30px;' border='0'/>
                            </span>
                        </a>
                    </div>
                    <div class="collapse navbar-collapse" id="top-menu">
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <span class="glyphicon glyphicon-th-large"></span>
                                    スクリプト <span class="caret"></span>
                                </a>
                                <ul class="dropdown-menu" role="menu">
                                    <li>
                                        <a href="html-nandokuka">【難読化ツール】HTML難読化ページ</a>
                                    </li>
                                    <li>
                                        <a href="css-obfuscator">【難読化ツール】CSS難読化ページ</a>
                                    </li>
                                    <li>
                                        <a href="link-obfuscator">【難読化ツール】Link難読化ページ</a>
                                    </li>
                                    <li>
                                        <a href="kaedama-kun">【難読化ツール】替え玉君</a>
                                    </li>
                                    <li>
                                        <a href="tnsplit-js">【難読化ツール】tnSplit.js</a>
                                    </li>
                                    <li>
                                        <a href="deobfuscation-service">HTML/CSS逆難読化サービス</a>
                                    </li>
                                    <li>
                                        <a href="kenshow-knquiz">クイズ懸賞アプリ KNQuiz</a>
                                    </li>
                                    <li>
                                        <a href="countdown-timer">カウントダウンタイマー生成器</a>
                                    </li>
                                    <li>
                                        <a href="ajax-news-ticker">Ajaxニュースティッカー</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <span class="glyphicon glyphicon-info-sign"></span>
                                    サポート/サービス <span class="caret"></span>
                                </a>
                                <ul class="dropdown-menu" role="menu">
                                    <li>
                                        <a href="contact-us">お問い合わせ</a>
                                    </li>
                                    <li>
                                        <a href="change-email-address">登録Eメールアドレスの変更</a>
                                    </li>
                                    <li>
                                        <a href="support-ticket">サポートのご依頼</a>
                                    </li>
                                    <li>
                                        <a href="custom-programming-services">プログラミング・サービス</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>
        <main>
            <div class="page-body">
                <div class="main-content">
                    <style>
                        body>main h3.page-title-sub {
                            margin: 40px 0 5px 0;
                            font-size: 16px;
                            color: #468acf;
                        }

                        body>main h1.page-title-main {
                            margin: 0 0 60px 0;
                        }
                    </style>
                    <h3 class='page-title page-title-sub'>JavaScriptを使わずに難読化する</h3>
                    <h1 class='page-title page-title-main'>HTMLソースの難読化ページ</h1>
                    <article class="generic">
                        <p>難読化したいHTMLソースを入力して、「難読化する」ボタンをクリックすると、 その下に難読化された文字列が表示されます。</p>
                        <div class="panel panel-default">
                            <div class="panel-heading">※ 以下の部分は難読化されずにそのまま出力されます。</div>
                            <div class="panel-body" style="padding-bottom:5px;">
                                <style>
                                    .paren {
                                        font-weight: bold;
                                        padding: 0 5px;
                                    }
                                </style>
                                <ul>
                                    <li>
                                        すべての<span class='paren'>&lt;</span>
                                        と<span class='paren'>&gt;</span>
                                        の間
                                    </li>
                                    <li>
                                        <span class='paren'>&lt;script &gt;</span>
                                        と<span class='paren'>&lt;/script &gt;</span>
                                        の間
                                    </li>
                                    <li>
                                        <span class='paren'>&lt;style &gt;</span>
                                        と<span class='paren'>&lt;/style &gt;</span>
                                        の間
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <p style="margin-bottom:15px;">下のボックスに難読化したいHTMLソースを入力してください。 HTMLソースは、部分、または１ページ丸ごとでもかまいません。</p>
                        <style>
                            .codebox-section {
                                margin-bottom: 20px;
                            }

                            .codebox-form-group {
                                margin-bottom: 15px;
                            }

                            .codebox-label {
                                color: #333;
                                font-weight: bold;
                                margin-bottom: 3px;
                            }

                            .codebox-input-group {
                                position: relative;
                            }

                            .codebox-input {
                                position: relative;
                                display: block;
                                width: 100%;
                                height: 200px;
                                padding: 10px;
                                font-family: monospace;
                                resize: none;
                                border-color: #ccc;
                                border-radius: 5px;
                                scrollbar-color: #abc8e5 #dee7ef;
                            }

                            .codebox-input:focus {
                                border-color: #66afe9;
                                outline: 0;
                                box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
                            }

                            .codebox-input[name="icode"] {
                                white-space: pre;
                                tab-size: 4;
                            }

                            .codebox-input[name="ocode"] {
                                word-break: break-all;
                            }

                            .codebox-checkbox-group {
                                margin: 0;
                                padding: 4px 0;
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                gap: 10px;
                            }

                            .codebox-checkbox-group-item {
                            }

                            .codebox-checkbox-text {
                                margin-bottom: 4px;
                                user-select: none;
                            }

                            .codebox-checkbox {
                                margin: 0 !important;
                                width: 30px !important;
                                height: 30px !important;
                            }

                            .codebox-charstats {
                                height: 25px;
                                display: grid;
                                grid-template-columns: minmax(0,1fr) auto;
                            }

                            .codebox-charcnt {
                                padding: 1px 10px;
                                margin-bottom: 1px;
                                color: #888;
                                border-radius: 5px;
                            }

                            .codebox-charcnt span {
                                position: relative;
                                top: 1px;
                                font-size: 13px;
                                line-height: 1;
                                vertical-align: middle;
                            }

                            .codebox-charcnt.codebox-overflow {
                                animation-name: kf-codebox-overflow;
                                animation-duration: 1s;
                                animation-iteration-count: infinite;
                                color: white;
                                background-color: red;
                            }

                            @keyframes kf-codebox-overflow {
                                0% {
                                    opacity: 1;
                                }

                                50% {
                                    opacity: 0;
                                }

                                100% {
                                    opacity: 1;
                                }
                            }

                            .codebox-tatools {
                                position: relative;
                                padding: 0 20px;
                                display: flex;
                                justify-content: flex-start;
                                align-items: flex-start;
                                gap: 10px;
                                z-index: 1;
                            }

                            .codebox-tatools button {
                                padding: 5px 15px;
                                min-width: 100px;
                                border: none;
                                border-radius: 0 0 5px 5px;
                                color: white;
                                background-color: #468acf;
                            }

                            .codebox-tatools button:hover {
                                background-color: rgb(40, 96, 144);
                            }

                            @media (max-width: 500px) {
                                .codebox-tatools {
                                    padding:5px 20px;
                                    display: block;
                                }

                                .codebox-tatools button {
                                    margin: 0 0 5px 5px;
                                    border-radius: 5px;
                                }
                            }

                            .codebox-toolbox {
                                padding: 10px 0 20px 0;
                                text-align: center;
                            }

                            .codebox-inst {
                                margin: 10px 0;
                            }

                            .codebox-radiate {
                                position: absolute;
                                top: 0;
                                bottom: 0;
                                right: 0;
                                left: 0;
                                border-radius: 10px;
                                opacity: 0;
                            }

                            .codebox-fanfare .codebox-radiate {
                                border: 1px solid #66afe9;
                                animation-name: kf-codebox-radiate;
                                animation-duration: 0.9s;
                                animation-iteration-count: 3;
                                animation-fill-mode: backwards;
                            }

                            .codebox-radiate[data-idx="1"] {
                                animation-delay: 0s
                            }

                            .codebox-radiate[data-idx="2"] {
                                animation-delay: 0.3s
                            }

                            .codebox-radiate[data-idx="3"] {
                                animation-delay: 0.6s
                            }

                            @keyframes kf-codebox-radiate {
                                0% {
                                    opacity: 1;
                                    transform: scale(1);
                                }

                                100% {
                                    opacity: 0;
                                    transform: scale(1.2,1.4);
                                }
                            }

                            .codebox-waitscreen {
                                position: fixed;
                                top: 0;
                                bottom: 0;
                                left: 0;
                                right: 0;
                                color: white;
                                background: rgba(0,0,0,0.3);
                                z-index: 1000000;
                                cursor: wait;
                            }

                            .codebox-waitscreen .codebox-waiticon {
                                position: absolute;
                                left: 50%;
                                top: 50%;
                                transform: translate(-50%,-50%);
                                width: 100px;
                                height: 100px;
                            }

                            .codebox-waiticon svg {
                                color: rgba(255,255,255,0.3);
                                animation-name: kf-codebox-waiticon-svg;
                                animation-iteration-count: infinite;
                                animation-timing-function: linear;
                                animation-duration: 3s;
                            }

                            @keyframes kf-codebox-waiticon-svg {
                                100% {
                                    transform: rotateZ(360deg);
                                }
                            }
                        </style>
                        <div class="codebox-section">
                            <form class="codebox-form" action="https://jpn.phpkobo.com/html-nandokuka" method="POST" spellcheck="false">
                                <input type="hidden" name="cmd" value="obfuscate"/>
                                <div class="codebox-form-group codebox-type-i">
                                    <div class="codebox-charstats">
                                        <div class="codebox-dummy"></div>
                                        <div class="codebox-charcnt">
                                            <span></span>
                                        </div>
                                    </div>
                                    <div class="codebox-input-group codebox-icode">
                                        <!--[N-T-A]-->
                                        <textarea class="codebox-input" name="icode">ここに入力したHTMLソースを難読化します。&#10;</textarea>
                                        <!--[/N-T-A]-->
                                    </div>
                                    <div class="codebox-tatools">
                                        <button class="codebox-btn-select">選択</button>
                                        <button class="codebox-btn-copy">コピー</button>
                                    </div>
                                </div>
                                <div class="list-group codebox-options">
                                    <li class="list-group-item list-group-item-info">難読化スキップのオプション</li>
                                    <li class="list-group-item" style="list-style-type:none;padding-bottom:5px;">
                                        <label class="codebox-checkbox-group">
                                            <div class="codebox-checkbox-group-item">
                                                <input class="codebox-checkbox" type="checkbox" name="skip-head" value="y">
                                            </div>
                                            <div class="codebox-checkbox-group-item codebox-checkbox-text">
                                                <b>&lt;head &gt;... &lt;/head &gt;</b>
                                                内の難読化をスキップする。					
                                            </div>
                                        </label>
                                    </li>
                                </div>
                                <div class="codebox-toolbox">
                                    <button type="submit" class="btn btn-primary btn-lg codebox-submit">難読化する</button>
                                </div>
                                <div class="codebox-inst">この下に難読化された文字列が表示されます。					</div>
                                <div class="codebox-form-group codebox-type-o">
                                    <div class="codebox-input-group codebox-ocode">
                                        <div class="codebox-radiate" data-idx="1"></div>
                                        <div class="codebox-radiate" data-idx="2"></div>
                                        <div class="codebox-radiate" data-idx="3"></div>
                                        <!--[N-T-A]-->
                                        <textarea class="codebox-input" name="ocode"></textarea>
                                        <!--[/N-T-A]-->
                                    </div>
                                    <div class="codebox-tatools">
                                        <button class="codebox-btn-select">選択</button>
                                        <button class="codebox-btn-copy">コピー</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <script>
                            "use strict";
                            function alertCopied(px) {
                                function $ce(tagName) {
                                    return document.createElement(tagName);
                                }
                                ;function appendStyle(style) {
                                    const el = $ce("style");
                                    el.type = "text/css";
                                    if (el.styleSheet) {
                                        el.styleSheet.cssText = style;
                                    } else {
                                        el.appendChild(document.createTextNode(style));
                                    }
                                    document.getElementsByTagName("head")[0].appendChild(el);
                                    return el;
                                }
                                ;function onEnd(el, callback, ename) {
                                    const func = function(e) {
                                        if (el == e.srcElement) {
                                            el.removeEventListener(ename, func);
                                            if (callback) {
                                                callback(e);
                                            }
                                        }
                                    };
                                    el.addEventListener(ename, func);
                                }
                                ;function onAnimationEnd(el, callback) {
                                    onEnd(el, callback, "animationend");
                                }
                                ;function CClipBox(px) {
                                    let el_clipbox = null;
                                    let el_line1 = null;
                                    let el_line2 = null;
                                    function setup() {
                                        const style = `.clipbox{display:table-cell;position:relative;width:50px;min-width:50px;height:50px;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" stroke="white" stroke-width="0.2" fill="white" class="bi bi-clipboard" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z"/></svg>');background-size:cover;font-size:4px;}.clipbox-mark{position:absolute;top:3.5em;left:4.6em;width:3.5em;height:6em;transform:rotateZ(40deg);}.clipbox-line1{position:absolute;bottom:0;left:0;width:0;height:1em;background-color:white;}.clipbox.clipbox-play .clipbox-line1{animation-name:kf-clipbox-line1;animation-iteration-count:1;animation-fill-mode:forwards;animation-delay:.5s;animation-duration:.2s;}@keyframes kf-clipbox-line1{0%{width:0;}100%{width:100%;}}.clipbox-line2{position:absolute;bottom:0;right:0;width:1em;height:0;background-color:white;}.clipbox.clipbox-play .clipbox-line2{animation-name:kf-clipbox-line2;animation-iteration-count:1;animation-fill-mode:forwards;animation-delay:.7s;animation-duration:.2s;}@keyframes kf-clipbox-line2{0%{height:0;}100%{height:100%;}}`;
                                        const el_prev = document.getElementById("style-clipbox");
                                        if (el_prev) {
                                            el_prev.remove();
                                        }
                                        const el_style = appendStyle(style);
                                        el_style.id = "style-clipbox";
                                        el_line1 = $ce("div");
                                        el_line1.className = "clipbox-line1";
                                        el_line2 = $ce("div");
                                        el_line2.className = "clipbox-line2";
                                        const el_mark = $ce("div");
                                        el_mark.className = "clipbox-mark";
                                        el_mark.appendChild(el_line1);
                                        el_mark.appendChild(el_line2);
                                        el_clipbox = $ce("div");
                                        el_clipbox.className = "clipbox";
                                        el_clipbox.appendChild(el_mark);
                                        return el_clipbox;
                                    }
                                    ;function run(px) {
                                        return new Promise(function(resolve) {
                                            onAnimationEnd(el_line2, function() {
                                                resolve();
                                            });
                                            el_clipbox.classList.add("clipbox-play");
                                        }
                                        );
                                    }
                                    ;return {
                                        setup,
                                        run
                                    };
                                }
                                ;function CAlertBox(px) {
                                    let el_alertbox = null;
                                    let clipbox = null;
                                    function setup(params) {
                                        const style = `.alertbox{position:fixed;top:0;left:0;color:white;background:#2ecc71;opacity:0;transition:opacity 0.6s;padding:10px;border-radius:5px;box-shadow:1px 1px 4px #2ecc71;z-index:1000;}.iconbox{display:table-cell;vertical-align:middle;width:50px;}.msgbox{display:table-cell;padding-left:10px;padding-right:5px;vertical-align:middle;font-family:"Times New Roman";font-style:italic;font-size:18px;letter-spac