arrow-left arrow-right envelope facebook feedly folder home html-tag person tag twitter wordpress rss user get-pocket envira google-plus

[CSS]画像を暗くしてみる

このブログでもちょくちょくPhotoshopを使わずともCSSで色を変えられる…ということを書いていますが、実にいろいろなやり方があります。今回は画像を暗くするというテーマです。可視性を上げるために、暗くした背景画像に白い文字を重ねるという手法をよく見かけますが、今回はその方法について書きたいと思います。

続きを読む

[SVG]初めてのベクター画像

Webサイトで使う画像はだいたいJPEG・GIF・PNGだと思います…私もそうでした。しかし、「SVGはいいぞ!」ということをつい最近(と言っても去年ブログを書き始めた頃)知って、その綺麗さに驚きました。しかも、どうやらアニメーションもできるらしいです…今回はSVGを作ってみたので、それについて書いてみます。

続きを読む

[jQuery]fullPage.jsでパララックスサイトを作ろう

2015年あたりから見た人を引き込みやすいパララックスサイトはトレンドとなり、現在でも新しい見せ方のパララックスサイトが次々と登場しています。
今回はGoogleなども使用している簡単に全画面スクロールのパララックスサイトが作れるFullPage.jsプラグインを私のおさらいも兼ねて紹介します。

続きを読む

WindowsとMac間でリモートデスクトップを使う- Chromeリモ・・・

こんな私でも一応Webサイト制作を細々と行っていますので、外でPCを使う事もあったりします。油断せずに準備を整えておけば全く問題ないのですが、不測の事態や準備不足から自宅の端末にあるデータやファイルが急に必要になったり、空き時間に外で作業する事もあるのでリモートで操作したいと考え導入をしました。

続きを読む

[jQuery]簡単!スライドショーを作ろう!!

Webの世界は分進秒歩くらいの勢いで変わっていきますが、そのなかでも未だによく使われるみんな大好き(?)スライドショーについて今回は書きたいと思います。幾つかの画像を用意して時間遷移で見せていくのですが、スライドショー自体に長い歴史があるようで様々なやり方があります。今回は比較的簡単なものを紹介します。

続きを読む

[WordPress]自動挿入される<p>タグを取り除こう

記事を書いていくうちに気になったので、やっとこのブログに手を入れ始めました。画像を載せて続けて文章を書いていくと行間がおかしくなったり、かと思えば詰まったりと見栄えがちぐはぐな感じだったので、原因は何だろうとブラウザの開発ツールを開いたら、なんと入れていない<p>が入っているではないですか…

続きを読む

[Wordpress]お問い合わせフォームを設置しよう

ずいぶん時間が空いてしまいましたが、Wordpressにお問い合わせフォームを設置する手順を説明します。お問い合わせフォームはWordpressのメニューでは定番のコンテンツです。プロフィールページを作成したことのある方はご存知かもしれませんが、固定ページを使います。プラグインを使って簡単に設置しましょう。

続きを読む

Emmetで爆速コーディングを始めよう!- CSS編

前回はEmmetのHTML編として省略記法の基本をご説明しました。今回はCSS編です。Emmetの便利さはCSSの方が感じやすいと思います。初めは戸惑うかもしれませんが、使い続けていくうちにEmmetなしでCSSを書くのがバカバカしくなるほどの便利さと速さを実感できると思います。ここまでがEmmetの基本となります。

続きを読む

Emmetで爆速コーディングを始めよう!- HTML編

前回はEmmetの導入部分までをやりました。テキストエディタは決まりましたでしょうか?今回からが本番、速くコードを書くための省略記法を説明していきます。内容盛りだくさんですが、基本を押さえながら実際に書いていくのが覚える近道です。さっと目を通してゴリゴリとコードを書いていきましょう。

続きを読む

Emmetで爆速コーディングを始めよう!- 導入編

ものぐさな私が大好きなEmmetについて書く日がやってきました。HTMLコーディングを改めて学習したいと思うようになったきっかけでしたので、感慨もひとしおです。 と言いながらサクッと行きます。基本的なことを押さえたらどんどんコーディングして、コーディングはちょっと苦手…なんて人も「まぁ苦手ではなくなったかな」と思えるような、そんなツールの一つです。

続きを読む

PAGE TOP