2015-01-01から1年間の記事一覧
CodePenとはHTMLやCSS、JavaScriptもプレビュー表示できるサイトです。ブログ改造系だったりweb系だったりとブログを回ってたらたまたま見つけたところで、コードとその結果こうなるよというのを紹介するときは便利です。 今回はこのCodePenについて書いてい…
Webサイト作っていてつまづいたグローバルメニューですが、もう一度作ってみようと思いまして、はてブロでやってみました。 グローバルメニューとはタイトル下やサイトの左右にカテゴリーを表示して読みたい記事に辿りやすくするためのメニューバーです。グ…
話がすごく上手な人っていません？そして自分って話すごく下手だなって思うことありません？ ちょっとこれの最初の部分を見てください。 matome.naver.jp 正確に物事を伝えたいと思って、情報を一つ残らず話し、説明しようとしてしまう 完全に僕です。 僕も…
タイトル通りPS4のスクリーンショットが勝手に増えているんです。あれ？こんなの撮ったかな？っというよりスクショの撮り方すら知らないのに。 ということで調べてみました。 スクリーンショットの撮り方 スクリーンショットの設定 // スクリーンショットの…
こんばんは。 最近インターネット上でHTMLとCSSを勉強できる場所を見つけたので少しずつやっています。初級編みたいなのはもう終わったので応用編をやっているんですが、ここからはカラムだったりメニューバーだったり出てくるのでこの辺をしっかり勉強して…
// こんばんは。 タイトルにあるように、いやいや本当は仕事でめんどうが起こり、ほかにも要因はありましてサボってました。 それにしても7から10にアップグレードすると不調になるらしいって聞いて、あー失敗したなって後悔しました。 8.1から10なら特に問…
はい！タイトル通り今回はリスト記号をアイコンにしてみたので書いていきたいと思います。なんでそんなことしたのかというと、本に載っていたというのもあるんですけど、いろいろWebサイトを見ていたらちょっとしたアイコンがついていたりするんですよ。その…
前回はグローバルナビを作るためにsample.htmlのコピーを3つ作りそれぞれkaitori.html、point.html、souba.htmlと名前を付けリンクを付けました。 で、グローバルナビっていうのが ・トップ ・買取店の利益の出し方 ・騙されないようにするポイント ・相場と…
今回はテキストにリンクを設定していきます。実は僕リンクの作り方知っています。デジカメなどの家電をオークションに出品する際、スペックや説明書がPDFだった場合メーカーのサイトに飛んでいけるようリンクを貼っていたんです。 なんですが、cssを使ったリ…
ということで今回はページのレイアウトを調整していこうかと思います。 今のところ僕のホームページはすべてが左寄せになっているのでこれをすべてセンター寄せにしていくところから始めます。 ではやっていきましょう。 ■<div> まずは<header>～</footer>までを<div></div>で囲みます。 急にd…
やっと5章まできました。109ページです。この章ではレイアウトを変更することがメインになってるようです。ただここにきてね、次にやるべきことがサイト名とキャッチコピーを挿入するってあるんですけど、まさかの5章にきてタイトル入れるっていう。 もう最…
今回はホームページのトップ画面に画像を表示させていきたいと思います。 文字だけでなく画像も織り交ぜたほうが見やすいですもんね。とはいえ僕のホームページは買取系というかブランド品とかなんであまりいい画像はないんですが、うーん。 画像選びに時間…
今回はまず箇条書きの●を■に変えたりなんなりしていきます。 楽そうですね。 早速やっていきたいと思います。 ■list-style-type htmlでは箇条書きで表示するときは<ul> </ul>で囲み、その中に<li></li>で文章を入力してきました。こんな感じに <ul> <li>ダイヤモンドの見方</li> <li>貴金属の値段</li></ul>…
今まで製作してきたホームページは文字がキュっとなっていたので窮屈な印象でした。 そこで今回はまずpaddingを使って余白を調整していきたいと思います。 ■padding まずはタイトルの余白を調整していきます。 cssでpagetitle部分にに padding: 5px 15px; と…
”枠”で画像検索したところワークショップの画像がでてきたり、”下線”で画像検索したら無線の画像がでてきたりとなかなかいい画像が見つからずこれになりました。 前回の記事ではclassについて書いたので学校とかクラスルームの画像を最初に張りたくて検索し…
今回はclass属性を使って個別にcssを指定してきます。 どういうことかというと、h2の見出しが2つあるとき、h2{font-size:15px;}と書き込むと2つともフォントが15pxに変更されてしまいます。 1つは15pxでもう1つは20pxにしたい場合、classを使って別々にサイ…
さて今回からやっとCSSに入っていきます。 CSSは前回まで作ってきたHTMLに直接書く方法と、それとは別に.cssという名前のファイルを作りそちらに記述していく2種類あるようです。 ということは僕がオークションでやっていたのは直接書く方法だったのかな？ …
本日3回目の更新です。 どんどん行きましょう。 まずはHTMLのアウトラインを理解しよう、です。 アウトラインとは階層やツリー構造のことのようです。 Excelでもアウトラインってありましたよね。 で、セクションというのが区切りという意味のようです。 つ…
今回は表を作っていきます。 表を作る際は<table></table>を用いるんですが、これ実は僕職場で使ったことがあります。本業の質屋では商品をオークションに出品して売買することもあるのでその際見栄えをよくしようと考えて<table>を使いました。 ではやっていきましょう。 <table> <caption>本日の</caption></table></table>…
タイトル通り今回は箇条書きで表示する際に用いるタグの勉強です。 まず箇条書きにしたい部分を<ul></ul>で囲みます。 次に・を表示したいところを<li></li>で囲みます。 実際にやってみました。 前回書いたコードの下に <h3>関連リンク</h3><ul> <li>ダイヤモンドの見方</li> <li>貴金属の値段</li> <li>ブランド</li></ul>…
こんばんは。 今回から本の内容通りにコードを書いていこうかと思います。 ただし、サンプルとして作っていくホームページは本の内容とは違う内容に書き換えています。 それではさっそくやっていきましょうー SAMPLE１ <htmle lang="ja"><head><meta charset="utf-8"><title>最近増えている買取店で働いてわかっ</title></meta></head></htmle>…
こんばんは。 メモ帳を使ってコードを書いていましたが、notepad＋＋というテキストエディタを見つけたので今後はこれを使って書いて行こうと思います。 とはいってもまだまったく書けないんですけどね。 窓の杜ライブラリwww.forest.impress.co.jp それから…
前回の記事でかいたものがHTMLの基本かと思いきや、もっと必要な記述があるようです。 DOCTYPE宣言 まず最初にと記述する必要があるようです。 これはHTMLのバージョンを示しているようで、バージョンがHTML5の場合はと記述します。 HTML5以前のものはでいい…
ブログ周ってるとだいたいトップに画像を挿入してますね。 なので僕も入れてみようー おしゃれ感あがりましたかね？ まあいいか HTMLとは HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）、略記・略称HTML（エイチティーエムエル）…
初めまして 当ブログ僕の世界観を変えてみるの僕、ecoです。僕の見ている世界ってのは一つの視点からしか見えてないので、 新しい視点から見て僕の世界観を変えてみようという理由でタイトルをつけました。当初はHTML/CSSでWebサイトを作ってみるというタイ…
こんにちは ”自分の持っている知識は自分が思っている以上に他の人の役に立つ知識だったりする”ってなにかの本で読んだことがあります。 僕の職場はパソコンに疎い人ばかりで エクセルで数式を手入力しただけですごいね！と驚かれました。 数式って言っても=…
