ねこまぐろBlog :: 新はてなブックマーク用ユーザスタイルシートで旧っぽい配置にした
ネットなどの備忘録なブログ。たまに創作ネタメモとか？ ※当サイトではアフィリエイト広告を掲載しています。詳しくはPrivacy Policyをご覧ください。 2017年7月3日、とうとうこの日が来てしまった……。 怨念のブクマページ→はてなブックマーク - はてなブックマーク新ユーザーページを正式リリースいたします - はてなブックマーク開発ブログ 来てしまったものはしょうがないのでいつも通りにユーザスタイルシートで変更。右の広告まで消えたから真ん中にも置いてください＞＜ @-moz-document url-prefix(https://b.hatena.ne.jp/自分のID/){ .entry-image-block, /* サムネ消し */ #right-container /* 右カラム消し */ {display:none !important;} #center-contai
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は該当部分
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
【更新】 長い 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つ追記する程度です。
文字サイズ変更ボタン をスマートフォン用テンプレートに設置
文字サイズ変更ボタン をスマートフォン用テンプレートに設置 【 ありのごとくあつまりて 】 この記事に含まれるタグ （Keyword） : jQuery javascript フォント iPad スマートフォン ブラウザ 文字サイズ変更ボタン をスマートフォン用テンプレートに設置 2013/05/26 (日) カテゴリー： ブログカスタマイズ上級 スマートフォン用テンプレートに 文字サイズを デフォルト・大きめ・特大 などに調整できる jQuery のスクリプトを設置してみました。 クッキーを利用しているので、ページを送っても有効です。 iPad からFC2ブログを閲覧した場合、以前は パソコンからのアクセスと同じ扱いになっていましたが、2013年3月頃からは スマートフォン用テンプレート にも切り換えられるような仕様に変わっています。（※現在のデフォルトは PC用テンプレート
何番目系の便利なCSSまとめ - Qiita
最初 :first-child 最初の要素（親要素から見て、子要素すべての最初） デモ :first-of-type ある要素の最初（親要素から見て、ある子要素の最初） デモ 最後 :last-child 最後の要素（親要素から見て、子要素すべての最後） デモ :last-of-type ある要素の最後（親要素から見て、ある子要素の最後） デモ 1個だけ :only-child 1個だけ子要素がある（親要素から見て、子要素が1個だけある） デモ :only-of-type 1個だけある子要素がある（親要素から見て、ある子要素が1個だけある） デモ X番目 :nth-child(X) X番目 デモ：５番目 :nth-of-type(X) ある要素のX番目 デモ：５番目 :nth-child(Xn) Xの倍数 デモ：2の倍数 :nth-of-type(Xn) ある要素のXの倍数 デモ：2の倍数
CSSで計算式を可能にするcalc()ファンクション
Updated 2014.03.23 / Published 2013.10.28 CSS3にcalc()というファンクションがあるのをご存知ですか？CSSにおいて計算式を可能にしてくれる便利なcalc()ファンクションのサポート状況や使い方について紹介します。 「横幅にパーセンテージ値を用いつつ、その横幅から指定ピクセル(px)分だけ引けたら...」こんなことを思われたことがあると思います。それをCSS拡張メタ言語を使うわけでもなく、CSS単独で実現できてしまうのがcalc()ファンクションです。 参考：Mathematical Expressions: 'calc()' calc()ファンクションの実装状況 IEIE9よりサポート ChromeChrome19より25まで-webkit-のベンダー識別子付きで先攻実装 Chrome26よりサポート FirefoxFirefox4より15
HTMLとCSSのコピペですぐに実装できる見出しデザイン14選
WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。 同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。 ボーダーがある見出し キャプション付きの見出しです。シンプルなので使いやすいですが、レスポン
Windows で游ゴシックが細く見えないようにする CSS - Corredor
最近の Windows と Mac の両方に標準搭載されている「游ゴシック」フォントだが、Windows にのみ細字の「Light」が搭載されているため、CSS でフォント指定をしても、Windows で閲覧したときだけ細いフォントで見えてしまう。 細いフォントも悪くはないが、個人的には少し見づらいので、もう少しだけ太く表示できるようにしてみる。 CSS 今日デザインを変更したぼくのサイト Neo's World - Neo's World では、以下のような CSS 指定にした。 body { font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif; font-weight: 500; } 2019-06-04 追記：当時はよく分からず書いてい
unicode-bidiでメアドを変換 - lucky bag
CSS の unicode-bidi プロパティを使ったアイデア。つか、良く思いついたなって感じ。 ネタ元 「 Stu Nicholls | Cutting Edge CSS | Hiding email address 」 文字コードの Unicode では、日本語であれば左から右へ、アラビア語であれば右から左へと言う風に言語により文字方向の表記が決められています。 unicode-bidi プロパティを使えば、これを変える事が出来ます。ネタ元では、これをメールアドレスに適応して、ソース上は逆方向に記述し、CSSの unicode-bidi プロパティによって、見栄えを正しく見せています。ロボットからのメールアドレス収集を防げるかも知れませんね。 メールアドレス： moc.gab-ykcul@ofni 上記の(X)HTMLソースコードは下記のようになっています。 <address> メー
文字の書き始めの位置を左右指定する
解説 文字の横書きに対する方向を指定するスタイルシートです。 日本語では、文章は左側から書き始めるのが普通ですが、アラビア語など中には右側から書き始める言語もあります。 これらに対応するため、CSSでは文字の方向を指定するプロパティがあります。 値（direction） 「direction」プロパティで文字の方向を指定します。 「direction:ltr;」は左から右へ文字を並べます。 一方、「direction:rtl;」とすると、文字が逆転し、右側から左側へ文字が表示されます。 ただし、IEでは日本語の文章に「direction」プロパティを適用しても文字が逆転しません。 そこで、ユニコードに対応する「unicode-bidi」プロパティを併用します。 値（unicode-bidi） 「unicode-bidi」プロパティは、Unicodeで定められた規格に対して「directio
レスポンシブなのを作ってたら、firefoxでtable内の画像が圧迫した件
何かに使える気がするのでメモしておく。 起ったこと レスポンシブなサイトを作っていたら、firefoxで想定通りの動きをしてくれなかったのよ。 具体的には何が起ったのか？ table内に配置した画像が、ウィンドウ幅に合わせて縮小してくれず、隣のthを圧迫してしまった。 なお、thにはwidth設定がし何かに使える気がするのでメモしておく。 起ったこと レスポンシブなサイトを作っていたら、firefoxで想定通りの動きをしてくれなかったのよ。 具体的には何が起ったのか？ table内に配置した画像が、ウィンドウ幅に合わせて縮小してくれず、隣のthを圧迫してしまった。 なお、thにはwidth設定がしてあり、tdにはwidth設定がない状態（つまりtd側が可変） にも関わらずfirefoxのみ出来てない！ あ、OSはmacですのん。だからIEはみてないｗ←ある程度出来てからチェックするつも
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
CSS3 Patterns Gallery
Click on a pattern to expand Textareas are editable Browser support Submit a new one Github repo Enjoy! Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「nth-child」と「nth-of-type」の使い方と違い
