web・css

あのウェブサービスにサインインした日、アカウントを作成した日を覚えてますか?

TwitterにAmazonにGoogle、普段から日常的に使ってるウェブサービスがいくつもあります。でもそれって、いつから使ってますか?そのアカウントの作成日、いつですか?あのサービス使ってもう何年だ?

Twitterで他人のツイートを自分のプロフィールに固定する方法

Twitterでいろいろいじってたら、自分ではない他人のツイートを自分のプロフィールのトップに固定する方法を見つけました。実用性はあまりないと思いますが、紹介します。

スマホ画面のアスペクト比は縦長になってきているのか?データをざっくり見てみる

スマホファーストと呼ばれて久しいですが、そのスマホの画面も昔と今では少しずつ変わっています。昔は画面のアスペクト比(縦横比)がだいたい16:9でしたが、最近…とはいってももう2年くらいですが、それよりも縦長な物が増えてきました。 最近のスマホは16…

クーポン記事用にチケットっぽい見た目に整えてみた

チケットっぽい見た目のデザインパーツをhtmlとcss(と一部画像)で作ってみました。

検索バーに好きなサイトの検索を追加できるFirefoxアドオン「Add custom search engine」

Add custom search engineは検索バーに好きなサイトの検索エンジンを追加して、直接そのサイトで検索するためのFirefoxアドオンです。

ブログのテーマを変更(まだ作成中)

少し前から、このブログのテーマを変更してます。とは言っても、まだ作成中なので細かいところが前のままだったりしますけど。

CSS Gridを少しだけ勉強して少しだけ使えるようになった

はてなブログの新しいテーマを(現実逃避的に)作ってて、いい機会だからとCSS Gridについて少し調べてみました。人に解説できるほどではないのでここでまとめたりはしないですけど。

ChromeのデベロッパーツールのエミュレートデバイスにPixel 3を追加してみた

大した意味はないのですが、ChromenoデベロッパーツールのエミュレートデバイスにPixel 3を追加してみました。 別にPixel 2とかの既存のもので良いんですが、自分のメイン端末がPixel 3だったのでそれに合わせてみました。

そしてプレゼント企画で選ばれたHTMLやcssの本は、これだった

ブログの表示フォントにユニバーサルデザインフォントを使う

先日、Twitterなんかでユニバーサルデザインのフォントが読みやすくてディスレクシアの人にも読みやすいというのを見ました。そんなに読みやすいのなら、ブログの文字もそれにすればいいんじゃない?というのが今回の記事です。

cssのfont-family用に日本語フォントの英語名を調べる方法…っていうかまだ併記必要なの?

cssで表示フォントを指定するときはfont-familyを使います。そのフォント指定の際に、日本語フォントの場合は日本語名と英語名を併記します。その英語名の調べ方をメモしておきます。 …というか、そもそも英語名調べなくても今のブラウザなら大抵は日本語名…

パンくずリストの部分を常に1行表示ではみ出したらスクロールするようにしてみた

はてなブログ デザインテーマコンテスト、結局間に合いませんでした。引っ越し関連のいろいろがあって、ここ何日も時間が取れずにあっという間に期限になってしまいました。まぁ、あせらずゆっくり作っていこうと思います。

マルチレイヤーで多色表現できる天気用のアイコンフォント「Forecast Font」

半年くらい前に「1つのアイコンで2色設定できるアイコンフォントを使ってみる」という記事を書いたのですが、同じように多色を使ったアイコンフォントを見つけました。 天気用のアイコンフォントで、その名も「Forecast Font」です。

TypekitがAdobe Fontsになって自由度が増したしWebフォントもできるので試してみる

つい先日のことですが、AdobeのCreative Cloudが更新され、いろいろとパワーアップしました。Photoshopなんかでもいろいろ新機能があったりより賢くなって話題になっています。

はてなブックマークの記事タイトル取得が最近おかしい?

はてなブックマークでの、ブックマークした記事のタイトル取得がなんか最近おかしいです…よね?とくに対策とかなにかわかったとかじゃないんですけど、一応記録として。

画像の上に乗る感じの吹き出しにしてみる。記事のまとめコメントにいい感じ?

吹き出し表示を、上の画像のようなレイアウトで作ってみました。会話形式ではなく、記事の最後に記事主からの一言、みたいな感じで入れるといいのかなー?というものです。

ながら見TwitterとしてTweetdeckをウィンドウ表示してみる

Twitterが外部アプリに対してのUserStream APIの提供を終了します。多くのユーザーには関係ないことかもしれませんが、開発者やヘビーユーザーの間では大きな問題となっています。

ライブドアニュースの「ざっくり言うと」みたいなのを作ってみる

ライブドアニュースの記事は、アクセスするとまず「ざっくり言うと」と記事を3行でまとめたものが表示されます。これがけっこう好きだったりするので、似たようなものを作ってみました。

フォントサイズの単位にvwを使うという選択肢

自分のサイトの文字の大きさ、いろいろ悩みますよね。どの大きさが一番読みやすいのか、どうしたらみんなに読んでもらえるのか。でも個人サイトであるのなら、最終的には自己満足でいいんです。私はそう思います。

Googleアドセンスが15周年とのことでおめでたいですな。

昨日、7月2日にGoogleアドセンスを開いたら、風船が舞いました。Twitterでも誕生日に開くと風船が舞いますが、あんな感じです。

個人間のつながりでチャットワークを使うのはもう終わりなのかもしれない

2018年7月18日からチャットワークのフリープランの内容が変更になります。この変更の内容が個人的にクリティカルで、今後新しく何かを始めるときにチャットワークは選択肢に入らなくなるだろうな、と。そんな変更内容でした。

1つのアイコンで2色設定できるアイコンフォントを使ってみる

アイコンフォントって便利ですけど、基本的にフォントなので1色しか使えないですよね。でもフォントファイルを工夫すれば2色使えるんじゃないかと思って試してみました。

ウェブサイトの横幅はどれくらいがいいのか?訪問者のブラウザサイズから考える

ウェブサイトの横幅をどの程度の広さにしたらいいのか、というのはいつもいつも悩むことです。時代によってディスプレイのサイズも変わってきますしね。 実際に自分のウェブサイトを見ている人がどんなブラウザを使っているのか、その表示領域の広さはいくつ…

Google Fontsの中から最近お気に入りのフォントをいくつか

Google Fontsは便利ですね。めっちゃ種類あるのですが、その中から最近お気に入りのものをいくつかメモのように残しておきます。

ブログとメディアのウェブデザイン上の違いで気付いたこと

サイトリニューアル作業中です。なのでほかのいろいろなサイトも参考にしています。そこで気付いた「ブログ」と「メディア」でのデザインの違いが3つほどありました。 メモ的に残しておきます。

最もクリックされやすいボタンの色ってなんだろう?

メインサイトの方で、アプリのダウンロードボタンのクリック率を上げたくて、どんな色のボタンがいいのだろう?差はあるのかな?と調べようと思っていました。

最後の子要素のmargin-bottomを0にすればまぁいいよね、というメモ

cssをいじってて、「これどうしようかなー」と思っていたことがありました。tableやdivの下paddingと中の要素のmargin-bottomでスペースが空きすぎるの。 とりあえずの結論が出たのでメモしておきます。

好きなエディターでWebページのソースを表示するFirefox/Chromeアドオン「withExEditor」

先日Firefoxをバージョン57、Firefox Quantumにアップデートしました。その影響で使えなくなった「Dafizilla ViewSourceWith」に代わるアドオンとして「withExEditor」を導入しました。これは見ているウェブページのソースを自分の好きなエディターで表示で…

Firefox 57 (Firefox Quantum)で使えなくなったアドオンの代替を探す旅へ

2017年11月14日に、Firefoxの最新版Firefox 57がリリースされました。これは別名Firefox Quantumと呼ばれるほどの大型アップデートです。めっちゃ速くなるらしいですけど、その影響で対応していないアドオン(拡張機能)が使えなくなってしまいます。

【保護されていません】Google Chrome バージョン62が出てた

前々からhttps関連で話題になっていたChrome 62が正式リリースされました。さっそくChromeを起動してバージョンアップさせ、表示を見てみました。