無料素材

ウェブ制作で使える画像素材 【<無料>素材サイト 3選】

  こんにちは、真面目系変人マサです。   WEB制作やブログを始めると、ページに画像素材を入れたい時がでてくると思います。 やはり、背景に画像を取り入れたりワンポイントで画像を配置していたりするページの方が、圧倒的にきれいで見やすいサイトになります。 ただ、使用する画像を撮影したり作成するのは手間ですよね。 そこで今回は無料で写真の素材が使用できるおすすめのサイトを3つ紹介し[…]

もっと読む
サイトのグループ化

0からサイト制作を学ぼう! 8 – HTML(ページ内のグループ分け) –

  こんにちは、真面目系変人マサです。 今回はページ内要素のグループ分けをしていきます。   WEBサイトには今まで学んできた文字や画像やリンクなどを表示しますが、1つの場所にすべての要素を表示するわけではありません。それぞれの要素ごとに場所を変えたり、背景の色や文字の大きさなどを変えなければいけません。そのために必要なのが今回学習するグループ分けです。 サイト制作をするにあた[…]

もっと読む
css背景の変更

0からサイト制作を学ぼう! 7 – CSS(背景の変更) –

  こんにちは、真面目系変人マサです。     前回は文字の色や大きさを変更しました。 今回は、CSSを使ってページの背景を変更していきたいと思います。   ページの背景には色を付ける方法と画像を指定する方法があります。まずは、色を付ける方法から説明していきます。       背景に色を付ける   index.html タイ王国 バンコク チェンマ[…]

もっと読む
cssで文字の装飾

0からサイト制作を学ぼう! 6 – CSS(文字の色や大きさの変更) –

  こんにちは、真面目系変人マサです。   今までHTMLの学習で文字や画像などの表示をしてきましたね。今回はCSSを使ってHTMLで表示させた文字の色や大きさを変更していきたいと思います。     CSSとはHTMLは文字や画像の表示をすることができますが、表示した文字の色や大きさ、画像の大きさなどを変更することができません。こうした装飾を行えるのがCSS[…]

もっと読む
表の作成

0からサイト制作を学ぼう! 5 – HTML(表やリンクの作成) –

真面目系変人、マサです。   今回は、ページに表とリンクを表示させてみましょう。     1.表の作成 名前 出身 太郎 東京 次郎 大阪   上のような表を作成していきましょう。まず表作成に用いるタグを先に紹介していきます。     表作成に使用するタグ   <table> </table>  表を示すタグです。[…]

もっと読む
html文字、画像

0からサイト制作を学ぼう! 4 – HTML(文字や画像の表示) –

まずは、上記のように簡単な文字を表示させてみましょう。 文字列は基本的に<body>タグ(<body>~</body>の間)に書いていきます。 コードは次のようになります。<body>タグの中に<p>タグを用いて文字列を表示します。<p>タグは初めて紹介するので、この後説明します。   <p>タグ &lt[…]

もっと読む
html骨組

0からサイト制作を学ぼう! 3 – HTML(ファイルの骨組) –

真面目系変人、マサです。 今日は、前回 index.htmlに保存した内容の詳細を説明していきたいと思います。 < > の横に — 1~7の番号をふっていますので、番号の順で説明をしていきたいと思います。   説明を聞く前だけど、<  >にはどういう意味があるの? <〇〇>の意味 <〇〇>は「タグ」と呼ばれるものです。タグには<〇〇>(開始タグ)、</〇〇>(終了[…]

もっと読む
htmlファイル作成

0からサイト制作を学ぼう! 2 – HTML(ファイルの準備) –

上記のコードは、HTMLページの基盤です。HTMLのページであれば、どのページにも100%必要になるので確実に覚えてください。 ここまで移し終えたら保存して終了にしましょう。今回はなんだかよくわからなくても大丈夫です。次回1個1個詳しく説明していきます。    

もっと読む
テキストエディタについて学ぼう

0からサイト制作を学ぼう! 1 – テキストエディタ –

真面目系変人、マサです。 今日から、全く知識の無い方でも簡単なWEBサイトをつくる方法を書いていきます。 (逆に少しでも知識のある方にとっては物足りない内容となりますので、ご了承ください。) 興味はあるけど、何にも持っていない。 心配ありません。サイトを制作するにあたって必要なものは以下のものだけです。 ・PC(WindowsでもMacでもOK!) ・やる気 どんなサイトがつくれるの? レスポンシ[…]

もっと読む