吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 - SHIROMAG
2016年10月2日17：53に追記： コード修正したのでそれ以前にコードを貼り付けたかたは貼り直しお願いします。お手数おかけいたします。 2019年12月23日17：20に追記： デザイン、CSSを微調整しました。 CSSとChrome拡張を使って会話形式の記事を書く 今回は、はてなブログで簡単に会話形式の記事を作る方法を紹介します。 吹き出しと画像を使って会話形式にする方法は他の記事でも紹介されているのですが、すごく面倒なのです。 「会話形式の記事書くの面倒」「シロマどうにかしろ」という意見があったので、楽に実装できる方法を頑張って作りました。 最初の設定は少し面倒です。ただ、一度設定してしまえば、後はめちゃ楽ちんになると思います。 見た目はこんな感じ↓↓ 先生、今日は吹き出しを簡単に実装する方法を紹介します。 運動と瞑想の習慣がない者の末路はいつも悲惨だ。恐ろしい恐ろしい。 ・・・
Classy CSS: Sassスタイルシートへのプログラマティックアプローチ | POSTD
この記事を書き始めたのは、現在使われているCSSの命名規則やスタイルの融合についての見解を Atomic OOBEMITSCSS という題名で風刺的な記事にまとめ、SitePointに投稿した数週間後です。それが8月頃のことだったのですが、この投稿はその後の私の生活に影響を及ぼしました。冗談のつもりで「 Atomic OOBEMITSCSS 」という題名をつけたがために、世間の人々はその題名を取り上げ、話題にしたのです。（正直言って、その内容について直接人々に質問することは、私にとって非常に愉快なことでした）。そして今年のSassConfで @extend の利用について議論したことがきっかけで、この見解を再検討する必要性に気づきました。 Classy CSSについて 上記で紹介した記事（「Atomic OOBEMITSCSS」）では、コンポーネントをマークアップする方法について（Pint
Atomic OOBEMITSCSS — SitePoint
People love naming things. And developers love acronyms. And thus here we are, finding ourselves with all of these CSS naming conventions and methodologies: BEM, SMACSS, Point North, ITCSS, OOCSS, Title CSS, Idiomatic CSS, Atomic Design, SUIT CSS, Kickoff CSS, etc. We often hear “Are you using OOCSS or BEM?” but these things are not mutually exclusive. In fact, most of the time, we’re taking conce
フロントで迷ったら読む自分用！javascript,css,htmlの命名規則やコメントの書き方・ルール・規約・ガイドラインについてとかとか - tweeeetyのぶろぐ的めも
はじめに サーバサイドの人間ですが、だからこそ大事にしたいフロント側のルール。 フロント側を一切を触らないのなら構いませんが触ることも多分にあるでしょう。 フロント大好きなのでそっちメインで触りたい時もあるでしょう。 ってことで、そんな自分がフロントのお作法として守っておきたいというときに参考にする自分用メモです こんなかんじ ってことでjavascript,css,htmlについて それぞれ自分が見返せるように参考サイトとティップスをメモ javascript 命名規則 コメント まとめ系 CSS 命名規則 id,class名のサンプル コメント まとめ系 HTML 文書構造 コーディング規約とかルールとか全般 ※HTMLは命名規則て感じではないですね 注釈 お作法といっても命名規則、コメントなどを主としてまとめました（htmlは文書構造) 部分的でも命名規則について参考になれば参考とさ
【CSS】画像の下に出来る余白を消す方法 - ディレイマニア
サイトを作ってるときに画像の下に謎の余白が出来ていて、marginやpaddingをどうやっても消えてくれないということがありました。 解決策を見つけましたのでご紹介します。CSSに一行加えるだけの簡単な作業で済みます。 画像の下に出来る謎の余白を消す まず、「画像の下に出来る謎の余白」とはなにか、こちらの画像をごらんください。 ▼こちらが画像の下に出来た余白に何の対処もしてないものです。このように画像とその次の箱の間に隙間が出来て背景が見えてしまってます。 これを消すためには下記のように記述するだけでおっけーです。2パターン紹介します。 img { vertical-align: bottom; } img { display: block; } 上記のいずれかをお使いください。 で、上記のまま書いちゃうと「そのサイト内のすべての画像が対象」になってしまうので、隙間が邪魔だと感じるときだ
シンプルなHTMLで実装することにこだわったレスポンシブ対応の汎用性に優れたフレームワーク -Turret
シンプルなHTMLでセマンティックに実装することにこだわった、アクセシブルでレスポンシブ対応のサイトをより簡単に制作するためのフレームワークを紹介します。 MIT Licensesで、個人でも商用でも無料で利用できます。 Turret Turret -GitHub Turretの特徴 Turretはアクセシブルで、セマンティックで、レスポンシブ対応のサイトをより簡単に制作するためのフレームワークです。 レスポンシブ対応 読みやすいマークアップを使い、レスポンシブ対応のグリッドやエレメントを汎用性に優れたclassを使って実装しています。 Design First 直感的なユーザインターフェイスのために、文字の定義とカラーパレットにフォーカスしています。 No JavaScript スクリプトは使用せず、LESSベースでネイティブのWeb要素を採用しています。 セマンティック マークアップは
[CSS]素晴らしいテクニックが満載！囲いや区切りなどのラインを実装するスタイルシートのまとめ
divやp、hrなどで実装された囲いや区切りのスタイルに、一手間加えた素敵なデザインにするスタイルシートのテクニックを紹介します。 かわいいデザインからスタイリッシュなものまで、実装のアイデアが素晴らしいものばかりです。
![[CSS]素晴らしいテクニックが満載！囲いや区切りなどのラインを実装するスタイルシートのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/a545d68e72312cfa64f79c7d1932afa3d3078686/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014120205-19.png)
今年のネーミングルール #CSS設計
CSS Architecture Advent Calendar 2014 1日目の記事です。 CSSの設計をしていく上で大事なネーミングルール。 今年僕が関わったプロジェクトでのネーミングルールをゆるく紹介したいと思います。 こうやって名前をつけてました。基本となる設計思想はBEMです。 BEMについては、 CodeGrid を御覧ください。 ネーミングルールを決めるとき、区切り文字をハイフンかアンダースコアか、それとも混在か悩みましたが、とりあえず以下の様なルールでやっていくことにしました。 /*css*/ [Prefix] - [Block] - [Element] -- [[Modifier-Key] - [Modifiler-Value]] { /* Rule Set */ } 一つ一つ解説していきます。 Prefixまずは接頭辞です。 接頭辞としてプロジェクト名や世代などを付与
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Formas geométricas con CSS