web
GAS（Google apps script）でWEBページを作ってみました！ 言うて2か月前の話なんですけどね、今更ちょっと紹介します。 ちなみに作成したのはこんなページ。 ▼積読の部屋 僕は本をジャケ買いしちゃうことがあるのでそのせいで積読された本がたくさんありま…
僕は日頃SmartNewsをよくみるんですが、このアプリにははてなブログが読めるはてなカテゴリがあります。 パッとみて惹かれるタイトルのものがあると読むんですがやはりSmartNewsに載るような記事は読みやすいしデザインも整ってたりしますね。 影響を受けて…
何日か前にトグルメニュー作って、メニューのテキストがセンターになってないから直そうと思ったけど今日まで忘れてた— htmllifehack (@htmllifehack) November 2, 2016 少し前にスマホ用にトグルメニューになるコードをDreamark様のブログからコピペして適…
いろいろサイトを見てみると上に戻るボタンがついているのを発見したので僕も実装したいなあと思い実装しました。 今回参考にさせていただいたブログ・サイトはこちら www.webopixel.net serinaishii.hatenablog.comまるまる同じものにしてもつまらないので…
ブログにプログラミングのコードを表示し、コードの種類ごとに色をわけて表示する方法をシンタックスハイライトっていうらしいです。 テキストエディタで書いたようにブログに表示できるのがすごくかっこよくて憧れでしたね。 まずなんて調べたらいいのかわ…
まず最初にdreamark様スター付けてくださってありがとうございます。 はい、というわけで今回はテーマを変更したことによって今まで使っていた池田仮名様提供のあわせて読みたいGの色が変になっていたのでCSSを使って変更したお話です。以前もCSSいじってた…
Webサイト作っていてつまづいたグローバルメニューですが、もう一度作ってみようと思いまして、はてブロでやってみました。 グローバルメニューとはタイトル下やサイトの左右にカテゴリーを表示して読みたい記事に辿りやすくするためのメニューバーです。グ…
// こんばんは。 タイトルにあるように、いやいや本当は仕事でめんどうが起こり、ほかにも要因はありましてサボってました。 それにしても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（エイチティーエムエル）…
