Webページを作成するときに使用する、<タグ>タグ>で区切って見た目などを設定する記法。 ホームページ作り、ブログ作りに欠かせない。 しかし、タグによっては使い方次第で変な状態になってしまったり、Javascriptを定義するメソッドなどがあるため、ブログでは簡易的なものだけが使える。スタイルなど、Javascriptを使用するタグの拡張は使用できない。
Google AdSense合格者9人目の方の部分でカスタマイズについて触れたので軽くご紹介! ※リンクを貼るために作成しました(笑) 私が愛用しているHTMLカスタマイズ3選になります! コピペで使える他のサイトもたくさんあるのでお好みのものをぜひ見つけてみてください! オレンジ色枠 使用したい方は下記をコピペ! 赤色枠 使用したい方は下記をコピペ! テープ付き付箋 使用したい方は下記をコピペ! 簡単使用方法説明 ①「使用したい方はコピペ」部分のコードをコピー ②「HTML編集画面」に移動 ③「HEML編集画面」に「貼り付け」 ④「編集みたまま」に戻る まとめ オレンジ色枠 ◆この記事はこん…
自身のアウトプットも兼ねてつれづれと書き続けるブログ。 HTML解体新書ー仕様から紐解く本格入門 [ 太田 良典 ] 前回からの続きです。 body要素 body要素は、文章のコンテンツを表します。HTML要素の2番目の子として、head要素の次の要素として、HTML文章に必ず1つ存在します。body要素は原則として表示される内容を記述するセクションです。 【属性】 body要素はグローバル属性です。 【コンテンツモデル】 body要素のコンテンツモデルはFlowです。通常は見出しやセクショニングコンテンツを配置しますが、図のようにbody要素直下にテキストや画像を配置することもできます。 <…
トップ下4つ記事を固定しているんですが 4つのうち3つがちゃんと表示されてないのを見つけましたww なにもやっているんでしょうかww せっかく他の記事も見てもらいやすいように調整したのに 肝心のリンクに飛べないって意味がなさすぎますね(笑) 今回はちゃんと確認もしたので大丈夫です!! ラインナップはこれからちょこちょこいじって行きたいと思います(笑) 一旦これで落ち着きました!! あとaboutページ! 前回のやつもまあなしではなかったんですが… こんな感じに変更!! 多少は見やすくなったような… 自己満の気もしますがww 一旦こんな感じで行きたいと思います!! aboutページ編集の仕方は記…
フロントエンドチームの君田(きみた)です。 本日は半角英数が改行されない原因とその対処方法に関して書いていこうと思います。 要素の横幅は指定しているのに、半角英数がその要素のないに収まってくれない!という事象を今更ながら経験しました。 そんなときに少しでも役に立てれば嬉しいです。 なぜ半角英数は改行されないのか? タイトルでは直面する状況がわかりやすいように書きましたが、「半角英数が改行されない」は実際は正しくないです。 正確には「長すぎる半角英数の単語がある場合に改行されずに要素幅を超えて表示されてしまう」ということが起こっています。 CSS では、非常に長い単語などの切れない文字列がある場…
Reactとは、JavaScriptのライブラリです。Webサイトのフロント(見た目)部分を作ることができ、近年、良く使われている人気のライブラリです。 JSX Reactは、JavaScriptで組みますがサイトに表示させる部分は、HTMLでコーディングします。 こちらのHTML部分をReactでは、JSXといいます。 例えば、以下のように入力します。 JSXは、return{}内に入力するHTMLのことです。 JSX こちらに入力した内容は、ブラウザに表示されます。 JSXの表示結果 JSXの注意点 JSXは、HTMLのように書きますが、HTMLとは違う部分があります。 ◎複数行ではエラー…
1からWEBページを作りたい。ブログ記事をちょこっと直したい。そのためのHTMLやCSS、どうやって勉強すればいいんだろう?そんなあなたにおすすめの本をご紹介! ↓紹介するのはこちら↓ 1冊ですべて身につくHTML & CSSとWebデザイン入門講座[第2版] var today = new Date(); var day = today.getDate(); if( day == 5 || day == 10 || day == 15 || day == 20 || day == 25 || day == 30 ){ document.write('★5と0のつく日は楽天P4倍');} 楽天…
お久しぶりです。久しぶりの更新です。 今日は雨で肌寒い気候でした。 さて今日はhtmlとCSSの学習における自分の現状について書こうと思います。 基本ノーコードツールでHPを作成しているのですが、縁あって触れる機会を与えていただいています。いわゆるコーディングですね。というのも、参考になるページのレイアウト方法や色情報なんかをブラウザの検証ツールで調べる時にこのhtml言語が分からないと何のこと?ってなるので知っておくと便利ですね。 というか、理解が深まるので勉強しておいて損は無いと思います。 基本ホームページというのはパソコンに英文の言語を読み込ませてそれをパソコンや、ブラウザが認識して表示…
トラストバンク開発部・フロントエンドチームの君田(きみた)です。 本日はinputタグのpattern属性について書いていこうと思います。 フロントエンド開発をしていると、入力値の検証はどこかで実装する機会がある機能です。 そんなときに少しでも役に立てれば嬉しいです。 patern属性について pattern属性とはinput要素に正規表現を適用させることができる便利な属性です。 どんなinput要素にも指定できるわけではなく、以下のtype属性を指定した場合に有効になります。 text tel. email url password search 正規表現を設定することによって、入力欄が空文…
トラストバンク開発部・フロントエンドチームの君田(きみた)です。 本日はiOSにて入力フィールドをクリックした時に自動でズームされてしまう挙動を防ぐ方法を書いていこうと思います。 iOSでは入力フィールドの文字サイズ(font-size)が16px以下だとズームされる iOSの挙動では入力フィールドの文字サイズによって、少し画面がズームされます。 見出しにもあるとおり、具体的には16px以下の文字サイズを設定しているとクリック時にズームされます。 実際の挙動はこんな感じです。 (現状のふるさとチョイスでは以下の挙動は起こりません。疑似的にズームされるようにしています。) この挙動をそのまま保持…
僕がnoteをやっていた時の話 皆さんこんにちは、今日がはてなブログ2日目の投稿になります。 今回の記事の内容はnoteブログをやっていた時の話をしたいと思います。 note.com body { padding-top: 50px; background-color: white; } .starter-template { padding: 40px 15px; background-color: pink; } Toggle navigation Project Nyaan Home List Table Form noteで副業をやろうとしたが上手く行かなかった 僕はnoteで有料記事…