「css」カテゴリーアーカイブ

蛍光ラインマーカーメーカー作りました。spanやclassをコピペできます!

「CSSで蛍光ペンでラインを引いたように見せる表現をするには?」で蛍光ペンみたいなCSSを試してみて面白いなと思ったので、簡単にCSSが作れる蛍光ラインマーカーメーカーを作りました。
画面で蛍光ペンの色と蛍光ペンの太さを選ぶだけで、それを表示するためのspanやCSSのclassの指定を表示するのであとはコピペするだけで使うことができます。それについて書きます!

続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

Webカラー一覧から、色を見ながら選べるSELECT部品を作ってみました!

昨日の「CSSで蛍光ペンでラインを引いたように見せる表現をするには?」を書くために色を選んだり太さをあれこれ試したり、その結果をspanやClassにしたりするのが結構面倒くさい作業でした。そのため、蛍光ラインマーカーメーカーのようなものを作ろうと思い立ったのですが、その前に色を選ぶ部品をどうやって作ろうか、というところでだいぶ時間がかかってしまいました。
今回はWebカラー一覧からSELECTで色名を選ぶことのできる部品を作る過程について書きたいと思います。

続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

CSSで蛍光ペンでラインを引いたように見せる表現をするには?

Webサイトをいくつか作っていくうちに「こんな表現ができたらいいな」と思って検索したりすることでCSSをおぼえてきました。先日もあるサイトで「ここは太字とか色を付けるではなく、蛍光ペンで線を引いたように見せたい」と思うことがあり、検索したらすぐにわかりやすいサイトがあったので蛍光ペンのような表現ができました。
それを応用していろいろな太さや色のCSSが簡単にできるようにするには?ということを考えてみました。

続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

HTMLとWordPressのショートコードで漢字に簡単にルビを振る

小学校の教科書はその時点で習っていない漢字にはルビ(ふりがな)が振ってありました。HTMLでもルビを振るタグがあることは知っていたのですが、今まで作ったコンテンツで「ふりがなを振らないと」という機会がありませんでした。しかし、今やっているお仕事で「難読漢字にルビを振る」という必要性が出てきたようなので、ルビに関してHTMLではどのようにするのかを調べました。
また、簡単にルビが振れるようにWordPressのショートコードも作ってみました。

続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ブラウザにお知らせを表示して自動的に消えるトーストを作る HTML編

Webサイトを見ているときに右下のあたりに ポッ と四角いエリアが浮き上がってきてメッセージが表示されて、クリックしたり数秒経つと消えているようなものを時々みかけます。
この四角いエリアのことをトーストというようです。ちょっと面白そうだったので自分でこのトーストを作れるようにするにはどうすればいいのかな?と試してみました。

続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

投稿時にURLをブログカード風に表示するショートコードを作りました

前回「記事中urlをSimplicityのブログカード風に表示するカスタマイズ」で、Simplicity以外のテーマでも記事中のURLをブログカード風に表示する方法について書きました。
残念ながらこのblogではblog自体が重すぎて、ちょっと過負荷になってしまったようなので、考え方をかえてショートコードでブログカードが表示出来るようにカスタマイズしてみました。それについて書きます。

続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

CSSフレームワークPureはシンプルでレスポンシブ対応が簡単にできる!

CSSフレームワークというとBootstrapが有名です。今までBootstrapしかCSSフレームワークを知らなかったのですがPureというCSSフレームワークをYahoo!が提供しているということを聞いて試してみました。
Pureは導入が簡単なことと、機能がシンプルなためにわりと色々なことを試すことができました。レスポンシブ対応も簡単にできるのでそれについて書きます。

続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

非デザイナーがフリー素材を使ってロールオーバーする画像リンクを作ってみた

誤解されることが多いのですが私はデザイナーではなくてプログラマーなんです。ということで、デザインは全然できません。けれどもサイトの作成をするにあたって画像を加工したりCSSで色々やってみたりはしています。今回「株式会社RYUS XOOPSサービス」のサイトをプチリニューアルするときもフリー素材を使ったり、CSSを使ってロールオーバーしてみたりと色々やってみたのでそれについて書きます(^^)/

続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ブラウザ毎にHTML5、CSS3などの対応を確認できる caniuse.com

「カラーピッカーを自分の作るサイトに付けるためにJSColorを使う」という記事を書いてFacebookにシェアしたときにHTML5だったらjsなしでとても簡単に実現できる、と教えてもらいました。HTML5は今時点ではまだどのブラウザでも使えるということでもなさそうなのですが単純にHTML5は全部使える・全部使えないということではなく、部分的な対応のようです。
部分的な対応の情報を確認したくて調べていたら良いサイトがありましたので、それについて書きます。

続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

同じフォントで表示ができるWEBフォントを使う方法を試す

ブラウザで表示するコンテンツのフォントはstyleシートなどで指定したfont-familyの中から「ユーザーのPCにあるどれかの」フォントで表示されることになっています。OSが同じだったらほぼ同じように表示されるはずですが、それでもそれぞれのPCのフォントインストール状態で多少表示が違う可能性があります。ウェブフォントという方法でフォントを指定するとどの環境でも同じように表示されるようなので、ちょっと試してみました。

続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

WordPressデータベースを一括でアップデートするWebプログラム作りました

サーバーにある複数のWordPressサイトをパソコン上のXAMPPで動かすための作業をしていました。データベースはサイトのURLに関する部分を修正しないとちゃんと動きません。UPDATE文自体は数行なのでテキストエディタで置換を繰り返せば済みますが、それを複数サイト分やっていると面倒になってきました。今後も同じことをする場合がきっとあると思うのでちょっとプログラムにしてみました。

続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

パソコンに入っているフォントをfont-familyで指定する方法

Image [9]

Webサイトを作るときにどのフォントで表示するか、というのは大体定番が決まっていて、あまり新しいフォントを指定することはありません。というのもWebを見てもらう場合に使われるフォントはユーザーのPCに入っているフォントが利用されるので一般的なフォントを使うことがほとんどだからです。
しかし、ちょっと変わったフォントでローカルのWebを作って表示して、blogの画像にしてみようかしら?と思ってよく使うフォントで無いものをダウンロードしてきたのですが。はて、どうやってフォント指定するのかな?と思って調べたのでそれについて書きます。
続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

みんなの経済新聞の電光掲示板、をちょっと作ってみた

Image [4]

新幹線のドアの上にあるちょっとしたニュースのタイトルが出る電光掲示板が好きです。あれと同じようなモノをWebで作ってみたいな-、みんなの経済新聞のRSSから表示すれば面白いなーと思って、ちょっと作ってみたのでそれについて書きます。
続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

Sassってどこがどんな風に便利なのか、勉強し始めました

Image [4]

「Windows7にSass環境を構築するのに色々あった件」でSassの環境を整えてみました。まだSassのコードを書いたことが無かったので「Sassはじめの一歩!」的にまっしろな状態からSassを勉強し始めました 続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

Windows7にSass環境を構築するのに色々あった件

Image

先週末、XOOPS Cube勉強会に出席しかなり盛り上がりました(^^)/。詳細はきっと次のOSCあたりで明らかになると思いますが、なかなか楽しいことになりそうです。そういう気持ちが盛り上がったときに帰りに本屋さんに寄ったときに「Web制作者のためのSassの教科書」を買いました。そういうときの勢いってありますよね。
ということで早速環境構築を、とやり始めてみたらやはりすんなりとはいかなかったので、それについて書きます。
続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

秀丸マクロを使ってblogを書く時間を効率化する

Image

私はRYUSの営業日は毎日blogを書いています。毎日書くのはそれなりに大変なのでいろいろ工夫をしていますが、今日はその中で秀丸マクロを使ってblogを書く時間を効率化していることについて書きます。

続きを読む

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。