2022-01-01から1年間の記事一覧
どうも皆さんこんにちは！kwです！ 今回は、一般的なヘッダーの構成をご紹介していきます。 ヘッダーといえば以前作り方をご紹介しましたが、今回は構成の方をご紹介していきます。 ヘッダーの作り方はこちらです↓ ということで、やっていきましょう！ 1.一…
どうも皆さんこんにちは！kwです！ 今回は、Webデザインをやっていく上で、覚えておいた方がいい（学んでおいた方がいい）技術をご紹介します！ Webデザインをこれから始める方は、一体何から始めればいいのか、何を学んでいけばいいのか分かりませんよね。 …
どうも皆さんこんにちは！kwです！ 今回は、ウェブサイト内にYouTubeの動画を載せる方法をご紹介していきます！ Webサイトを閲覧していると、ときどきYouTubeの動画が乗っている場合ありますよね。 「あれってどうやってやってるんだろう？」と疑問に思った…
どうも皆さんこんにちは！kwです！ 今回は、ヘッダーの作り方をご紹介します。 Webサイトを開いたら一番最初に見えると言っても過言ではないヘッダーですが、ヘッダーがうまく作れるのと作れないのではサイトの印象が大きく変わってしまいます。 そんなヘッ…
どうも皆さんこんにちは！kwです！ 今回は、リスト（<li>タグ）の点を消す方法をご紹介します。 「リストとして文字列を並べたいのに点が邪魔」な場合よくありますよね。 そういった問題を解決するには、とある一行をCSSに書き足すだけで点を削除することができ</li>…
どうも皆さんこんにちは！kwです！ 今回は、フォントの変え方をご紹介していきます！ 例えば、高級感のあるWebサイトを作っているときに、標準のフォントでは雰囲気が台無しになってしまう場合ありますよね。 そんな場面に直面した際に、CSSでとある文を足す…
どうも皆さんこんにちは！kwです！ 今回は、リンク（<a>タグ）の下線を消す方法と、色を変える方法をご紹介していきます！ Webデザインを学んでいる際に、誰もが一度はリンクの下線を消したりリンクの文字の色を変えたいと思いますよね。 今回は皆さんのそんな</a>…
どうも皆さんこんにちは！kwです。 今回は、<h1>タグの文字の太さを普通の太さに戻す方法をご紹介していきます。 <h1> タグといえば、見出しに使う大きくて太い文字ですよね。 今回は、そんな<h1>タグの太いもじを普通の太さの文字に戻していきます！ 少し前に太字にする</h1></h1></h1>…
どうも皆さんこんにちは！kwです！ 今回は、Webサイト上で特定の画像をクリックしたら別のページに飛ばす方法をご紹介します。 <a>タグで囲った文字をクリックしたら別のページに飛ぶ方法はご存知の方も多いのではないのでしょうか？ でも、この<a>タグを使うこと</a></a>…
どうも皆さんこんにちは！kwです！ 今回は、border（線）の長さを指定する方法を解説していきます！ borderプロパティについて詳しく触れている自分の記事があるので、是非そちらを見てから今回の記事を見ることを推奨します！ borderプロパティについて詳し…
どうも皆さんこんにちは！kwです！ 今回は、画像（img）を縦に並べる方法をご紹介します！ 普通に<img>タグを複製すると画像が縦並びになってしまいますが、<img>タグに対してCSSで一行だけ記述すると、画像を縦並びにすることができてしまいます！ 「あまり使わないで…
どうも皆さんこんにちは！kwです。 今回は、リンクを別タブで開くように指定する方法を紹介します。 別のタブでリンクを開いた方が、すぐに前のタブに戻れて便利な時、ありますよね。 今回は、そういった場合の際に、どのようにしてリンクを別タブで開くよう…
どうも皆さんこんにちは！kwです！ 今回は、CSSのborderプロパティの一般的な文法と、例としてborderプロパティを使ったちょっとしたテクニックを解説していきます。 borderプロパティをうまく使える人とうまく使えない人とでは、デザインの出来の差がとても…
どうも皆さんこんにちは！kwです！ 今回は、文字を太字にする方法、下線を付ける方法を解説していきたいと思います！ この二つの方法は何通りかやり方があるのですが、今回は一般的なやり方を紹介していきます。 もし、マイナーな方も知りたいとの希望があれ…
どうも皆さんこんにちは！kwです！ 今回は、文字の色、大きさを指定する方法を解説していきます！ これらの技術はウェブデザインの基礎なので、まだ知識が曖昧な方やこれからCSSを学び始める人なども今回で是非覚えちゃってください！ また、CSSの読み込み方…
どうも皆さんこんにちは！kwです！ 今回は、文字列の行の幅を指定する方法を紹介していきたいと思います！ よくウェブサイトを作る際に、<p>タグなど文字を出力するタグで文章を書いていると、画面の端から端まで文字で埋まってしまいますよね。（参考↓） See t</p>…
どうも皆さんこんにちは！ 今回は、CSSをHTMLファイル内に書く方法をご紹介します！ 何らかの不具合でCSSが読み込めない時や簡易的なCSSを記述する場合に使える技術なので、これからウェブデザインを学んでいく方は余裕があれば頭の片隅でこの技術を覚えてお…
どうも皆さんこんにちは！kwです！ 今回は、ウェブサイト内に画像(img)を貼る方法をご紹介します！ この技術はウェブデザインの基礎なので、まだ覚えていない方はこの機会にぜひ、覚えていってください！ 1.サイト内に画像を貼る方法 2.画像リンクがない場合…
どうも皆さんこんにちは！kwです！ 今回は、HTMLとCSSで目次を作る方法をご紹介していきます！ ウェブサイトを開いたら最初に目につく目次、ちゃんと作っておきたいですよね〜。 是非、今回で目次の作り方を覚えていってください！ 1.おしゃれな目次の作り方…
どうも皆さんこんにちは！kwです！ 今回は、HTMLで入力欄を作成する方法を紹介します。 これができるようになると、お問い合わせフォームなどを作ることができ、使いこなすととても便利な技術なので是非覚えていってください！ 1.入力欄の作り方 2.inputタグ…
どうも皆さんこんにちは！kwです！ 今回は、JavaScriptの読み込み方を紹介します！ また、HTML内にJavaScriptを記述する方法も解説していきます！ JavaScriptはHTMLやCSSよりも難しく、文法も全く違いますが、覚えておくだけでデザインの幅がものすごーーー…
どうも皆さんこんにちは！kwです！ 今回はカーソルが要素に触れた際に、要素を大きくする方法や、要素の透明度を下げる方法を紹介します。 これもよく使う技術なので覚えておきましょう！ 1.要素を大きくする方法 2.透明度を下げる 3.まとめ 1.要素を大きく…
どうも皆さんこんにちは！kwです！ 今回は、画像やテキストなど（要素）に触れた際にカーソルの形を指にする方法を解説します。 画像やテキストにカーソルが触れた際に、カーソルが指になると「ここはクリックできるんだ」と思わせることもできるので、是非…
どうも皆さんこんにちは！Kwです！ 今回は、CSSの読み込み方について解説します！ CSSは別ファイルではなく、index.htmlファイルでも使うことができますが、 CSS用の別ファイルを作ることによってコードがとても見やすくなります！ CSSの読み込みはウェブデ…
どうも皆さんこんにちは！kwです！ 今回は、画像（img）をアイコンみたいに丸くする方法を解説していきます！ これを覚えると、自分のプロフィールサイトなどを作る際にもデザインの幅が広がるようなとても便利なこともできてしまうので是非習得してみてくだ…
どうも皆さんこんにちは！kwです！ 今回は、画像（img）の上に文字を重ねる方法を解説していきます！ Webデザインを学んでいる上でよく使う技術なので皆さんも是非、習得してみてください！ 1.画像に文字を重ねる方法！ 2.まとめ 1.画像に文字を重ねる方法！…
皆さんこんにちは！kwです。 今回は、HTML,CSSを勉強していく上で必ずと言ってもいいほど全員が直面する 『imgにtext-align:center;が効かない！』という問題についての対処法を解説していきます。 1.imgにtext-align:center;を効かせる方法 2.対処法 3.まと…
