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

今回は、extendsで継承しているHTMLファイルの継承部分がすべて<body>内に含まれてしまう問題とその対処方法を記した記事になります。 // 問題の要因 extendsで継承されているhtmlファイル(詳しく言うとJadeファイル)に、日本語を含めて保存したときファイル文字コ</body>…

2019-10-16

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

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

Photo by Chris Ried on Unsplash コード整形ツール HTMLコードを自動で改行、インデント設定をして見やすくするJavaScriptによるHTMLコードフォーマッター(Code formatter)です。(コメントアウトは対象外) ※注意：一般的なHTMLコードに適しています(整形が…

2019-08-08

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

HTML input range HTML-input HTML-input-range

スライダーの値をリアルタイムに取得HTMLのinput要素のtype：rangeは、スライダーによる数値の指定ができます。スライダーの値(value)をリアルタイムに取得して表示させる方法を、HTMLとJavaScriptで書き記しました。JavaScriptにjQueryを使用しています。(…

2019-06-18

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

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

Google Chromeで簡単にUIで設定値を変更できる前回、Google Chromeの開発ツールが超便利という記事を書きました。今回は、その開発ツールを使った簡単WEBデザインの紹介をします。CSSのbox-shadowというプロパティをつかって要素にかげをつけるデザインです…

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(グラ…

2019-05-30

「HTML」縦書き・行書体による５７５ | 「CSS」

HTML CSS

あこがれたたてにしたくてできなくてなどと思った人も多いでしょう。ご覧のとおり縦書きはできます。縦にする -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; 行書体 font-family: “HGP行書体”, “ＭＳＰ明…