px,pt,%,em 文字の大きさ 数値一覧表 - 山崎はるかのメモ
この一覧について 単位系の異なるWebページを、どちらかに統一した単位系にする際にべんりなので作った。 表をクリックすると、その段のフォントサイズをデフォルトフォントとして％やemなどを再計算し表示する。 各単位の略称は次の通り px : ピクセル pt : ポイント in : インチ mm : ミリ pc : パイカ また各値は次の点に注意。 Windowsは96dpi、Mac/Linuxは72dpiで表示。 CSSの単位系を使用。（1パイカ = 1/6インチ） 絶対サイズ指定は参考値。ブラウザ・環境によって異なることがある。 小数点は四捨五入して第3位まで表示。 （2010/11/16・山崎はるか） 修正：画面クリックで再計算機能 2010/11/22 スマホ表示対応：2017/02/12 mmの計算式の誤りを修正・表の小見出し修正：2021/05/17 このサイト（山崎はるかのメモ）
CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！
なぜCSSでボタンを作るのか？その前に、なぜCSSでボタンを作るのか？について少しだけ考えたいと思います。 簡単に言ってしまえば、 軽い！拡張性がある！解像度の心配がない！簡単！と言った理由ではないでしょうか？ 画像でボタンを作ることも多いと思いますが、「画像じゃないほうがいいなあ」と思うことも多いと思います。 もちろん、デザイナーから上がってきたデザインデータからボタンを切り取って、HTMLに設置して、CSSでホバーはopacity:0.8、とかやれば簡単ではありますが、デザインツールの進化やレスポンシブの一般化に伴い、そういったイケてなくて古臭いやり方はあまり望ましくないです。 特にWebの場合、テストの繰り返しが必要ですが、画像でボタンを作るとなるとテスト用にいくつもの画像を作らなくてはいけません。色やテキストを変えるとなると画像すべてを修正する必要があります。しかし、CSSボタンで
CSS スタイルシート制作を楽にする！知っておきたい便利ツール25選まとめ
海外サイト Envato Blog で公開された「25 Free Web-Based Apps & Tools For Working With CSS」の著者 Paul Andrew より許可をもらい、翻訳転載しています。 CSS スタイルシートを作成していると、時間ばかりかかる退屈な作業をこなさなければいけない時があります。 たとえば、CSSアニメーションや FlexBox レイアウトを作成、調整したり、モダンブラウザ対応の書き方を思い出したり、レスポンシブ用にemをpxへの変換や CSS ファイルの圧縮やクリーンアップ、画像をデータURIへ変換など、どれもクリエイティブとは程遠いものばかり。 今回は、作業時間を大幅に短縮し、より快適なスタイルシートの作成ができる便利なツール25個をまとめてご紹介します。 紹介するツールを活用することで、これまで時間がかかっていた頭の痛くなる作業も、ボ
横メニューの作り方
レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記 2014.03.19】 元々のタイトルは「レスポンシブWebデザインに対応した横メニューの作り方」でしたが、よく考えるとスマホ対応になったら縦メニューになりますのでタイトルを変更しました。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; paddi
一番簡単な、Googleモバイルフレンドリー対応の方法
2015/4/21 より、ウェブサイトがモバイル対応しているかどうかが、モバイル検索のランキングを決定する要素となります。 Google 検索 – モバイルでの検索がさらに便利に 私が運営しているサイトのアクセスを調べてみると、どのサイトも、モバイルデバイスからのアクセスが半数を超えてきています。モバイル対応をしていないと、モバイルのランキングが下がってしまい、アクセス数が大きく減少してしまう可能性があります。 レスポンシブに対応したデザインを一から作るのがベストですが、もう時間がありません。とりあえず手っ取り早くモバイルフレンドリー対応をする方法をご紹介します。 サムリさんが紹介している方法が簡単です。 WPtouchはもういらない？プラグインに頼らずCSSの切替でスマホ対応サイトを用意する方法 1) ヘッダにviewportとcss切替えのタグを設置 下記コードをヘッダ<head>〜<
hr要素のデザインサンプル 12 - NxWorld
hr要素は罫線を表示させるもので、話題を変えるときの目印となる区切り線などとして用いられます。 どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 ここで紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません。 また、多用する人も多いと思う破線や点線もブラウザによっては多少見栄えが違ったりするので、使用する際はあらかじめ注意が必要になります。 はじめに ここで紹介しているものは、すべてHTMLは<hr />のみです。 また、それぞれのhr要素にはデフォルトスタイルとしてあらかじめ下記のようなスタイルを指定してあります。
アフィリエイトで月100万円稼ぐための考え方と手法 - 冒険の書
最近、この冒険の書のブログがちょくちょくとアフィリエイターさんのブログで紹介していただけるようになりました。 以前は、目標をブログで公開したり収支報告をすることで、自分にプレッシャーをかけてモチベーションを高めるために更新していましたが、10月に売上が復活したタイミングで収支報告は終わりにしたので、この冒険の書の更新のモチベーションも大きく下がっていました。 今は、公開しているカードローンのサイトのデータなどは公開していますが、他に特に更新することもないなぁと思っていたところ、jumblr.というブログの2015年 副業でアフィリエイトをはじめる人が注目すべきアフィリエイターブログ5選！という記事でこの冒険の書を紹介していただきまして読ませていただいたのですが、そういえばこのブログはアフィリエイトの手法の話はあまりせず、精神論に終始していた気がするので、少しだけ、自分がアフィリエイトを取り
アフィリエイトサイトを制作する時に見本にしたいサイト11選+αとサイトをチェックする際の注意点 - 冒険の書
先日、「アフィリエイトで月100万円稼ぐための考え方と手法」というエントリーを書いた際、コメントでいくつかの質問をいただきました。 その中で、アフィリエイトサイトの制作方法について質問をいただき、アフィリエイトを始めたばかりの方は、一体どういったサイトを作れば良いのかわからないという方は多いのではと思いました。 なので今回は、アフィリエイトサイトを制作する際に、参考にするべきサイトと、サイトを見る際の注意点について書こうと思います。 勉強するなら稼いでいる人のサイトで勉強する 世の中にはたくさんのサイトがありますが、参考にするなら稼いでいる方のサイトで勉強するべきです。アフィリエイトは綺麗なサイトを作れば稼げる訳ではありません。もちろんキレイなサイトで稼いでいるサイトもたくさんありますが、すごくキレイに作り込んでいるのに稼げていないというサイトもあります。 最近A8サイトコンテストで、たく
ホームページ成功への道はすべてここから始まる。目的・目標の明確化
実際にホームページを作り始める前に、プロのWEBクリエイター達がもっとも意識する点は、おそらく【Webサイトを制作する目的・目標を明確にすること】だと思います。なぜこの目的・目標の明確化をもっとも意識するのか。それは目的・目標こそがホームページの成功を根底から左右させるからです。 今日はそんな目的・目標の大切さや、明確にする方法を紹介させていただきます。あなたがクライアントのために作ったWEBサイトには明確な目的・目標がありますか？新人webディレクター・デザイナーには特にこのことを考えていただきたいと思います。 ほとんどの人は、目的や目標を自然に考えながら生活をしています。 例えば鏡の前で『夏までにやせなきゃ！こんな体、彼氏に見せられない！』と思った場合。人は『彼氏にもっと好きになってもらうために、美しく引き締まった体を作り、キレイだと思ってもらう』という目的を作り、どんな手段を用いて目
無料のスマホサイト作成ツール5個｜スマホ対応ホームページの作り方
1500以上の会社、お店が利用中の月額無料HP制作サービス 「HPの制作を安心して任せられる業者が見つからない＞＜」 そんなふうに頭を悩ますアナタ。 以下の「ウェブさえパック」はもうチェック済みですか？ HPを作るのに必要なものがパッケージになってるお得なサービスです。 料金と事例を見てみる なぜ、スマホ未対応のホームページは時代遅れなの？ その答えは非常にシンプル。 なぜなら、今が「ほとんどの人がPCではなくスマホでホームページを見ている時代」だからです。 この数字が何を表しているかご存知でしょうか？ スマホ： 83.4% パソコン： 69.1% これは、「総務省」が発表した2019年のIT機器の世帯保有率です。（詳しいデータはこちら） なんと、パソコンよりスマホを持つ人のほうがはるかに多いんですね！ こんな世の中ですから、よりたくさんの人にホームページを見てもらいたいなら、スマホサイト
Google「スマホ対応」に最適化｜PCサイトをスマホ変換「shutto（シュット）」
スピーディ PCページの要素をドラッグ＆ドロップすることで直感的にスマホ対応ページを組み立てていくため、簡単なページであれば数十分でスマホ対応が可能です。
スマートフォン対応サイトを制作する5つの方法。
今さら…な感じですが、スマートフォン向けサイトを制作する方法をざっくりとまとめました。私のように、これからスマホサイトの作り方を学ぼうとしている方の参考になれば幸いです。 作り方は様々で、それぞれにメリットとデメリットがあり、どの方法を選ぶのかはサイトの規模や方向性によってケースバイケースかな、と。つまり、Web制作者としてひと通りの知識を頭に入れておく必要がありそうです。覚えなくちゃいけないことがいっぱいあって大変ですね…>< そもそもなぜスマホ対応が必要なのか？ スマートフォンでも、PC向けのWebサイトをそのまま閲覧することは可能です。が、物理的に画面サイズが小さいため文字が読み難かったり操作しにくかったり、通信速度やCPUの問題で大きな画像や大量のコンテンツは読み込みに時間がかかったりと、快適に閲覧できるとは言えません。 ですので、画面サイズやスペック、操作のしやすさ、通信速度など
プロが教える！アクセスアップの方法31選
Webサイトやブログをお持ちの方や担当者の方は、アクセスアップのために日頃奮闘している方が多いと思います。 アクセスを集めるための施策を何も行わなければ、いくらコンテンツを更新しても砂漠の中にあるお城と同じ状態で、誰にも気づいてもらう事ができません。 そこで今回は、Webサイトやブログへのアクセスをアップさせる際に参考となる31のノウハウをご紹介します。 おすすめ無料で使える！Webマーケティングツール＆サービス【厳選39選】 1.簡単に実行できる35個のGrowth Hack施策 グロースハックは簡単な施策でも多くの事が実施可能。「Call to Action周りにソーシャルな圧力」や「登録をSNSアカウント認証」など、すぐに実施できる35個の施策。 2.他サイトを丸裸にする32のグロースハックツール集 「競合サイトの情報が見れたらな」を可能にするグロースハックツールのまとめ。海外ツール
ホームページ内にブログ設置型のパーマリンク設定
WordPressでフロントページは固定ページ、コンテンツの一部にブログ（投稿ページ）を設置する場合、ブログトップのURLには"/blog/"が付くけど、個別記事には付かない。個別記事のURLにも"/blog/"常につけるパーマリンク設定の話 本記事はサイト全体をWordPressで作って、通常のホームページのようにトップページがあり、お店の紹介やメニューページがあって、ブログもあるって構成で、且つブログの記事のURLを「◯◯◯.com/blog/kiji-title1」のようにブログ記事のURLに常に”blog”を付ける方法です。 結論から申し上げると、パーマリンク設定の話です。 それを何も設定しないと、ブログのトップページだけが「◯◯◯.com/blog/」になり各々の記事は「◯◯◯.com/kiji-title1」「◯◯◯.com/kiji-title2」といったように”/blog/
店舗や会社のブログをアメブロやFC2でやってはいけない３つの理由
本日のブログは温故知新でいきます。まあ、同じようなことを繰り返し書いても、内容がためになればそれでいいよね。お腹の調子が悪いので本日はコレで。 このブログを本格的に書き始めたのは震災後で、そのまではたまに気が向いたら程度で本気で書いてなかった＆読まれてなかった。おかげさまで毎日こつこつと書いていたら、先月の月間ユニークユーザー数は30万人までいき、少ない日でも5000人は切らないようになりました。こうなると手応えもあるし、書いてて面白い。 で、実は初期の頃に誰も読んでくれてなかったブログにもずいぶん面白い内容のものがあるので、本日はそれを一個掘り起こして加筆したいと思います。 なにかっていうと、twitterで一昨日質問もらったので思い出したこれ。「店舗や会社のブログをアメブロやFC2でやるのはバカっぽい」ってことです。特にFacebookで自分のHPのアドレスをアメブロとかにしているのを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ニキビの化粧水専科
http://www.css-lecture.com/log/css3/css3-border-radius.html
http://handywebdesign.net/2012/07/12colors-give-you-the-impression/
http://handywebdesign.net/2013/12/slide-share-about-color/
Uka-p.com is for sale | HugeDomains
