秀丸エディタを HTML や PHP や CSS が気持ち良く書ける環境にする
秀丸を最強のエディタとして活用できるようになるまでの道のりをメモしておきます。後で誰かの参考になれば幸いです。 秀丸のインストール まず秀丸は以下からダウンロードします。 秀まるおのホームページ(サイトー企画)?秀丸エディタ 秀丸のインストールの説明はこちらが分かりやすい。 http://hide.maruo.co.jp/software/install.html#HIDEMARU 基本的な操作や見栄え 秀丸の(その他)ファイルタイプ別の設定には癖があって、事前に設定のリストで用意しておいた設定をある拡張子のファイルに適用することで、今後その拡張子のファイルを開いた際は、その設定が適用されている状態になります。 設定のリストにある共通で設定すれば、他のすべての設定にも適用されるわけではなく、拡張子毎に設定をしていく必要がある(例えばPHPにはPHPファイルという設定を用意して適用する。CS
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
ユーザ・インターフェースのためのイージングカーブをつくる | POSTD
フラットデザインの導入以来、アニメーションの質が、今までにないほど、優れたインターフェース作成のために必要不可欠なものとなっています。モーションデザインを通して、製品の総体的なブランドエクスペリエンスを左右するようになり、製品を、市場の他のものと差別化する要素となりました。アニメーションは複雑なインタラクションを簡素化し、優れたデザインを記憶に残るユーザエクスペリエンスにしました。では、質の高いアニメーションはどのように作られるのでしょうか？ イージングカーブは多くの要となるコンポーネントの1つで、適切なアニメーションをとり、素晴らしいものに作り上げます。 問題なのは、イージングカーブがどのように機能するかについての理解が、少々難しいということです。 前回の記事 After Effects to CSS で触れたタイミング関数への興味の派生としてこの記事を書きましたが、この記事を読むことで
アクセントに使えるCSSのborderと擬似要素を使った立体的な見出しデザイン / SQUEEZE - Web Design Studio -
HTMLはシンプルにCSSの「border」や「box-shadow」、擬似要素の「:before」や「:after」を使って実装する立体的な見出しデザインをご紹介します。 以下2つの記事にインスパイアされ、見出しデザインをいくつか作成しました。両記事を参考にしつつも、私なりの方法を説明していきたいと思います。 CSSの擬似要素を使った見出しデザイン｜Webpark[CSS]h1一つだけでこんなにかわいいレトロ風リボンが実装できるスタイルシート | コリス まずはサンプルをご覧ください。 サンプルページ » 「border」で三角形や台形を作る最初に、今回の大きなポイントでもある「border」で三角形や台形を作る方法をご紹介します。「border」は要素の周囲四辺それぞれを囲むものですが、隣接する二辺の「border」が設定された時に、境界線の内側と外側の頂点を結ぶ対角線で要素が分けられ
印刷対応サイト｜Webクリエイターネット
Category CSS Webサイトをブラウザ経由で印刷できるようにする場合、CSSで印刷用のスタイルを作成し、別途読み込ませることで対応する場合が多いと思います。 ですが、制作案件で完璧に対応するのは時間(工数)やコストもかかってしまうため、難しいのが現状かもしれません(私の場合、そうなんですよね...)。 そこで、今回の記事は、WEBページを制作する際、「できる限り印刷対応も意識した作りにしたい」と考えた時に、覚えておいた方がよい点を書き残しておこうと思います。 Keyword：印刷対応,@media print 対応するブラウザ・バージョンを選定する 全てのブラウザに対応できるのが望ましいのですが、それぞれのブラウザに実装されている印刷機能に関しても把握しておく必要があります。 ●Internet Explorer 印刷対応状況○ バージョンごとに表示が異なる場合が多い [特徴]
TCPDFを使ったpdf出力 : akibaengneerのまとめメモ
2011年10月06日15:48 カテゴリphpTCPDF TCPDFを使ったpdf出力 ＰＨＰでPDF出力する方法には色々方法があるみたいですが、 標準で日本語に対応しておりフリーのフォントも内蔵しているためにライセンスを 気にせずにすみライブラリのインストールがダウンロードしたファイルを 解凍するだけという手軽さからTCPDFが良く使われているようです。 TCPDFのダウンロードはこちら 今回はTCPDFで一枚ものの報告書に差込印刷をするサンプルです。 動作サンプルはこちら 汎用的に作るためにHTMLでテンプレートファイルを作成し、その中の文字を置換して PDFデータとして与える方法をとります。 入力のフォームはこんな感じ <?php @session_start(); $error = ''; $company_name = @$_POST['company_name']; $
Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries（メディアクエリ）。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました！ 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries（メディアクエリ）を使って、iPad、iPhone など、いろんなデバイスに対応（対応というか、一応見れる程度）にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次
webOpixel
2024年7月 webトピックス 2024年7月、個人的に気になった記事のまとめです。 投稿日2024年08月02日 更新日2024年08月02日
CSS上級者を悩ませるフォント指定を探究するぜ2011 autumn
2011年9月2日 CSS初心者から上級者まで頭を悩ませるフォント指定のベストプラクティスを模索してみた。 2014年4月28日追記： フォント指定に関する新しい記事を書きました。 CSSのfont-family指定に関する考察 2014年版 先日、CSSによるフォント指定について色々な人と話をする機会があり、せっかくなので、これまでの自分のやり方を、もう一度ゼロから考えなおしてみようと思い立った。 font-familyの指定を考察する CSSによるfont-familyの指定についての世間一般の見解を調べていると、非常に参考になる記事を発見！ font-familyはメイリオが先かヒラギノが先かという命題を本気で調べた 上記のウェビンブログ様の記事中に添付されている資料：日本のコーダーのfont-family指定が、非常に興味深い。これを見ると、ある程度経験のあるコーダーさんたちの中で
TRANS [hatena] - 印刷用CSSをまとめてみた。
以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度
![TRANS [hatena] - 印刷用CSSをまとめてみた。](https://cdn-ak-scissors.b.st-hatena.com/image/square/860579fb9ea6fc896c86331cc2f3af60ddeb6ef1/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523499%2F1448268251)
スタイルシート［CSS］/CSSの基本/疑似クラスの指定 - TAG index
:link と :visited は、a要素に対してのみ指定することができます。 IE 7以下では、:focus と :lang() の指定に対応していません。 IE 6以下では、a要素以外に指定された :hover と :active に対応していません。また、:first-child の指定にも対応していません。 要素名とコロン（ : ）に続けて、疑似クラス名を指定します。 例えば、a要素に :link を指定する場合は、次のような記述になります。 a:link { color: red; } 要素のタイプを限定しない場合は、次のように要素名を省略して指定することもできます。 :lang(en) { color: red; } 疑似クラスをa要素に対して指定した例です。 この例では、:link 、:visited 、:hover 、:active 、この4種類の疑似クラスを使用していま
スタイルシート［CSS］/CSSプロパティ一覧/outline プロパティ - TAG index
それぞれの値は、半角スペースで区切って記述します。 記述する順序は自由で、必要のない指定は省略することもできます。 アウトラインのスタイルの指定を省略すると、アウトラインが表示されなくなってしまいます（初期値がnoneなので）。アウトラインを表示する場合は、この指定を省略しないようにしてください。
HD Player for Wii U
Making money is a basic and necessary part of application planning, development, and maintenance. Even if you have a newly developed app, you can monetize it. The app monetization model is not a simple concept. There are several ways to generate revenue from an app. We've created this comprehensive app monetization strategy guide to assist you in successfully monetizing your software and increasin
無料サービスを使え！ – 役立つ無料サービスのレビュー、まとめ、比較記事を紹介
コンテンツへスキップ 無料で使える！HubSpotの顧客リストの活用法 無料のアンケート作成ツール 比較／まとめ 無料「Excel」 テンプレート 比較／まとめ 無料で使えるノートアプリ比較 (Evernote / OneNote / Google Keep) おすすめの無料Web会議システム5選 WebP Converter 徹底解説！初心者でも直ぐに使える HubSpot は、マーケティング、セールス、サービスのためのCRM（Continue reading 多くの人の声を聞くことで改善できることも多い 企業や団体など運営していContinue reading 就職・転職には必須となる履歴書・職務経歴書 これから就職活動をスタートContinue reading 便利なノートアプリで効率的な仕事をしよう いつの時代も仕事をしていてメContinue reading 近年、リモートワーク
lockエラー | 月額200円からのレンタルサーバー JSN
まずは最近知って便利だと思ったCSSの小技をひとつ。 文章の最後に、「※（米印）」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。 .note { padding-left:1em; text-indent:-1em; } <p class=”note”>※米印を使う場合はこいつが便利。<br /> 改行してもこの通り。ちゃんと開始位置が揃ってる。</p> 「padding-left : 1em;」でまず１文字分右に動かして、「text-indent : -1em;」で最初の行だけ１文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。 他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で
table タグの cellspacing 等を CSS のみで指定する
プロパティの解説 border-collapse がボーダーの隙間を作るかどうかのプロパティで、値に collapse を指定することで隙間が無くなります。 これが table タグの cellspacing="0" に相当します。 border-collapse - CSS: カスケーディングスタイルシート | MDN また、例えば 2ピクセルの隙間を作りたい場合は、下記のように指定します。 border-collapse プロパティに separate を指定することで隙間が出来るようになり、border-spacing プロパティでその隙間の幅を指定します。 border-spacing: 2px 1px; 等とすることで、上下左右別に幅を指定することも可能です。 border-spacing - CSS: カスケーディングスタイルシート | MDN その他、table タグの bo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォントアイコンの使い方 (FontAwesome)
vertical-align:middleが効かないのぉ（涙） | 素人ときどき玄人
sakurachiro.com
http://msugai.fc2web.com/web/CSS/pseudo.html
