僕の世界観を変えてみる

比較的簡単なHTMLで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いじってた…

テーマCONTENTSをカスタマイズしてみた。

ずっと自分で作ったグローバルメニューを使っていたので気分転換にテーマを変えました。 dreamark様提供のCONTENTSです、ありがとうございます。 数あるテーマの中でこちらを選んだ理由はグローバルメニューが最初からあるところと、蛍光マーカーを簡単に引…

CSSでメニューボタンをよりボタンらしくしてみた

久しぶりにブログを変化させてみた。 といってもメニューバーや見出しのCSSをいじっただけだが。 とりあえずどこを変えたのか書こうと思う。 ボタンに影を付ける まずは”これはボタンです”という存在感を出すために影を付けてみた。 See the Pen LNNrKp by m…

サイト上でHTMLやCSSをプレビュー表示させる、CODEPEN!

CodePenとはHTMLやCSS、JavaScriptもプレビュー表示できるサイトです。ブログ改造系だったりweb系だったりとブログを回ってたらたまたま見つけたところで、コードとその結果こうなるよというのを紹介するときは便利です。 今回はこのCodePenについて書いてい…

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

Webサイト作っていてつまづいたグローバルメニューですが、もう一度作ってみようと思いまして、はてブロでやってみました。 グローバルメニューとはタイトル下やサイトの左右にカテゴリーを表示して読みたい記事に辿りやすくするためのメニューバーです。グ…

簡単!CSSで見出しをそれっぽく変えてみよう。

こんばんは。 最近インターネット上でHTMLとCSSを勉強できる場所を見つけたので少しずつやっています。初級編みたいなのはもう終わったので応用編をやっているんですが、ここからはカラムだったりメニューバーだったり出てくるのでこの辺をしっかり勉強して…