読者です 読者をやめる 読者になる 読者になる

僕の世界観を変えてみる

比較的簡単なHTMLでWebサイトを作ってみるのでその過程を綴っていいたいと思っています。

Windows7→Windows10にしたら調子悪くなって放置してました。

// こんばんは。 タイトルにあるように、いやいや本当は仕事でめんどうが起こり、ほかにも要因はありましてサボってました。 それにしても7から10にアップグレードすると不調になるらしいって聞いて、あー失敗したなって後悔しました。 8.1から10なら特に問…

list-style-image リスト記号をアイコンにしてみた!

はい!タイトル通り今回はリスト記号をアイコンにしてみたので書いていきたいと思います。なんでそんなことしたのかというと、本に載っていたというのもあるんですけど、いろいろWebサイトを見ていたらちょっとしたアイコンがついていたりするんですよ。その…

background-imageで背景に画像をはめ込んでみた

前回はグローバルナビを作るためにsample.htmlのコピーを3つ作りそれぞれkaitori.html、point.html、souba.htmlと名前を付けリンクを付けました。 で、グローバルナビっていうのが ・トップ ・買取店の利益の出し方 ・騙されないようにするポイント ・相場と…

<a href="http://~ でリンクを作成し、外部サイトへ誘導しよう!

今回はテキストにリンクを設定していきます。実は僕リンクの作り方知っています。デジカメなどの家電をオークションに出品する際、スペックや説明書がPDFだった場合メーカーのサイトに飛んでいけるようリンクを貼っていたんです。 なんですが、cssを使ったリ…

メインカラムとサブカラムに分割して2段組みのレイアウトに変更してみよう

ということで今回はページのレイアウトを調整していこうかと思います。 今のところ僕のホームページはすべてが左寄せになっているのでこれをすべてセンター寄せにしていくところから始めます。 ではやっていきましょう。 ■<div> まずは<header>~</footer>までを<div></div>で囲みます。 急にd…

よっしゃ、いっちょフォント変えたろ!Google Fontsでウェブフォントを変更してみた

やっと5章まできました。109ページです。この章ではレイアウトを変更することがメインになってるようです。ただここにきてね、次にやるべきことがサイト名とキャッチコピーを挿入するってあるんですけど、まさかの5章にきてタイトル入れるっていう。 もう最…

ホームページに画像を載せてみよう!

今回はホームページのトップ画面に画像を表示させていきたいと思います。 文字だけでなく画像も織り交ぜたほうが見やすいですもんね。とはいえ僕のホームページは買取系というかブランド品とかなんであまりいい画像はないんですが、うーん。 画像選びに時間…

cssでulとtableを装飾していこう

今回はまず箇条書きの●を■に変えたりなんなりしていきます。 楽そうですね。 早速やっていきたいと思います。 ■list-style-type htmlでは箇条書きで表示するときは<ul> </ul>で囲み、その中に<li></li>で文章を入力してきました。こんな感じに <ul> <li>ダイヤモンドの見方</li> <li>貴金属の値段</li></ul>…

paddingやmarginを使って余白を調整しよう

今まで製作してきたホームページは文字がキュっとなっていたので窮屈な印象でした。 そこで今回はまずpaddingを使って余白を調整していきたいと思います。 ■padding まずはタイトルの余白を調整していきます。 cssでpagetitle部分にに padding: 5px 15px; と…

border関連のプロパティを使って下線や枠を作ってみよう

”枠”で画像検索したところワークショップの画像がでてきたり、”下線”で画像検索したら無線の画像がでてきたりとなかなかいい画像が見つからずこれになりました。 前回の記事ではclassについて書いたので学校とかクラスルームの画像を最初に張りたくて検索し…

class属性を使って個別にcssを指定する!

今回はclass属性を使って個別にcssを指定してきます。 どういうことかというと、h2の見出しが2つあるとき、h2{font-size:15px;}と書き込むと2つともフォントが15pxに変更されてしまいます。 1つは15pxでもう1つは20pxにしたい場合、classを使って別々にサイ…

HTMLで作ったページをCSSで装飾しよう!

さて今回からやっとCSSに入っていきます。 CSSは前回まで作ってきたHTMLに直接書く方法と、それとは別に.cssという名前のファイルを作りそちらに記述していく2種類あるようです。 ということは僕がオークションでやっていたのは直接書く方法だったのかな? …

アウトライン考えていますか?セクションタグで章、節、項を分類しよう

本日3回目の更新です。 どんどん行きましょう。 まずはHTMLのアウトラインを理解しよう、です。 アウトラインとは階層やツリー構造のことのようです。 Excelでもアウトラインってありましたよね。 で、セクションというのが区切りという意味のようです。 つ…

表は<table>タグで作成する!

今回は表を作っていきます。 表を作る際は<table></table>を用いるんですが、これ実は僕職場で使ったことがあります。本業の質屋では商品をオークションに出品して売買することもあるのでその際見栄えをよくしようと考えて<table>を使いました。 ではやっていきましょう。 <table> <caption>本日の</caption></table></table>…

箇条書きのときは<ul>と<li>タグを使う!

タイトル通り今回は箇条書きで表示する際に用いるタグの勉強です。 まず箇条書きにしたい部分を<ul></ul>で囲みます。 次に・を表示したいところを<li></li>で囲みます。 実際にやってみました。 前回書いたコードの下に <h3>関連リンク</h3><ul> <li>ダイヤモンドの見方</li> <li>貴金属の値段</li> <li>ブランド</li></ul>…

HTML 作りながら学んでみた

こんばんは。 今回から本の内容通りにコードを書いていこうかと思います。 ただし、サンプルとして作っていくホームページは本の内容とは違う内容に書き換えています。 それではさっそくやっていきましょうー SAMPLE1 <htmle lang="ja"><head><meta charset="utf-8"><title>最近増えている買取店で働いてわかっ</title></meta></head></htmle>…

メモ帳でもいいけどほかのテキストエディタのほうがもっとよかった

こんばんは。 メモ帳を使ってコードを書いていましたが、notepad++というテキストエディタを見つけたので今後はこれを使って書いて行こうと思います。 とはいってもまだまったく書けないんですけどね。 窓の杜ライブラリwww.forest.impress.co.jp それから…

はじめてのHTMLその2

前回の記事でかいたものがHTMLの基本かと思いきや、もっと必要な記述があるようです。 DOCTYPE宣言 まず最初にと記述する必要があるようです。 これはHTMLのバージョンを示しているようで、バージョンがHTML5の場合はと記述します。 HTML5以前のものはでいい…

HTMLの基本

ブログ周ってるとだいたいトップに画像を挿入してますね。 なので僕も入れてみようー おしゃれ感あがりましたかね? まあいいか HTMLとは HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)、略記・略称HTML(エイチティーエムエル)…