お取引先の方や、以前お問い合わせ頂いた方などに、不定期ですがHTMLメール形式でのメールマガジンをお送りさせて頂いております。 あまり頻繁でも、、と思いまして、1年に2〜3通ですが、季節の変わり目などにご挨拶代わりにお送りしております。 そこで、普段どのようにHTMLメールを作ってお送りしているか、まとめてみました。 HTMLメールの作成方法 HTMLメールの作り方、制作会社さんによって色々とノウハウがあるかと思いますので、下記が参考になるかわかりませんが。。 普段気をつけていることを、箇条書きで挙げてみました。 とにかく崩れないHTMLメールを作るには、CSSでレイアウトをするのではなく、tableでガッチガチに作ってしまうのが一番問題が少ないと思います。 こうじゃないとダメ！というわけではございませんので、あしからず。。 横幅は700px程度。メーラーやWebメールだと2カラムで表示さ

CSSのfloat関係って、基本的に覚えておくべき事ですが、 動作がいまいちわかり辛かったり、バグが多かったりと、 float一つとっても覚えておくべきことって多いと思います。 なのでfloat関連の問題で覚えておくべき解決方法や 回避方法のことなどについてをまとめてみた。 １）floatしたボックスの下にコンテンツがこないようにする 写真の横に文字をもってきて、その文字が多ければ 写真の下にも文字をもってくる・・・というような場合は、 単純にimgにfloatをつけるだけでできるのですが、 コンテンツが下に来ないようにしたい場合はどうしたらいいか。 ■例１ー１（imgにのみfloat:left、下に回り込む） ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキス

組み合わせ利用でいいとこ取り！ Adobe XD＋Photoshop＋Illustratorの長所を活かしたデザイン手法を学ぼうAkiko Kurono

色んな方法があると思いますがスタイルシートでmin-widthを使い簡単に出来ます。通常のホームページレイアウトは大きく分けると、全体を囲むボックス、ヘッダー用ボックス、メイン用ボックス、フッター用ボックスになっています。 このレイアウトを全体を囲むボックスを無くし、ヘッダー用ボックス、メイン用ボックス、フッター用ボックスに変えさらにヘッダーを幅いっぱいにする為のボックス（仮名称headerbg）とフッターを幅いっぱいにする為のボックス（仮名称footerbg）を加えます。 ここではメインの幅を940pxで作成した例で説明していきます。ヘッダーボックス（仮名称header）の幅を940px、メインボックス（仮名称container）の幅を940px、フッターボックス（仮名称footer）の幅を940pxにします。そこにヘッダーフッターをブラウザ幅いっぱいにするボックスが入っています。下記の

WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー

2020年2月25日 CSS どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな？と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景を角丸に レインボーカラーに 拡大・縮小 角度を変える くるっと回転 1. ちょっと予備知識 今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition プロパティです。transitionプロパティは、時間の変化を操作するもので、

2017年7月25日 Webサイト制作, 便利ツール 今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います！ ↑私が10年以上利用している会計ソフト！ 1. コーディング手順を簡略化する これは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。 CSSのレイアウトをノートに書き出す レイアウト部分（ヘッダー・メイン・サイド・フッター）のHTMLマークアップ CSSでレイアウト部分のスタイリング 表示確認 うまく表示できない箇所の修正 ヘッダー内のHTMLマークアップ CSSでヘッダー内の

前回のエントリーで、無事にSassが動作する環境が整ったかと思います。 今回は、いよいよ通常のCSSでは出来なかったSassの記述（Sass記法）に関してです！ まずは基本って感じですが、これだけでも十分Sassを利用することでコーディングの効率が上がる！って思ってもらえれば幸いです＞＜ 記法の前に Sass記法の前に、SassはCSSの「完全な上位互換」と言えるので、CSSのルールはすべてそのまま利用することが出来ます。 その為、cssファイルをそのまま拡張子だけ .scssに変更して変換（コンパイル）し直すみたいな事も可能です。（圧縮できる程度のメリットしか有りませんが） 軽く余談ですが、このCSSとの完全な互換性が従来のSassには無かったのですが、現行のバージョンではそれが出来るので、余計な事を覚える必要がなく、Sassの機能を今までのCSSの知識にプラスアルファとして使えるんです

2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか？すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない！」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac＋Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト！ Sassとは 日本語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換（コンパイル）してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する