CSSだけで幅を超えた文字列を...で省略する - Qiitaある幅に合わせて文字列を省略したいときがありますが、 レンダリングされる文字によって幅が違うので、文字数で制御するのは割と面倒ですね。 ですが以下のようにcssを書いておけばきっちり決めた幅であふれた部分を「...」で省略してくれます。 p{ width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; /* Opera9,10対応 */ }
グラデーションに便利！国産CSS3ジェネレータ「Grad3」
最近知ったグラデーションに特化したCSS3ジェネレータを紹介します。国産ということで何となく嬉しくなりました。 グラデーションの色は自由に追加できて直感的に操作できます。色を減らすのにちょっと悩みましたが、消したいポイントを左へドラッグすると消えます。 円形グラデーションも作ることができます。こちらも直感的な簡単操作です。 もちろんリアルタイムでプレビューされます。 深く考えなくてもサンプルがたくさんあるので、サンプルからいじっていくのもいいですね。 いい感じの実用的なサンプルが色ごとで分けられています。 通常は背景のグラデーション部分のみのコードが表示されていますが、「All」にすることですべてのコードが表示されます。 ベンダープレフィックスもブラウザごとで付けることができます。ただしベンダープレフィックスが付くのはbackgroundのみのようです。 テキストシャドウやボックスシャドウ
マーケ担当なら必ず抑えておくべきコピーライティングの７つの基本
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. コピーライティングは、ビジネス上でもっとも重要なスキルの一つだ。 それ一つで、アクセス数が何十倍、何百倍と変わってくるし、商品やサービスの売上も変わってくる。 そこで本日は、効果的なコピーライティングの７つの基本をしっかりと抑えることで、WEBメディアやWEBサイトの運営に役立てて頂きたい。 また、私たちバズ部は12年で400社以上のメディア支援を行い、 立ち上げから10ヶ月で14.6億円の売上を産んだ不動産メディア8ヶ月で月間140万PVを実現したアプリメディアなど大きな成果を挙げ続けている。 各サイトの成功要因をインタビューしているので、 あなたのサイトに役立てて欲しい⇒25サイトの成功事例インタビューはこちら １.コピーライティング
[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック
テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 Replacing the -9999px hack (new image replacement) [ad#ad-2] 画像置換：-9999px 改善したテクニック 画像置換：-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「text-indent:-9999px;」でテキストを見えない位置にし、見出しとなる画像を背景画像として表示します。 #sample06{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -250p
自由自在！CSS3のtext-shadowを使ってをロゴ作ってみる｜Webpark
CSS3のtext-shadowが面白そうなので個人的に色々ロゴを作ってみました。想像力が膨らみますね。 text-shadowの基本的な使い方はこのようになります。 カンマで区切ると複数の陰を同時つけることできて、うまく組み合わせると色んなロゴが作れちゃいます。 光り輝いているようになっています。複数の影を使っていて、色は同じですが外にいくほどぼかす割合が強まっています。 color:#fff; background: #000; font-size: 52px; font-weight: bold; text-shadow: 0px 0px 1px #ffffff, 0px 0px 10px #ffd700, 0px 0px 20px #ffd700, 0px 0px 30px #ffd700, 0px 0px 40px #ffd700; 影を重ねて立体的に仕上げています。 color
CSS3プロパティの勉強になるジェネレータ16個
CSS3のジェネレータを紹介します。海外サイトがほとんどですが簡単に使えると思います。それぞれ特徴があって面白いので、試しに色々作ってみればCSS3プロパティの勉強にもなります。 CSS3プロパティ全般 ボックスやテキストなど広範囲にわたって設定可能なジェネレータです。比較的有名なものが多いです。 CSS3.0 Maker テキストまわりから、角丸やシャドウ、回転など色々作れます。指定できる要素は以下のとおりです。 CSS Transform Box Shadow Text Shadow Text Rotation RGBA @Font Face Outline Offset Transition CSS Gradient CSS3 Generator これも指定できる要素はかなり多いです。レイアウトがシンプルで見やすいです。 Border Radius Box Shadow Text S
IEでもそこそこできる！CSSで作る画像のようなボタン
#button { width:320px; color:#e4eef8; background:#337fcc; font-size:28px; font-weight:bold; text-shadow:0 -1px 1px #143352; text-align:center; display:block; text-decoration:none; border:1px solid #225588; padding:12px 0 8px 0; border-radius:12px; background:-moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1)); background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5
佐藤信夫『レトリック感覚』
目次 序章１ レトリックが受けもっていた二重の役わり 序章２ レトリック、修辞、ことばのあや 第１章 直喩 第２章 隠喩 第３章 換喩 第４章 提喩 第５章 誇張法 第６章 列叙法 第７章 緩叙法 本書のなかのおもなレトリック用語 おもな引用文献 あとがき 佐藤信夫 または言葉への信頼 －佐々木健一 序章１ レトリックが受けもっていた二重の役わり レトリックまたは修辞はことばの表現に特別な効果を発揮させる技巧という意味でつかわれている。文章に強弱のついたことばの模様が生まれる。たとえことばの模様が意識的に読まれることがなくとも、読者に快不快、退屈や反感を抱かせたり、あっけに取られることがあれば、白けもさせる。 レトリックのはたらきには弁論のための説得と魅力的な表現がある。修辞学は古代ギリシャ以来討論に勝つための弁論術として注目されてきた。そして多くの人々によ
こう言い換えろ→論文に死んでも書いてはいけない言葉３０
Author:くるぶし（読書猿） twitter:@kurubushi_rm カテゴリ別記事一覧 新しい本が出ました。 読書猿『独学大全』ダイヤモンド社 2020/9/29書籍版刊行、電子書籍10/21配信。 ISBN-13 : 978-4478108536 2021/06/02 11刷決定 累計200,000部（紙＋電子） 2022/10/26 １４刷決定 累計260,000部（紙＋電子） 紀伊國屋じんぶん大賞2021 第３位 アンダー29.5人文書大賞2021 新刊部門 第１位 第２の著作です。 2017/11/20刊行、４刷まで来ました。 読書猿 (著) 『問題解決大全』 ISBN:978-4894517806 2017/12/18 電書出ました。 Kindle版・楽天Kobo版・iBooks版 韓国語版 『문제해결 대전』、繁体字版『線性VS環狀思考』も出ています。 こちらは１０刷
Webユーザインターフェースの "暗黙知" を意識していますか？ : LINE Corporation ディレクターブログ
暗黙知（あんもくち、Tacit Knowing）は、ハンガリーの哲学者・社会学者マイケル・ポランニー（Michael Polanyi) によって1966 年に提示された概念で、認知のプロセス、或は、言葉に表せる知覚に対して、（全体的・部分的に）言葉に表せない・説明できない知覚を指す。Wikipediaより こんにちは。livedoorで検索全般を担当しております、須田です。 タイトルのままなのですが、少しづつ日本のWEBにおける暗黙知を共有したいと思っています。 暗黙知の共有することで得られるメリットですが、 ユーザーにとっては、分かりづらいUIを日本からできるだけ無くすことができ、斬新なUIに慣れるという煩わしい時間からの開放企業にとっては、暗黙知として決まりがあることで、UIを検討する時間の短縮にもなるというメリットがあると思います。 まずは誰でも知っていると思われる基本的なところだけ
優しさって魔法のことでしょ？
優しさは、このリアルな時代に、人間が唯一使える魔法なんだと思う。 ということに、気づいてしまった。 昨日まで、僕は優しさのことなんて、ちっともスゴイと思ってなかった。 なんていうか、優しさなんて、ある意味、人として当然のマナーだったり、 もっといえば、なんかちょっと胡散臭くさえあるような、 それでいて、どこかインパクトに欠けるというか、 どこも褒めるとこのない人に、とって付けてしまえるような、 そんな取るに足らないものだと思ってた。マクドナルドのスマイル０円的な。 ところが、僕は、昨日色んな人に色んな形で優しくされてしまった。 というのも、僕が突然、電車というアウェーで気分が悪くなるというような、 ありがちな、それでいて、実際にはそれ程ないがちな、そんな舞台に躍り出てしまったわけで、 そして、僕は色んな人に、優しくされてしまった。 まず、もう、すごい気分が悪くて、吊革につかまってんのがやっ
文章を綺麗に見せる九つのテクニック。 - Something Orange
This domain may be for sale!
ToFU Editor：コピー＆ペースト対応 iPhone/iPodTouchエディタ
ToFU Editorは、コピー＆ペーストに対応した、iPhone/iPod touch用のエディタです。2009/01/20 に、Ver2.0が登録されました。 詳細説明はこちら→■コピー＆ペースト対応エディタToFUエディタの説明ページ 縦書き、横書きに対応しています。また、変更されないようにロックすることもできます。 文字の大きさをいつでも変更することが出来ます。 Ver1.1では、白黒反転表示も可能です。 同時に５つのファイルを編集することが出来ます。画面左右フリックでファイル切り替えを行います。 内蔵の簡易Webサーバを起動して、PCからToFU Editorで作成したファイルを参照することが可能です。 ネット上のファイルをHTTP経由で取得することが可能です。 HTMLファイルを整形して表示することが可能です。また、その状態でもコピー機能を使うことが出来ます。 AppStore
テキストをかっこよく魅せるPhotoshopのチュートリアル集：Part 9 | コリス
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
Web文章作法（上）：ユーザーはそもそも文章なんて読みたくないと思っている：NBonline(日経ビジネス オンライン)
今回から、文章を実際に構成していくコツを書いていきたいと思います。表題にある通り、そもそもWebサイト上でユーザーは文章なんて読みたくないと思っています。 こう書くと「そんなことない」と思われるかもしれませんが、何を言いたいかというと、そのくらいの心づもりで文章を書かないと、誰も気に留めてくれないということです。 彼らにとって、大切なのは自分が求める内容がそこにあるかどうかでしかありません。このへんが、小説とは違いますね。小説は読むというプロセスを楽しむ部分がありますが、Web上ではそれはありません。 常に読みやすい記述方法はないかなど、ユーザーにとって快適な見せ方を検証することは必要不可欠です。 そこで、まずは文章を書いていく上で、ユーザーに幻滅されないための最低限のルール（3大ルール）を書いていきます。 ルール1：文章は「結・起・承」で構成すると、執筆時間を短縮できる Webサイト上で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker
Nope
IDEA * IDEA
テキストをかっこよく魅せるPhotoshopのチュートリアル集：Part 12 | コリス
テキストをかっこよく魅せるPhotoshopのチュートリアル集：Part 11