2020-04-19

【HTML】継承されたファイル文字コードをUnicodeに変更するとheadの中身がなくなる問題の対処法

f:id:Surprisedblog:20200419071904p:plain

今回は、extendsで継承しているHTMLファイルの継承部分がすべて<body>内に含まれてしまう問題とその対処方法を記した記事になります。

問題の要因

extendsで継承されているhtmlファイル(詳しく言うとJadeファイル)に、日本語を含めて保存したときファイル文字コードをUnicodeにしました。そして、そのファイルを継承しているページを開くと継承部分が<body>内にすべて含まれてしまい、先頭行にあったDOCTYPE htmlが文字列として表示されてしまいました。

その時のファイルlayoutとindex。

layout

f:id:Surprisedblog:20200419061423p:plain

index

f:id:Surprisedblog:20200419061302p:plain

表示されたHTML

f:id:Surprisedblog:20200419061222p:plain

解決方法

解決方法ですが、先頭行にあるDOCTYPE htmlの前に改行を入れることでちゃんと継承させることができました。理由はわかりません。

layout - わかりずらいですがdoctype htmlの上には改行が含まれています。

f:id:Surprisedblog:20200419062658p:plain

表示されたHTML

f:id:Surprisedblog:20200419062558p:plain

追加情報

継承されている側のファイルに改行を入れて問題を解決しましたが、継承している側も文字コードをUnicodeにするとファイルの先頭行が正常に処理されませんでした。こちらも同様に、先頭に改行を入れることで解決することができました。

2019-10-16

コードフォーマッター | コード公開のため組み込みも可 | 【JavaScript】| コード整形ツール Code formatter

ツール-コードフォーマッター-HTML ツールツール-コードフォーマッターコードフォーマッター HTML

コード整形ツール

HTMLコードを自動で改行、インデント設定をして見やすくするJavaScriptによるHTMLコードフォーマッター(Code formatter)です。(コメントアウトは対象外)
※注意：一般的なHTMLコードに適しています(整形が不完全な部分もあるとおもいます...)

inputに整形したいHTMLコードを入力(貼り付け)します。(初期表示のテキストはサンプルです。)
outputに整形されたHTMLコードが表示されます。

input

output

コード

コードを整形するためのコード(関数)です。引数にHTMLコード(文字列)を指定して呼び出すことで、返り値に整形されたコード(文字列)が渡されます。

format(code) {
    code = code.replace("\n", "");
    var indent = "", before;
    function replacer(tag, space, p1, index, str) {
        if (space) {
            tag = tag.replace(space, "");
        }
        if (!tag.match("\/")) {
            if (index > 0) {
                tag = "\n" + indent + tag;
            }
            indent = indent + "    ";
        } else {
            indent = indent.slice(0, indent.length - 4);
            if (!tag.match(before) && !before.match("\/")) {
                indent = indent.slice(0, indent.length - 4);
            }
            if (!tag.match(before) || before.match("\/")) {
                tag = "\n" + indent + tag;
            }
        }
        before = p1.replace(">" && " ", "");
        return tag
    }
    code = code.replace(/([\s]*)<([\w]*?>|\/[\w]*?>|[\w]* |\/[\w]* )/g, replacer)
    return code
}

関連記事

www.it-the-best.com

2019-08-08

【サンプルあり】リアルタイムに値を取得/表示するスライダー(レンジバー) -コピペ可能- |【HTML】【JavaScript】

HTML input range HTML-input HTML-input-range

value:100

スライダーの値をリアルタイムに取得
- DEMO
- 例

スライダーの値をリアルタイムに取得

HTMLのinput要素のtype：rangeは、スライダーによる数値の指定ができます。

スライダーの値(value)をリアルタイムに取得して表示させる方法を、HTMLとJavaScriptで書き記しました。

JavaScriptにjQueryを使用しています。(推奨設置場所：headタグ内)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

DEMO

value:100

</>HTML

<input id="sample-range" max="100" min="0" type="range" value="100" /><br>
value:<span class="sample-range-result">100</span>
<script>
$("#sample-range").on("input",function(e){
    var range=e.target
    $(".sample-range-result").text(range.value)
})
</script>

例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML input range</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>

    <input max="100" min="0" type="range" value="100" />
    value:<span class="range-value-result">100</span>
    <script>
        $("input[type='range']").on("input", function (e) {
            var range = e.target
            $(".range-value-result").text(range.value)
        })
    </script>

</body>
</html>

2019-06-18

【CSS】超簡単「WEBデザイン」を美しくする | ボックスシャドウ(box-shadow)

CSS HTML WEBデザイン "box-shadow" CSS-"box-shadow" WEBデザイン-"box-shadow"

f:id:Surprisedblog:20190530175549p:plain

投稿日：2019/5/30

Google Chromeで簡単にUIで設定値を変更できる

前回、Google Chromeの開発ツールが超便利という記事を書きました。

www.it-the-best.com

　今回は、その開発ツールを使った簡単WEBデザインの紹介をします。

CSSのbox-shadowというプロパティをつかって要素にかげをつけるデザインです。記事タイトル下にある写真は青い影をつけています。

　まず、開発ツールを開き影をつけたい要素を選択します。選択の仕方は、開発ツールのelements項目に表示されている要素ごとに選択することができます。下の画像の上半分がHTMLで要素が並んでいます。

f:id:Surprisedblog:20190530181421p:plain
ちなみに、開発ツールを開いたときにマウスが重なっている要素がフォーカスされます。

　そして、stylesのelement.styleのカッコ内をクリックしてbox-shadowと入力します。
入力後エンターを押して、適当に数字を4つスペースをあけて入力します。0 0 0 0 でダイジョブです。

　次に、数字の後ろにスペースを空けてblueでもblackでも何でもいいので、色を指定します。これは影の色になります。

　これで、プロパティの値を設定しました。エンターを押すと数字の前に四角が二つ重なって現れます。

f:id:Surprisedblog:20190530182326p:plain

　その四角を押すと、GUIによるbox-shadowプロパティの値を設定することができます。色を変えたい場合は、指定した色の前にある色のついた四角をクリックすると簡単に変更できます。

もし、変化がなければ他の要素で試してください。

実際に影をつける

　要素に直接

　　要素のカッコ内にstyle="box-shadow:0 0 0 0 blue"と記入します。プロパティの値は開発ツールからコピーして指定してください。

<img style="box-shadow: 0px 0px 20px 0 blue;" src=""/>

　CSSに記入

要素{
　box-shadow:0px 0px 20px 0px blue;
}

　　要素にはIDやタグ名などを指定します。

<div id="test">
　<div>
    <img>
　</div>
　<div class="test-div">
    <img>
  </div>
</div>

#test {}
#test div {}
#test div img {}

#test div.test-div {}
#test div.test-div img {}

このような感じで要素を指定します

それでは、良いプログラミングライフを。

2019-06-02

【WEBデザイン】を美しくする | グラデーション(linear-gradient())

CSS HTML WEBデザイン background CSS-background WEBデザイン-background "linear-gradient()" CSS-background-"linear-gradient()"

【WEBデザイン】を美しくする | グラデーション

linear-gradient()
- 使い方
  - グラデーションの方向
  - 途中色
- グラデーションをつくる

linear-gradient()

　CSSのbackgroundプロパティに使用することのできる関数です。

使い方

　background:linear-gradient(グラデーションの方向,開始色,途中色,終了色)

各指定値はカンマごとに入力します。

グラデーションの方向

　向きによる指定

右に向かって変わる：to right
上に向かって変わる：to top
左に向かって変わる：to left
下に向かって変わる：to bottom

　角度による指定

45度に向かって変わる：45deg
160度に向かって変わる：160deg
275度に向かって変わる：275deg

途中色

　開始色と終了色の間に指定する色は省略も可能です。その場合は開始と終了の2色になります。途中色をうまく使用することできれいなグラデーションにすることができます。

グラデーションをつくる

方向：deg / / 開始色(rgb型)：

赤：
緑：
青：

※開始色をもとにrgb値を大きくしてグラデーションをつくります。終了色は白色固定です。

プロパティとその値

background:linear-gradient(90deg,#64c80a,#ffffff);

2019-05-27

「HTML」「CSS」WEBページ背景色に悩んだら#f1f1f1

CSS HTML CSS-"background-color" "background-color"

f:id:Surprisedblog:20190527123332p:plain
WEBページ制作ではデザインをどうしようか悩むものですよね。

背景色もどうしようかと思って、何度もいろいろ試してしまいます。

コンテンツの色など、ほかの要素との相性によってはしっくりくる色を見つけるのは、なかなか難しいです。

そんなときに便利なのが#f1f1f1です。

スクロールバーと似た色で、整合性が保たれて全体的にしっくりくるデザインになります。これに近い色を使用しているサイトも多々あります。

派手さもなく不自然さもなく、真っ白でないので目にもやさしいです。
（私はもう長い間画面の明るさをずいぶん下げているので関係ありませんが...）

背景色の設定

[要素]{
    background-color:#f1f1f1;
}

全体の背景色を変える

body{
    background-color:#f1f1f1;
}

おまけ

　スクロールバーの色が#f1f1f1に近いのは、グーグルクロームのブラウザにおいてです。
　クローム以外使うときがあまりないのでどうでもいいですが、一応ブラウザ別にスクロールバーの色を調べました。

firefox：#f1f1f1に近い
edge：#f1f1f1に近い

　二つしか調べてないですが、ほとんどのブラウザでこの色でしょう。firefoxにおいてはブラウザトップ画面の背景色自体が#f1f1f1に近い色でした。

　開発ツールを開いて全体の背景色を確認しましたが、hsl型で(0,0%,95%)でした。
HEX型(#......の形)で知りたかったのですが、クロームのように型を変えて調べることができず、クロームに戻って調べました。結果#f2f2f2で、#f1f1f1に近い色でした。

IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。