超初心者のためのホームページデザイン

ホームページ作成初心者でも簡単にデザインが真似できるようにHTML・CSSの記述例を紹介しています。 文章と画像の部分を入れ替えるだけで簡単にフライヤーのようなホームページが作成できます。 動作確認ができるようにデザインに使用した画像もUPしています。 私もまだまだ初心者なので、おかしな記述もあるかもしれませんが、超初心者の方の参考になればと思います。 使用しているブラウザは、Microsoft edgeです。

2021-01-01から1ヶ月間の記事一覧

キャスト紹介「3D彼女 リアルガール」

1,3D彼女 リアルガールのキャスト紹介 2,キャスト内での共演あり(ドラマ・映画) 1,3D彼女 リアルガールのキャスト紹介 筒井光 役(佐野勇斗) 生年月日:1998年3月23日 〇出演している作品『映画』 高台家の人々(高台光正) ミックス。(佐々木優馬) …

HPデザイン「ファンタスティック・ビーストと黒い魔法使いの誕生」その7

〇約25分でやったこと 1,文字に下線を付ける 2,文字の前に縦線を入れる 3,画像の準備 4,画像の配置 5,QRコードの準備 6,QRコードの配置 7,完成 1,文字に下線を付ける 「ハリーポッター」「ファンタスティック・ビースト」・・・の文章に下線を付け…

HPデザイン「ファンタスティック・ビーストと黒い魔法使いの誕生」その6

〇1時間でやったこと 1,表を左側に並べる 2,文字の配置 3,画像の準備 4,画像の位置 〇今回の表の背景画像は、ファンタビその1の枠を使用しています 1,表を左側に並べる 前回作った青い表の左側に今回作る表を配置します <html>の場合 <div class="hyo4"><table width="600" height="404"></div> <css>の場合 .hyo4{positio</css></html>…

HPデザイン「ファンタスティック・ビーストと黒い魔法使いの誕生」その5

〇1時間でやったこと 1,表を横並びに置く 2,背景画像の準備 3,背景画像を配置 4,画像の準備 5,画像の配置 1,表を横並びに置く 前回配置した表の隣に今回作る表を配置します <html>の場合 <div class="hyo3"><table width="600" height="1000">~</table> <css>の場合 .hyo3{position:absolute;top:25%;left:125%;} HTMLの説明</css></div></html>…

HPデザイン「ファンタスティック・ビーストと黒い魔法使いの誕生」その4

〇1時間でやったこと 1,画像の準備 2,表(画像・文章)の配置 3,枠の作り方 4,背景画像の設置 1,画像の準備 ネットで「Harry Potter WIZARDS UNITE」と入力して調べて、次のような画像を、名前を付けて保存します fan3.jpg 2,表(画像・文章)の配置 …

HPデザイン「ファンタスティック・ビーストと黒い魔法使いの誕生」その3

〇1時間でやったこと 1,文字の配置 2,画像の準備 3,画像の配置 1,文字の配置 <html>の場合 <div class="hyo1"><table width="407" height="462"><tbody><tr class="ga1"><td><p class="moji3">最新写真を公式SNSで見よう!<br><p class="moji1"> 絶賛制作中の「ファンタスティック・ビーストと黒<br> い魔法使いの誕生」で、ニュート役のエッディと<br> ダンブルドア役のジュードが談笑する</p></p></td></tr></tbody></table></div></html>…

HPデザイン「ファンタスティック・ビーストと黒い魔法使いの誕生」その2

〇1時間でやったこと 1,画像の準備 2,画像の配置 3、枠を作る 4,前回の続き 1,画像の準備 ・この画像は2,画像の配置で使用します ・ネットで「ハリーポッターと呪いの子」と検索して、名前を付けて保存します fan.jpg ・画像の大きさを設定するために…

HPデザイン「ファンタスティック・ビーストと黒い魔法使いの誕生」その1

〇1時間でやったこと 1,背景画像の準備 2,表の背景画像 3, 表の中に文章を入力する 2,背景画像の準備 ・ネットで「クラシック壁紙」と検索して好みの画像を選びます。 (ここではTapeta YORK Textures & Prints TN0023というクラシック壁紙を使用します…

HPデザイン「10万分の1」その3

前の1時間でやったことはこちらを参考にしてください HPデザイン「10万分の1」その2 - 超初心者のためのホームページデザイン (hatenablog.com) 〇33分でやったこと(1時間もかかりませんでした) 1,文字の配置 2,画像を準備して配置 3,完成 1,文…

HPデザイン「10万分の1」その2

前の1時間でやったことはこちらを参考にしてください HPデザイン「10万分の1」その1 - 超初心者のためのホームページデザイン (hatenablog.com) 〇1時間でやったこと 1,文字の大きさを設定 2,文字に下線を付ける 3,画像を横に並べる 1,文字の大きさ…

HPデザイン「10万分の1」その1

〇1時間でやったこと 1,背景画像の準備 2,文字を縦にして位置を設定する 3,表の背景を設定 1,背景画像の準備 背景画像の作り方 ネットでグラデーションメーカー - あなたの好きな「色」からグラデーション、お作りします。 (colordic.org)を開きます。 …

HPデザイン「君の瞳が問いかけている」その3

前の1時間でやったことはこちらを参考にしてください HPデザイン「君の瞳が問いかけている」その2 - 超初心者のためのホームページデザイン (hatenablog.com) 〇40分でやったこと(1時間もかかりませんでした) 1,画像の配置を設定 2,文字の大きさを…

HPデザイン「君の瞳が問いかけている」その2

前の1時間でやったことはこちらを参考にしてください。 HPデザイン「君の瞳が問いかけている」 - 超初心者のためのホームページデザイン (hatenablog.com) 〇1時間でやったこと 1,文字の位置を真ん中にする 2,画像編集 1,文字の位置を真ん中にする <html>の場</html>…

HPデザイン「君の瞳が問いかけている」その1

〇1時間でやったこと 1,背景画像の準備 2,画像を縦に並べる 3,文字を縦書きにする 4,文字の色を変える 1,背景画像の準備 背景画像の作り方 ・ネットで<パステルカラー - Pastel Colors (colordic.org)>を開きます。 ・色で遊ぶ→グラデーションメーカ…