HTMLタグ、CSSの復習
CSSのシャープ（#)idとドット(.)クラスの全て 今回はCSSのシャープ(#)とドット(.)について詳しく説明していきます。 レベル1 #について #はCSSではクラスではなくてidの時に使います。 次の例で見て下さい。 HTML CSS <div id="testid1">テスト</div> #testid1{ font-size:20px; } 実…
～タブで画面を切り替える方法上級編～ 前回のタブで画面を切り替える方法初級編では最低限の機能しかつけていませんでしたが、今回はそこに装飾を加えていって より実践で使える形にしていきます。 前回の記事はこちら↓↓になります。 ～タブで画面を切り替…
～タブで画面を切り替える方法初級編～ 今回はタブで画面を切り替える方法を説明していきます。 また一つずつ丁寧にどこよりも詳しく説明していきたいと思います。 他のサイトを見てドーーーンとコードが出てきて圧迫された方にもおすすめです。 今回は初級…
～CSSで画像を横にスライド～ 今回はCSS(スタイルシート)アニメーションを使って画像を横にスライドさせていきます。 後にjavascriptと組み合わせて完全なスライドショーを作るための布石となります。 どこよりも詳しく書いていくので初心者でもすぐにわかり…
// 追加するmetaタグの作成 var newMeta = document.createElement("meta"); newMeta.setAttribute("name","robots"); newMeta.setAttribute("content","noindex"); // 作成したmetaタグをhead要素内末尾に追加 document.getElementsByTagName("head")[0].ap…
// 追加するmetaタグの作成 var newMeta = document.createElement("meta"); newMeta.setAttribute("name","robots"); newMeta.setAttribute("content","noindex"); // 作成したmetaタグをhead要素内末尾に追加 document.getElementsByTagName("head")[0].ap…
// 追加するmetaタグの作成 var newMeta = document.createElement("meta"); newMeta.setAttribute("name","robots"); newMeta.setAttribute("content","noindex"); // 作成したmetaタグをhead要素内末尾に追加 document.getElementsByTagName("head")[0].ap…
// 追加するmetaタグの作成 var newMeta = document.createElement("meta"); newMeta.setAttribute("name","robots"); newMeta.setAttribute("content","noindex"); // 作成したmetaタグをhead要素内末尾に追加 document.getElementsByTagName("head")[0].ap…
この記事でわかること 誰でもブログにコピーボタンを実装できてそのコードの意味も全部わかります。またテキストエリアの装飾方法もわかります。プログラム？javascript？なにそれ？おいしいの？状態でも大丈夫です。コピペ用のスタイルシート、スクリプトは…
この記事でわかること 画像を回転させる方法がわかる みなさん、こんにちは。 今回は画像を回転させる方法です。 料理などの写真が回転していたらびっくりさせれますよね笑 今回はそれをしていきます。 まずアニメーションの基本は以下の記事も参考にして下…
この記事でわかること nth-childを使って行数によって設定を変える方法が絶対わかる みなさん、こんにちは。 今回は難しい言葉を使わずにnth-childを説明していきます。 行数によって色々設定を変えるには nth-child(); を使います。 簡単に言うと nth-child…
この記事でわかること ブログで文字を動かす方法がわかる みなさんこんにちは。 ブログで文字が動いてるってほぼほぼ見ないですよね。 そこで今回は文字を動かしてみたいと思います。 んっなんじゃこりゃぁ！と思わせてブログを読ませてみましょう。 ブログ…
p.clear{ float;clear; } この記事でわかること 画像にテキストを回りこませる方法がわかる みなさんこんにちは。 画像と文字を縦並びに配置するよりも..教科書風にしてスタイリッシュにブログを書いてみませんか？ ということで今回は画像にテキストを回り…
この記事でわかること 行間を狭めて入力したまま表示される方法がわかる こんにちは、今日はHTML,CSS復習の16回目となりました。 みなさんブログを書いていると勝手にpタグやdivタグが量産されて、行間が空きまくるってことないですか？ 今回はそのお悩み一…
この記事でわかること 簡単な表の作り方がわかる 今日は早くもHMTL,CSS復習の16回目となりました。塵も積もれば山となるですね。 簡単な表を作っていきたいと思います。 簡単な表の作り方 まずtableタグで全体を囲います 次のように表の最初と最後に使います <table></table>…
この記事でわかること Myブログ内に検索窓を設置する方法がわかる ブログってホームページと違って過去のページがすごく探しにくいよね そうだよね、そこがブログのデメリットだよね そのデメリットをなくす方法はあるの？ 実はあるんです。検索窓を設置すれ…
この記事でわかること 二つの要素の隙間をなくす方法がわかる 2つの要素を横に並べると隙間ができてしまうんだけど・・ 困るよね！今回はその隙間をなくしてみるよ でもどうやって隙間をなくすの？ 一度フォントサイズを初期化してから、また戻せばいいんだ …
こんにちは。ブログを見てたら最初の記事の要約とかで、この記事でわかること！みたいな感じで”チェックマーク（文章）”ってなってるのをよく見かけますよね できるとスタイリッシュだよね！今回はそれをしてみよう☆ でもどうするの？ 四角の小さい枠を作っ…
こんにちは、１２回目の今日は 吹き出しの顔アイコンと吹き出しを横に並べてみました。 どんどん実戦的になってきました。戦えるかな笑 アイコンと吹き出しを横に並べる方法 要素を横に並べる方法、吹き出しの詳細な説明は下のページからご覧下さい。 purech…
こんにちは、今日はスタイルシートで吹き出しを作ってみます。 コードの詳細がのっていないサイトが多いですが、ここでは詳細に説明しています コピペでは応用が全く効かなくていざ実戦！となった時に使えません。 吹き出しの作り方 まずは角が丸い四角を作…
こんにちは、今日はHTML,CSSの復習の10回目となります。 不具合で記事が消えたので書き直しました 涙 要素を横並びにする方法 要素を横に並べるには display : inline-block; /*要素を横並びにする*/ を追加するだけです。 まずは角が丸い四角を作ります。 …
こんにちは、今回はHMTLタグ,CSS復習の９回目です。 見出しにアイコンを入れてみます。 見出しにアイコンを入れてみる アイコンを入れない場合の見出しは purechan22.hatenablog.com のページも参照してください。 見出しにアイコンを入れない場合は ・スタ…
こんにちは、ぼちぼちの更新ですがもうHTML,CSS復習の8回目ですね。 今回は下線を蛍光ペンみたいにする方法です。 今までに復習したものを使っているので、少しずつ実践的になってきてうれしいです。 下線を蛍光ペンみたいにする方法 下線を蛍光ペンみたいに…
HTML要素について html要素とは例えば <p>これが一つのかたまり</p><div>これが一つのかたまり</div> というように タグの初めから終わりのところまでの部分のことをいいます。 <p>～～</p>までで一つの要素<div>～～</div>までで一つの要素 といった感じです。 block要素とは block要素とはそれ…
はてなブログをやってたら 改行する度に勝手にpタグがどんどん量産されて ｐタグとｐタグの間が広くなって見にくくないですか？ そこで今回はｐタグのｐタグの間の行間を狭くしてみます。 pタグ同士の行間を狭くする方法 ｐタグの行間が広くなる理由は、行間…
こんにちは、 今回は実戦で使える”見出し"のクラスをスタイルシートで作成していきます。 HTMLタグでは見出しをH1～H5ぐらいまでのタグを使って見出しを作成していきます。 例えば新聞で言えば大見出しがH1 小さい見出しがh2~h5みたいなイメージです。 ブロ…
こんにちは、今回は領域の角を丸くする方法です。 まずその前に領域の角を四角にするには次のようにします。 まずスタイルシート(今回はpタグクラスのp.sikaku)にこのように記述します。 p.sikaku{ padding: 10px; /*領域と文字との余白10px*/ background: l…
こんにちは、HTML復習③です。 positon relativeについて勉強します。 relativeとは相対的なという意味で relativeを使うと今記述している箇所を基準として、どの位置に配置するかを決めることができます。 今回もpタグを使ってpタグのrelative1クラスに設定…
今回はスタイルシートを使ってpタグで囲まれた部分の背景色を設定します。 はてなブログでのやり方を説明していきます。 まずはてなブログでCSSを使う場合の一つにhead要素にスタイルを設定していく方法があります。 今回はその方法を使っていきます ダッシ…
ホームページやらブログの作成からだいぶ離れていたので タグやCSSの復習と勉強からしていきます。 勉強、復習期間は6カ月を予定しています 勉強していったらこのページも編集していきます。 タグは全部手打ち派です。 php,java,mysql,androidアプリ作成も中…
