The Shapes Of CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into
今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！
2019年2月3日 CSS 要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！ ↑私が10年以上利用している会計ソフト！ 無難で王道！正円の円弧を使った角丸 border-radius は「border」とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。 四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すればOK。半径10pxの正円の円弧をベースにした角丸を実装で
CSSのみで菱形を作る方法まとめ | UNORTHODOX WORKBOOK | Blog
菱形を大量に使ったサイトを制作しているんですが、画像を使わずにCSSのみで菱形を作る方法はいくつかあって、それぞれに向き不向きみたいな特徴があるので、作り方も含めて自分用にまとめてみました。 ちなみに「菱形を大量に使ったサイト」は、このサイトのリニューアルでして、今年の9月から作り始めてまだ完成していないという…。 基本となるHTMLとCSSとデモ 以下のHTMLとCSSがベースとなります。たぶん、1つのdivで全てできると思いますが、普通はテキストをのせたり、リンクを貼ったりすると思うので、実用面を考えてこの形としました。 HTML <div class="contents"> <div class="diamond"> <a href="#"> <div class="diamond__inner"> <p>テキスト</p> </div> </a> </div> </div> .con
CSSのみで背景を全体的に斜めにして傾斜をつける方法 | UNORTHODOX WORKBOOK | Blog
最近よく見かけるやつなんですけど、ちょうど今作っているサイトで使ってみたくて、色々やってみた結果なかなか良かったのでブログに残しておきます。 斜めのストライプとかじゃなくて、ブロックごと全体的に斜めにして背景を傾かせる方法です。プラグインは使わずに、CSSのみで実装してます。 デモ つまりはこんな感じのやつです↓ DEMO PAGE 大胆に背景全体を傾斜させているので、単調なフラットデザインに、ちょっとしたスパイスを加えることができますね。 実装方法 色々とやり方はあるかと思いますが、ここではCSSのbefore擬似要素とtransform:rotateを使って表現しています。 HTML <section class="contents"> <div class="contents_inner"> <!-- ここはコンテンツ --> </div> </section> ※HTMLは該当部分
洗濯王子に聞く！ 意外と知らない「洗濯機の掃除法」 - 価格.comマガジン
突然ですが、みなさんの家の洗濯機は清潔ですか？ 専用のクリーナーで洗濯槽をたまーにきれいにするだけという方も多いのではないでしょうか。でも、そもそも洗濯機って、どこの掃除をどのくらいの頻度ですればいいの？ など、わからないことだらけ。そこで今回は、洗濯機の掃除について学びたいと思います。教えてくださるのは、「洗濯王子」としてテレビや雑誌で活躍中の洗濯のプロ・中村祐一氏。価格.comスタッフの自宅にお招きし、洗濯機を一緒に掃除しながらレクチャーしてもらいました！ 【関連記事】 洗濯王子がおすすめする、洗濯洗剤の正しい選び方・使い方 洗濯王子に聞く！ 新しい洗濯表示の意味 ハイターですっきり！ ドラム式洗濯乾燥機の大掃除をしてみた 洗濯といえばこの方。洗濯王子は今日もさわやかです！ 洗濯機の掃除は、自宅にあるものでできる！ 価格.com：今回は、洗濯機の掃除方法について教えていただきたいと思い
アイコンが化けたり、まっ白になったり、正常に表示されない時の対処方法 - ぼくんちのTV 別館
更新履歴 [ 全て表示戻す ] 2018.02.17: ページ構成の変更、デスクトップアイコンが真っ白になった場合追加 2015.01.03: IconCache.db再作成の手順を一つ追加 2014.06.15: 初出 長期間PCを利用していると、デスクトップアイコンやショートカットが別のアイコンに化けてしまったり、まっ白になってしまったり、正常に表示できなくなってしまう事があります。 このページでは、そのような状態に陥った時の対処方法を紹介しています。 発生例1 2018年1月末、手元の Windows 10 にて「デスクトップのショートカットアイコンが全て真っ白になる」という問題が発生しました。 発生例2 2014年6月、Windows7にて「特定の拡張子のみが、別のアイコンに化ける」という問題が発生しました。(この時は、zipファイルのみが弥生会計のアイコンに化けました) いずれの
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
注釈の付け方
注釈(ちゅうしゃく)の示(しめ)し方(かた) 本文(ほんぶん)の内容(ないよう)に関(かん)する補足的(ほそくてき)な説明(せつめい)や議論(ぎろん)を記(しる)すのが注釈(ちゅうしゃく)である。 なお、一般常識(いっぱんじょうしき)を注釈(ちゅうしゃく)に書(か)く必要(ひつよう)はない。ここで一般常識(いっぱんじょうしき)というのは、辞書(じしょ)や事典(じてん)に載(の)っているような基本的(きほんてき)な知識(ちしき)のことである。たとえば、山内(やまうち)（2001）は、次(つぎ)のように注意(ちゅうい)している。 必要(ひつよう)もないのに註(ちゅう)を付(つ)けると、バカがばれる。哲学者(てつがくしゃ)カントの研究論文(けんきゅうろんぶん)で、カントの生没年(せいぼつねん)などは普通(ふつう)記(しる)さない。（山内 2001：175） 注釈(ちゅうしゃく)では、本文(ほんぶ
replace()の機能のまとめ！『正規表現、function()、arguments、RegExp()』：JavaScript - モーリーのメモ
『replace()』は、文字列の置換を行う関数です。 基本的な使い方は、下記の通りです。 var text = "abcabc"; var result = text.replace(/a/g, "1"); // "abcabc"内の"a"を最後まで検索して"1"に置換する // 結果：resultは"1bc1bc"になる 『replace()』の第１引数の『/a/g』は、検索する文字列を正規表現で表したものです。 正規表現では、検索する文字列を『/（スラッシュ）』で囲みます。 末尾の『g』は、最後まで探すというフラグです。 フラグには下表のようなものがあります。 フラグ意味 g１個目だけでなく最後まで検索します。 i検索の際に大文字と小文字を区別しません。 m複数行に渡って検索します。 ＊『g』フラグを付けないと１個目しか置換しません。 ＊また『text.replace("a", "1
ライティングの基本
ライティングにも基本があります。 いくつものライトを使うのは、それぞれのライトをセットする位置や角度に意味があるのです。 キーライト そのシーンのメインになるライトです。 想定した光源の光として設定されることが多く、方向性、光量は殆どかわることがありません。 わかりやすく言うと、さっき太陽の光が左からきていたのに、１０秒後には右からという事はないですよね。 また、光の強さも、かわらないはずです。ですから、カメラの露出設定の基準のライトになります。 ※ただ、広角の画とアップの画での見た目の印象、あるいはカメラアングルとの関係での被写体にあたっている角度 など、臨機応変に対応していきます。微調整は常に必要です。 おさえのライト 光が直接あたってないところ（物）でも、肉眼で全く見えないということはないですよね。 暗いとしても、目がなれると、うっすらと見えるはずです。 ところが、フィルムでもビデオ
小説同人誌のための組版レイアウトとDTP
小説同人誌のための組版レイアウトとDTP 小説系同人誌を製作する際に、必要な事項――特にレイアウトの設計を中心にまとめています。 DTPソフトウェアやワープロソフトの具体的な操作方法や設定方法の記述はなるべく控えます。普遍的な内容を中心に述べますので、一部のソフトウェアによっては実現が大変難しいこと（字体の整理など）にも触れています。 本コンテンツが同人誌として出版されました 本コンテンツをもとに大幅に加筆・編集を加えたものを「小説同人誌のためのレイアウトデザイン」という同人誌で2015 12月に発行しました。なお、本コンテンツについてはこのまま残置しますが今後更新する予定はありません。ご了承ください。 改訂版を発行しました（2017.11.23） ［改訂版特設サイト］ 目次 基礎知識（書籍関係） 基礎知識（DTP関係） 表記の整理 字体とは 字体の整理 ポイントと級数制 基本版面（レイア
【更新】 長い URL を折り返す CSSプロパティ
*･゜ﾟ･*:.｡..｡.:*･ Welcome to My Weblog ･*:.｡..｡.:*･゜ﾟ･* AVERTISSEMENT : Il est strictement interdit d'utiliser ou de reproduire sans autorisation le contenu (textes et images) de ce site sur d'autres sites web, forums, etc. Ohne ausdrueckliche Erlaubnis ist es weder erlaubt den Weblog (Text, Bilder und Inhalte des Forums) zu benutzen, wiederzugeben oder eine Verlinkung umzusetzen! Der geistige Eige
[CSS]GoodDesign賞にノミネートされて落選すること間違い無しのすごくアレっぽい見出しスタイルを作成した
どうも、おつぱ（ @OZPA ）です。 ブログの見出し要素のデザインをいじくっていたらなんかGoodDesign賞にノミネートされそうな見出しスタイル…いや、正確には諸処の事情でノミネートが取り消されそうなスタイルが出来上がりました！ 革命を起こす見出しスタイル えー、出来上がった見出しは以下の3スタイルです。 画像ではなく、CSSで実装しております。 スタンダード ソフト ハード すごい… なんかよくわかんないけど…エロスタイリッシュ…！！ サンプルコード サンプルコードは以下。 スタンダード html [html] <p class="t_standard">スタンダード</p> [/html] css [css] /**** スタンダード ****/ .t_standard{ border-top:1px solid #CCC; border-right:10px solid #CC
![[CSS]GoodDesign賞にノミネートされて落選すること間違い無しのすごくアレっぽい見出しスタイルを作成した](https://cdn-ak-scissors.b.st-hatena.com/image/square/3da9afa478057e41d2c9397e0ac7416a48347219/height=288;version=1;width=512/https%3A%2F%2Fozpa-h4.com%2Fwp-content%2Fuploads%2F120607_title.jpg)
シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
スマホのアプリで描いたイラスト・漫画の入稿ができます！
Redirecting
NEC LAVIE公式サイト > サービス＆サポート > Q&A > Q&A番号 016842
Togetter - 国内最大級のTwitterまとめメディア
Windows Updateが終わらない問題 2016年11月版
