僕の世界観を変えてみる

文系男子が趣味でプログラミングを勉強していくブログです。他にも日常で起きたどうでもいいことや愚痴を書いていきたいです。座右の銘は和を以て貴しとなすです。仲良くやろうよ。

web

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にしたら調子悪くなって放置してました。

web

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

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

web

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

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

web

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

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

web

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

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

web

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

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

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

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

web

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

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

web

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

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

web

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

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

web

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

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

web

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

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

web

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

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

web

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

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

web

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

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

web

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

HTML 作りながら学んでみた

web

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

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

web

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

はじめてのHTMLその2

web

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

HTMLの基本

web

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