僕の世界観を変えてみる

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

CSS

MediaQueriesとdisplay:noneを使ってレスポンシブ用にメニューを変えてみたよ

僕は日頃SmartNewsをよくみるんですが、このアプリにははてなブログが読めるはてなカテゴリがあります。 パッとみて惹かれるタイトルのものがあると読むんですがやはりSmartNewsに載るような記事は読みやすいしデザインも整ってたりしますね。 影響を受けて…

トグルメニューがセンタリングされない問題をMedia Queriesで解決した

何日か前にトグルメニュー作って、メニューのテキストがセンターになってないから直そうと思ったけど今日まで忘れてた— htmllifehack (@htmllifehack) November 2, 2016 少し前にスマホ用にトグルメニューになるコードをDreamark様のブログからコピペして適…

上に戻るボタンをアイコンを使って表現してみた

いろいろサイトを見てみると上に戻るボタンがついているのを発見したので僕も実装したいなあと思い実装しました。 今回参考にさせていただいたブログ・サイトはこちら www.webopixel.net serinaishii.hatenablog.comまるまる同じものにしてもつまらないので…

はてなブログのシンタックスハイライトを色変えするよ

ブログにプログラミングのコードを表示し、コードの種類ごとに色をわけて表示する方法をシンタックスハイライトっていうらしいです。 テキストエディタで書いたようにブログに表示できるのがすごくかっこよくて憧れでしたね。 まずなんて調べたらいいのかわ…

あわせて読みたいGをCSSでいじってみた

まず最初にdreamark様スター付けてくださってありがとうございます。 はい、というわけで今回はテーマを変更したことによって今まで使っていた池田仮名様提供のあわせて読みたいGの色が変になっていたのでCSSを使って変更したお話です。以前もCSSいじってた…

はてブロで簡単なグローバルメニューを作ってみた

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種類あるようです。 ということは僕がオークションでやっていたのは直接書く方法だったのかな? …