<commit_before><!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>utility-width | Style guide | echo-css</title>

    <?php include('../doc_include/html_head.inc'); ?>

</head>
<body>
<div class="l-document" id="document">

    <header class="s-header">
        <div class="s-header-brand">
            <p class="s-title s-header-title"><img src="../images/common/logo_white.svg" height="24" alt="echo-css"> <span class="s-label">v1.0.0</span></p>
        </div><!-- /.s-header-brand -->

        <?php include('../doc_include/header_nav.inc'); ?>
    </header>

    <div class="s-container s-container-fluid">
        <div class="s-contents s-contents-2col">
            <main class="s-contents-main" role="main">

                
                <div class="s-pageheader">
                    <h1 class="s-title s-pageheader-title">utility-width</h1>
                </div><!-- /.s-pageheader -->
                

                

                <article class="s-post">
                    <div class="s-post-contents styleguide-contents"><h1 id="width" class="styleguide">u-width-(percentage)</h1>

<p>幅を親要素を基準とした割合に変更する。</p>
<div class="example"><div class="u-width-20" style="margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;">
u-width-20
</div>

<div class="u-width-33" style="margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;">
u-width-33
</div>

<div class="u-width-50" style="margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;">
u-width-50
</div>

<div class="u-width-66" style="margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;">
u-width-66
</div>

<div class="u-width-75" style="margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;">
u-width-75
</div>

<div class="u-width-100" style="margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;">
u-width-100
</div>

</div><div class="codeblock"><pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"u-width-20"</span> <span class="na">style=</span><span class="s">"margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;"</span><span class="nt">&gt;</span>
u-width-20
<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"u-width-33"</span> <span class="na">style=</span><span class="s">"margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;"</span><span class="nt">&gt;</span>
u-width-33
<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"u-width-50"</span> <span class="na">style=</span><span class="s">"margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;"</span><span class="nt">&gt;</span>
u-width-50
<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"u-width-66"</span> <span class="na">style=</span><span class="s">"margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;"</span><span class="nt">&gt;</span>
u-width-66
<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"u-width-75"</span> <span class="na">style=</span><span class="s">"margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;"</span><span class="nt">&gt;</span>
u-width-75
<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"u-width-100"</span> <span class="na">style=</span><span class="s">"margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;"</span><span class="nt">&gt;</span>
u-width-100
<span class="nt">&lt;/div&gt;</span>

</pre></div><?php include('../doc_include/footer.inc'); ?><commit_msg>スタイルガイドにも .u-width-25 を追加<commit_after><!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>utility-width | Style guide | echo-css</title>

    <?php include('../doc_include/html_head.inc'); ?>

</head>
<body>
<div class="l-document" id="document">

    <header class="s-header">
        <div class="s-header-brand">
            <p class="s-title s-header-title"><img src="../images/common/logo_white.svg" height="24" alt="echo-css"> <span class="s-label">v1.0.0</span></p>
        </div><!-- /.s-header-brand -->

        <?php include('../doc_include/header_nav.inc'); ?>
    </header>

    <div class="s-container s-container-fluid">
        <div class="s-contents s-contents-2col">
            <main class="s-contents-main" role="main">

                
                <div class="s-pageheader">
                    <h1 class="s-title s-pageheader-title">utility-width</h1>
                </div><!-- /.s-pageheader -->
                

                

                <article class="s-post">
                    <div class="s-post-contents styleguide-contents"><h1 id="width" class="styleguide">u-width-(percentage)</h1>

<p>幅を親要素を基準とした割合に変更する。</p>
<div class="example"><div class="u-width-20" style="margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;">
u-width-20
</div>

<div class="example"><div class="u-width-25" style="margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;">
u-width-25
</div>

<div class="u-width-33" style="margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;">
u-width-33
</div>

<div class="u-width-50" style="margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;">
u-width-50
</div>

<div class="u-width-66" style="margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;">
u-width-66
</div>

<div class="u-width-75" style="margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;">
u-width-75
</div>

<div class="u-width-100" style="margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;">
u-width-100
</div>

</div><div class="codeblock"><pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"u-width-20"</span> <span class="na">style=</span><span class="s">"margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;"</span><span class="nt">&gt;</span>
u-width-20
<span class="nt">&lt;/div&gt;</span>

</div><div class="codeblock"><pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"u-width-25"</span> <span class="na">style=</span><span class="s">"margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;"</span><span class="nt">&gt;</span>
u-width-25
<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"u-width-33"</span> <span class="na">style=</span><span class="s">"margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;"</span><span class="nt">&gt;</span>
u-width-33
<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"u-width-50"</span> <span class="na">style=</span><span class="s">"margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;"</span><span class="nt">&gt;</span>
u-width-50
<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"u-width-66"</span> <span class="na">style=</span><span class="s">"margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;"</span><span class="nt">&gt;</span>
u-width-66
<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"u-width-75"</span> <span class="na">style=</span><span class="s">"margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;"</span><span class="nt">&gt;</span>
u-width-75
<span class="nt">&lt;/div&gt;</span>

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"u-width-100"</span> <span class="na">style=</span><span class="s">"margin-bottom: 1rem; padding: .5rem; background-color: #ffddaa; text-align: center;"</span><span class="nt">&gt;</span>
u-width-100
<span class="nt">&lt;/div&gt;</span>

</pre></div><?php include('../doc_include/footer.inc'); ?>
{'fraction_non_alphanumeric': 0.24089507934695742, 'fraction_numerical': 0.021691973969631236, 'mean_word_length': 4.61178731582319, 'pattern_counts': {'":': 0, '<': 303, '<?xml version=': 0, '>': 303, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5430392', 'n_tokens_mistral': 3304, 'n_tokens_neox': 3168, 'n_words': 547}