シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
エレコム、MacBookなどのType-Cポートを搭載した機器を充電できるACアダプタを発売 - MdN Design Interactive
エレコム株式会社は、MacBookやMacBook Proの充電および電源供給にも使えるACアダプタ「ACDC-CPS200WH」を、2017年12月中旬に発売する。本体に1基のUSB Type-Cポートを備え、付属の充電ケーブルを用いて充電が可能。充電する機器の仕様に合わせて電圧変換ができるため、MacBookやMacBook Proのほかに、USB Type-C搭載スマートフォンやタブレットの充電にも対応する。価格は8510円（税抜）。 本製品は、PowerDelivery（PD）規格に準拠したノートパソコン用ACアダプタだ。最大出力は30W（Apple純正のMacBook Pro用充電器は61W）。MacBook 12インチ（2017年モデル）では約2.5時間、MacBook Pro 13インチ（2016年モデル）では約3時間で充電を行える。本体カラーは、Apple製品に合わせやすい
CSSで三角形を作る＆使用例（スマホ編）｜クロノドライブ
皆さんは、CSSだけで三角形のような図形を表現出来ることを知っていますか？ 調べてみると、三角形の作り方を解説している記事が沢山あります。 普通の三角形を作る方法は多くありますが、実際どのような場面で使うのかを解説しているものは、少ないような気がしました。 そのため、私が個人的にこんな場面で使えるのでは？といったものをまとめてみましたので、ご紹介したいと思います。 ～この記事の対象ブラウザ～ iOS5、iOS6、iOS7 Safari Android OS 2.3.3、Android OS 4.0.4、Android OS 4.1.1 標準ブラウザ ※PCでも表示はされていますが、動作検証は不十分なのでPCで使用する際は注意してください。 CSSだけで作ると何がいいの？ CSSだけで作ると、 色やサイズの調整が簡単に出来る。 画像分の容量を削減出来る。 スライスの手間が減る。 などのメリッ
【CSS】CSSのみで三角と矢印を作る方法 - bagelee（ベーグリー）
はじめに 本記事ではCSSのみを使って三角や矢印を作る方法をご紹介します。 すでに三角や矢印を作れる方でも、「実際にはコードの中身の仕組みがよくわかっていないんだよね〜」という方もいらっしゃるんではないでしょうか？ 今回はそんな方に向けて細かい解説を交えながらご紹介します！ 三角の作り方 こちらは実際にCSSで作成した三角です。 HTMLコード： <div class="triangle"> </div> <div class="triangle1"> </div> <div class="triangle2"> </div> <div class="triangle3"> </div> CSSコード： .triangle{ width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid
[CSS]CSSで作る「吹き出し」のサンプル（上下左右の4方向） | WEBデザインのTIPSまとめサイト「ウェブネタチョ」
<style> /*親*/ .parent1 { width:100%; background:#dd0000; padding:0; position:relative; } /*子*/ .parent1 .child1 { background:#dd0000; position:relative; /*テキストの補正*/ color:#fff; padding:10px 0 } /*擬似要素:after*/ .parent1 .child1:after { content: ' '; width:0; height: 0; position:absolute; border:10px solid transparent; border-top-color:#dd0000; top:100%; left:50%; } </style> <div class="parent1"> <p
![[CSS]CSSで作る「吹き出し」のサンプル（上下左右の4方向） | WEBデザインのTIPSまとめサイト「ウェブネタチョ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/9aeb7d68a3e8dbb0b795d706f264710c1aa54db5/height=288;version=1;width=512/https%3A%2F%2Fwebantena.net%2Fwp-content%2Fuploads%2F2014%2F01%2F6127616.png)
太陽系外からの使者「オウムアムア」、初の恒星間小惑星と確認
（ＣＮＮ） ハワイの天文台で１０月１９日に観測された物体は、太陽系外から来た「恒星間小惑星」で、これまでに観測されたどの天体とも違っていた――。ハワイ大学などの研究チームが２０日の科学誌ネイチャーにそんな研究結果を発表した。太陽系外からの物体が観測されたのは初めて。研究チームはこの物体を「オッドボール」と呼んでいる。 高速で移動するかすかな光体は当初、太陽系内から来た彗星（すいせい）か小惑星と考えられていた。しかし軌道を調べた結果、恒星間の空間から飛来したことが分かったという。 研究チームは複数の望遠鏡でこの物体に照準を合わせ、時速１３万８０００キロの超高速で視界から消えるまでの３夜にわたって観測を続けた。 ハワイ大学天文学研究所のカレン・ミーチ氏によると、この物体は高速で回転していて、大きさは少なくともフットボール競技場ほど。明るさが大きく変化する様子が観測された。 表面は岩盤に覆われ、
あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方
フォームをCSSでスタイルするのは難しいと思われていました。しかし、input要素とそれに関連する要素をスタイルするためのあまり知られていないセレクタがあります。いくつかは比較的新しいセレクタですが、昔から存在するセレクタもあります。 フォームの見た目だけでなく、機能も強化するCSSの便利なセレクタとその使い方を紹介します。 Advanced CSS-Only Form Styling by Jonathan Harrell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォームにスタイルを適用したデモ :placeholder-shown :required :optional :disabled :read-only :valid :invalid :in-range/:out-of-range :checked フォーム
土星を守護星にもつあなたへ | 星の光が消えないうちに
土星に守護されているあなたは、自分らしさやオリジナリティを大切にし、 困難な道でも乗り越えて、どんどん前へとすすんでいきます。 自分を磨き、あなたにしかないオリジナリティを追求していきます。 基本の性格 10惑星の中でひときわ目立つ、大きなリングをもつ土星。 誰よりも目立ち、また周囲をまわる衛星の数もおおく、人から信頼される、カリスマ性もあります。 しかし、強いオリジナリティをもっているということは、反発をうんでしまう場合もあり 他の惑星の中で１番困難に立ち向かうことがおおくなります。 しかし、困難をのりこえることで成長をしていくので、 ピンチになるとワクワクするキモチをもっています。 自立心が旺盛なので、多少のトラブルは豪快に乗り越えて目的を達成していける頼もしい人です。 想像力豊かで、独立心が旺盛。自分自身をつねに磨き、なにごとにも意欲的にとりくむ人です。 自分の人生を、自分の手で切り
マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法
Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://news.livedoor.com/article_detail_amp/13921083/
CSS Arrow Please - By Simon Hoejberg - @shojberg
ぼくの辿り着いた濃いめのtext-shadow - Qiita
作るのが楽しい！自分にそっくりな似顔絵のイラストを使ったアイコンが作成できるSketchライブラリ -Avataaars