CSS HTML 初心者 勉強中。

CSS HTML 初心者です。備忘録的メモです。

   当サイトはアフィリエイト広告を利用しています

【CSS・HTML】ブログの文字の大きさを変えたい

ブログなどを作る時は、テンプレートを使うのが楽。 でも、文字の大きさや行間を好みのものにアレンジしたい時ってあると思います。 また、適切でない文字の大きさの場合、SEOに影響することもあるとか。 そこで今回は、文字の大きさをHTMLやCSSで調整する方…

HTMLで同一ページ内にリンクを作る

今回ご紹介するのは、ページ内で任意の場所に飛ばす方法。 すごく簡単です。 原型 例 微妙にずれてしまう場合 原型 ① <a href="#A1"> ここに文字 </a>② <div id=“A1”> ここに文字 </div> ①から②にジャンプできます。 ①と②の “” 内は同じ文字 にします。 (上ではA1にしていますが、半角文字 ならな…

HTMLでラインを引きたい。

今回はラインを引く話。 黄色枠の中をコピペしてHTML編集ができるシートに貼ったら、線を引くことができます。 1. style で指定 基本 太さを変える 色を変える 長さを変える 配置を変える★できない…( ノД`) 誰か教えてください… まとめ 2. hr タグを使う 基…

HTMLで蛍光マーカーみたいに。第2弾。下半分にマーカーを引いている感じに仕上げる。

以前 こんな感じにマーカーをひきたい 時の方法をご紹介しましたが… ▶▶ HTMLで蛍光マーカーみたいに。 - CSS HTML 初心者 勉強中。 今回ご紹介するのは、このタイプ。 黄緑 黄色 水色 ピンク ふとめ黄緑 ほそめ黄緑 原型はこちら。 <span style="background: linear-gradient(transparent 太さ%, #色指定 0%);"> ここに文字 </span> カラーチャ…

【HTML】上付き文字、下付き文字

「平方メートル」を変換すると、 m2[環境依存] と表示されます。 環境依存ってことは、つまり、 ブラウザなどの環境によっては、文字化けするかもってことですよね。 ということで、今回は、上付き文字や下付き文字の表示方法について。 上付き文字 下付き…

HTMLで表をつくりたい。いろいろなパターン編。リンク一覧 応用編。

表を作りたい。第3弾。 完全に自分が使いたいためだけ…(*´Д`) 基本の記事はこちら 今回作りたい雛形 雛形 基本の記事はこちら HTMLで表をつくりたい。table を作ってみる。 HTMLで表をつくりたい。いろいろなパターン編。 以前アップした記事です。 今回は…

HTMLだけで文章をかこむ枠に装飾をつけたい。

四角で囲みたいシリーズ、第3弾。 ちょっと装飾のついた枠をHTMLだけで表現できないか試行錯誤してみました。 もちろん、CSSとHTMLを使って表現するのが基本ではあるのでしょうけれども… 私天邪鬼なので (笑)。 枠の原型。 上にタブ、カラー枠、実線、線幅3p…

HTMLで表をつくりたい。いろいろなパターン編。

表を作りたい。第2弾。 というか、コピペして使えるように、 前回の記事のHTMLを書きだしただけです。( ゚Д゚) 基本の記事はこちら 簡単な表 表を装飾する <caption> ☆☆☆ </caption>:タイトルをつける。 colspan="n":n個のセルの連結。 下の3つを連結する場合。 右側下2つを連…

ブログの記事に更新日付を表示する方法 (手動)

ブログの記事に更新日付を手動で必要時のみ表示する方法について。 自分がよく使うので、いつでもコピペできるよう記事をあげます。 更新日付とは 手動で更新日付を追加する方法 更新日付 バージョン追加 更新日付とは 下の画像では 2018-09-04 の隣に 2018-…

画像の横に文字を並べたい時の対処法

画像の横に文字を並べたい時は、align属性を使います。 align属性といえば、以前少しだけ書きましたが、それをイメージタグに使うのですね。 HTMLの基本構造について。HTMLタグとは? 中央寄せ等のalign属性の話も少し。 基本構造 align属性を設定する・画像…

HTMLでLinkを貼りたい。

HTMLでリンクをはる方法。 基本 文字にリンクを貼りたい場合 画像にリンクを貼りたい場合 リンク先は別ページで開くようにしたい時 基本 基本は、 <a href=" ここにURL "> リンク </a> です。 文字にリンクを貼りたい場合 このブログは<a href="http.....URL">コチラ</a>。 とすると、 このブログはコチラ。 こうや…

HTMLで表をつくりたい。table を作ってみる。

今回はブログ内に表を貼りたかったので、その作り方を調べました。 エクセルをペタっと貼れたら楽なのに~(*´Д`) 構成 表のタグ 基本編 簡単な表を作ってみる。 表を装飾してみる <caption> ☆☆☆ </caption>:タイトルをつける。 bordercolor="#色指定": 枠の色を変える bgcolo…

HTMLで蛍光マーカーみたいに。

蛍光マーカーみたいな線を引きたい時は。。 こんな感じなら、HTMLで簡単にできます。 文字の背景に色をつけるというシンプルな方法。 黄緑 黄色 水色 ピンク 応用編 原型はこちら。 <span style="background-color: #色指定;"> ここに文字 </span> カラーチャートはコチラ。 黄緑 #00FF66 <span style="background-color: #00FF66;"> ここに文字 </span> 黄色 #…

HTMLで文章を四角で囲みたい。いろんなパターン編。

四角で囲みたいシリーズ、第2弾。 前回は、タイプ別の枠について書きましたが… 今日はいくつかパターンを作ってみます。 黄色枠の中をコピペしてHTML編集ができるシートに貼ったら、枠がつきます。 原型。 その1.実線、線幅 3px、まわり10px、枠のまわり 1…

HTMLで文章を四角で囲みたい。仕組み編。

文章全体を四角で囲みたい! CSSで指定してやる方法もあるけど、今回は、HTMLで直接指定する方法。 ちょっと見にくいです…。 必要な箇所に、目次から飛ぶのがいいかもしれません…(´_ゝ`) <div> タグのstyle属性を使う。 枠線のタイプを選ぶ。 枠線の太さを選ぶ。</div>…

ブロックレベル要素とインライン要素。→この概念はHTML5では廃止。

HTMLには、いろいろタグがあるようだけど、 その順番には、何か決まりごとがあるのでしょうか。。 調べていたら、ブロックレベル要素とインライン要素という言葉に出会いました。 なんか 特殊例とかあってややこしそうなんですけど…(´_ゝ`)とりあえず基本事…

strong タグの話。乱用にはちょっとご注意を。

私、太字強調が好きで、よく使うのですが…。 はてなブログは太字はデフォルトで太字は <strong> タグだし…。 このタグを使うと、太字になると同時に、「これはすごく強調したいこと」という意味もつきます。つまり、例えば検索エンジンなどに、すごく強調してる、と</strong>…

色をつけたい。HTML, CSS カラーコードの話。

こんにちは。 文字に色をつけたりするには、カラーコードを利用します。 カラーコードとは? WEBセーフカラーとは? カラーコードページリンク ★ カラーチャートとカラーピッカーが使いやすいサイト。 ★ 色の名前も一緒に見ることができるサイト。分類が面白…

HTMLの基本構造について。ツリー構造とは?

HTMLは、文書の構造をタグで指定するので、 こんな感じになってるんですね。ツリー構造というそうです。 これを意識して、作っていくことになります。 上でいうと、それぞれのタグの意味はこんな感じ。 <html>タグ:これはHTMLの文書ですよ、という宣言? <head>タグ:ヘ</head></html>…

HTMLの基本構造について。HTMLタグとは? 中央寄せ等のalign属性の話も少し。

HTMLの基本から勉強中です。 HTMLの基本構造について。 基本構造。 ちょっと応用。 もうひとつ応用。align属性。 最後に。 基本構造。 <開始タグ> 文章 </終了タグ> ※開始タグと終了タグの文字は同じ。 【HTML】 <p>テスト。</p> ▲このようなHTMLは、▼下のようなHTMLになります…

はじめに。CSS、HTMLて何でしょう。

CSS, HTML初心者です。ガチ初心者 (+_+) こちらのブログ開設にあたり、お勉強することにしました。 はてなブログさんは、HTML編集ができる仕様だし、 一部は気軽にCSSを触ることができるようになっているんですよね。 はてなブログさんのカスタマイズができ…