データ容量がいっぱいの為更新は11月になります。

デザリングのデータ容量がいっぱいの為、更新は11月にまとめてになります 実践として、今してるゲーム商人放浪記のページも作りました。 でもまだまだ改良の余地がありそうです。

2つの要素の隙間をなくしてみた HTML,CSS復習14

この記事でわかること 二つの要素の隙間をなくす方法がわかる 2つの要素を横に並べると隙間ができてしまうんだけど・・ 困るよね！今回はその隙間をなくしてみるよ でもどうやって隙間をなくすの？ 一度フォントサイズを初期化してから、また戻せばいいんだ 二つの要素の隙間をなくす方法 まず一度フォントのサイズを0として初期化します。 フォント初期化のスタイルシート div oya{font-size: 0px; /*fontsizeの初期化*/} 次に要素を横に並べるスタイルシートを作って ここでフォントサイズを元に戻します div.yoko2{display: inline-block; /*要素を横…

この記事でわかること！チェックマーク～をCSSで作ってみた HTML,CSS復習13

こんにちは。ブログを見てたら最初の記事の要約とかで、この記事でわかること！みたいな感じで”チェックマーク（文章）”ってなってるのをよく見かけますよね できるとスタイリッシュだよね！今回はそれをしてみよう☆ でもどうするの？ 四角の小さい枠を作って下と左にだけ境界線をいれてそれを傾ければいいのよ チェックマークを入れるには まずただの四角の小さい枠のスタイルシートです。 小さい枠なので幅を20px、高さを10pxにしてみます。 width:20px;height: 10px; 枠の左と下にだけ境界線を入れます。 border-left: 2px ridge green; /*ridgeは立体的な…

アイコンと吹き出しを横に並べてみた HTML,CSS復習12

こんにちは、12回目の今日は 吹き出しの顔アイコンと吹き出しを横に並べてみました。 どんどん実戦的になってきました。戦えるかな笑 アイコンと吹き出しを横に並べる方法 要素を横に並べる方法、吹き出しの詳細な説明は下のページからご覧下さい。 purechan22.hatenablog.com purechan22.hatenablog.com まず吹き出しアイコンはフリー素材のページにいくらでもあるのでそこから取ってきます。 今回取ってきたのはこれです。 吹き出し部分のスタイルシートは次のようになります。 p.yokohuki {position: relative;display: inline…

吹き出しのCSSのコードを詳細に説明 HTML、CSS復習⑪

こんにちは、今日はスタイルシートで吹き出しを作ってみます。 コードの詳細がのっていないサイトが多いですが、ここでは詳細に説明しています コピペでは応用が全く効かなくていざ実戦！となった時に使えません。 吹き出しの作り方 まずは角が丸い四角を作ります。 これは以下の記事も参考にしてください。 要素を横並びにする方法 HTML,CSS復習⑩ - ★うつ病の一人暮らし★外で働かないで生きていく スタイルシートはこうなります。 div.yokohuki {position: relative; /*位置を相対的に*/display: inline-block; /*要素を横並びにする*/border-…

要素を横並びにする方法 HTML,CSS復習⑩

こんにちは、今日はHTML,CSSの復習の10回目となります。 不具合で記事が消えたので書き直しました 涙 要素を横並びにする方法 要素を横に並べるには display : inline-block; /*要素を横並びにする*/ を追加するだけです。 まずは角が丸い四角を作ります。 スタイルシートには次のように記述します。 div.yokonarabi{display: inline-block;border-radius: 10px; /* 四隅を丸くする */padding: 10px; /*領域と文字との余白10px*/background: lightblue; /*背景色 light…

見出しにアイコンを入れてみる HTMLタグ、CSS復習⑨

こんにちは、今回はHMTLタグ,CSS復習の9回目です。 見出しにアイコンを入れてみます。 見出しにアイコンを入れてみる アイコンを入れない場合の見出しは purechan22.hatenablog.com のページも参照してください。 見出しにアイコンを入れない場合は ・スタイルシート h2.lightblue{font-size: 15px;background: lightblue;padding: 10px;border-bottom: 3px solid #000;border-left: 3px solid #000;border-radius: 10px;} ・記事中の記述 <h…

下線を蛍光ペンみたいにする方法 HTML,CSS復習⑧

こんにちは、ぼちぼちの更新ですがもうHTML,CSS復習の8回目ですね。 今回は下線を蛍光ペンみたいにする方法です。 今までに復習したものを使っているので、少しずつ実践的になってきてうれしいです。 下線を蛍光ペンみたいにする方法 下線を蛍光ペンみたいにするには ただの下線をつけるCSS（今回はspanタグのredbottomクラスにしてみましたが、クラス名は何でも大丈夫です）。 span.redbottom{border-bottom: 1px solid red;} とは違ってbackground 背景を使います。 (spanタグは段落タグpよりも小さい単位みたいに考えて使ってます。) 文字…

HTML要素 blockレベル要素について HTMLタグ・CSS復習⑦

HTML要素について html要素とは例えば <p>これが一つのかたまり</p><div>これが一つのかたまり</div> というように タグの初めから終わりのところまでの部分のことをいいます。 <p>～～</p>までで一つの要素<div>～～</div>までで一つの要素 といった感じです。 block要素とは block要素とはそれぞれのコンテンツをまとめた一つのかたまりのことを言います。たと例えば<div>～～</div>タグなどのHTML要素でコンテンツをまとめたものがblockレベル要素です。 block要素の特徴 block要素の特徴には それぞれの要素が縦に並ぶ 余白を自由に設定で…

はてなブログのpタグ内の行間を狭くする方法 HTMLタグ、CSS復習⑥

はてなブログをやってたら 改行する度に勝手にpタグがどんどん量産されて pタグとpタグの間が広くなって見にくくないですか？ そこで今回はpタグのpタグの間の行間を狭くしてみます。 pタグ同士の行間を狭くする方法 pタグの行間が広くなる理由は、行間として1emの余白がデフォルトとして設定されているからなんです。 これをスタイルシートを使って変えてやることで行間を狭めることができるんです。 スタイルシートには次のように記述します。 .entry-content p { margin:0} すると全ての記事でpタグ同士の行間が狭くなります。 ♯HTMLタグ ♯CSS ♯スタイルシート