これでもうCSSのクラス名は迷わない！BEMの命名規則をまとめたチートシート -BEM Naming Cheat Sheet
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
これでもうCSSのクラス名は迷わない！BEMの命名規則をまとめたチートシート -BEM Naming Cheat Sheet
これでもうCSSのクラス名は迷わない！BEMの命名規則をまとめたチートシート -BEM Naming Cheat Sheet
When it comes to finding the right class name, it can quickly drive you to despair. Even the most experienced CSS developers don't always find the right class name right away. This tool aims to help you to not get lost in the BEM cosmos by giving you naming-suggestions for some of the most common web components. If you still have no idea what BEM means, we have added some helpful links below. For
Modern alternatives to BEM
Brainstorming a handful of new CSS organization acronyms August 26, 2022 When I first heard Nicole Sullivan talk about OOCSS, I thought “Oooh, smart.” When I read Jonathan Snook’s riff on that idea in SMACSS I thought “Oooh, smart.” When I heard Harry Roberts say “never use IDs in your CSS files” I said “Oooh, smart.” But when BEM and roboclasses came around… I didn’t have the same reaction. I nev
REMM（レム）は、フロントエンド開発における「要素命名」と「CSS管理」、 「スタイリングアプローチ」の方法論です。 「Roots（ルーツ）」という考え方でHTML要素の命名を概念的にグルーピングすることによって、 CSS設計の自由さと、CSSプロパティ汚染に対する適度な堅牢性が得られます。
実務でCSSをガッツリ書くことになったので、復習の意を込めて自分用のチートシートを作成しました。 今回は現場でよく使われているBEMの書き方について調べたことのまとめです。 BEMとは BEMはBlock Element Modifierの略で、CSSを設計･命名していく手法です。 Block： 大枠となる独立した要素 Element： Block中の要素 Modifier： BlockやElementのスタイル 保守性の高さから1番多く使われている命名規則だと思います。 BEMを使う目的 BEMは名前の衝突を避けるために考案されたCSS設計です。 保守性の高さを解決するための手法は他にもあり、HTMLはシンプルがな書き方が求められますが、まだまだ決定打に欠けています。 BEMは見た目が汚いですが、シンプルを求めて面倒な目にあうよりは、少々汚くても扱いやすいBEMが多くの現場で採用されてい
CSS設計のBEMを１から理解してマスターしよう！
現場で採用されているRailsアプリケーションの設計方法に興味ありませんか？ 詳しくは 「Railsアプリケーション設計チュートリアル」 をお読みください
【CSS設計】ゼロからわかるBEM超入門
はじめに この記事はCSS設計 BEMについて初心者の方向けにわかりやすく解説した記事です。 できるだけ正確な情報を記述することを意識していますが、間違ったこともあると思います。なのでこの記事でざっと概要を掴んだ後は、BEM 公式ドキュメントを参照することをおすすめします。 BEMの基本「Block」「Element」「Modifier」 それでは、BEMの基本「Block」「Element」「Modifier」について解説していきます。 Block（ブロック）とは Blockとは「機能的に独立した再利用可能なモジュール」と定義されています。 難しいですね。 簡単にいうと、「どのページでも使い回すことができるパーツ」をブロックと呼んでいます。 Blockの命名規則 まずはブロックの命名規則を見ていきます。 クラス名はモジュールの「見た目（赤や大きい）」ではなく「それが何であるか（メニューや
劇場版BEM～BECOME HUMAN～ - Little Strange Software
どうも！LSSです！！ 昨日は久々に、１時間以上の尺のある劇場版アニメを観ました^^ amzn.to 劇場版BEM~BECOME HUMAN~ 初代リスペクト！ マンストール という話を あと余談 劇場版BEM~BECOME HUMAN~ たまたま、AmazonPrimeVideoを覗いてると見かけました。 Amazonプライム会員は、今なら無料で見られるやつですね。 タイトルから想像する通り、かの名作…いや、超名作「妖怪人間ベム」のリメイク作で、2020年の作品だそうです。 …と、これの前にTVアニメシリーズもあったらしく、そのシリーズの後の話だそうで。 始まりは、女性刑事の報告書という形で妖怪人間３体の紹介に始まります。 と、TVアニメシリーズを見ていない身としては何より「ベラ」が「少女」という設定になっているのにびっくりｗ 「ベロ」は子どもながら、ちょっとスカした感じになっていますが
吉本式BEM設計（BEM設計ベース）
吉本式BEM設計（BEM設計ベース）とは、より美しいソースコードにするためのマークアップエンジニア向けの技術コンテンツです。
５分でCSS設計規則「BEM」をおさらい フロントエンド BootstrapやVueを使用した開発で、CSSのクラス設計など強く意識することが少なかった今日このごろ。 たまたま一からスタイルを組む機会があり、改めてその設計規則であるBEMについておさらいしてみました。 BEMとはBlock Element Modifier の頭文字からきており、 Block -> 大きな括り Element -> ブロックの中の要素 Modifier -> ブロックやエレメントの変化 上記３つを用いた厳格な命名規則が特徴のCSS設計手法。 基本的なルール書き方Block__element--modifier の形で命名し、 それぞれアンダースコア２つとハイフン２つで区切る。 ＜例＞ <div class="Block"> <div class="Block__element"> <div class="B
Tailwind versus BEM
Spoilers! Like with so many things, the answer is “it depends.” How come? Read on. Tailwind and BEM are two approaches to writing and maintaining CSS. Comparing them is a bit like comparing apples and oranges, in that while they’re separate, they’re still fruit. This is to say that having an approach to manage your CSS—like any other code—is a good thing. Tailwind is the newer of the two, with the
BEM は優れた命名規則ですが、階層が深くなるとアンダースコアの区切りが雑になり、全体的に理解しにくいコードができあがります。 今回はこのページの構造を例に BEM と違う命名規則を考えます。ページのおおまかな構造は下のようになります。 <div class="header"> <div class="header__left"> </div> <div class="header__right"> </div> </div> BEM を使うとアンダースコアがたくさん必要になるかもしれない おかしなコード <div class="header"> <div class="header__left"> <div class="header__left__logo"></div> <div class="header__left__categories"></div> </div> <div
■テレビ東京・テレビ愛知 8月4日（日）第2話再放送 8月11日（日）第3話再放送 8月18日（日）第4話放送 ■テレビ大阪 8月5日（月）第2話再放送 8月12日（月）第3話再放送 8月19日（月）第4話放送 ■ＢＳテレ東 8月7日（水）放送休止 8月14日（水）放送休止 8月21日（水）第4話放送 ■AT-X 8月9日（金）放送休止 8月16日（金）放送休止 8月23日（金）第4話放送 ※8月12日(月)・15日(木)／8月19日(月)・22日(木)のリピート放送は休止 8月26日(月)・29日(月)は4話のリピート放送となります。
今回は今さら聞けないBEMの基本ということで、CSS設計にまつわるエントリです。 「この要素にはなんてクラス名をつけたらいいんだ・・・」という悩みはWebコーダーが必ずぶつかる課題だと思います。 その時は自分流のルールでいいかもしれませんが、後で編集するときやチームメンバーに読んでもらう時にわかりにくくなってしまうこともしばしば・・・。 だから、命名規則には広く普及しているCSS設計思想を流用するのがいいんです。 制作会社ではBEMや他の設計思想をベースにしたコーディング規約が設定されていることも珍しくないでしょう。 今回は初心者向けにBEMという命名規則の基本をご紹介します。 BEMとは CSS設計思想にはOOCSS、BEM、SMACSS、MCSS、FLOCSS、FLOUなどいくつかありますが、その中でもBEMはクラス命名規則として後続のCSS設計思想に取り込まれている有名なものです。
[BEM設計]うわああああ三(卍^o^)卍ってならないBEMの書き方をワイヤーフレーム使って整理するぞ（その1） - Qiita
この記事について BEMを使ってコーディングしていくとき、 コンテンツ量の多いサイトになると毎回のように混乱してうわあああああああああ三(卍^o^)卍ﾄﾞｩﾙﾙﾙﾙ ってなるので 自分の頭の中をまとめる意味で簡単なワイヤーフレームを使って解説するぞ〜〜〜！！！！！！ BEMって何？って人は先にこっちを読んでな↓ [HTML/SCSS]BEM設計を図を使って解説してみる さて、今回は下のワイヤーフレームを見ながらBEMるぞ。 なんか全部について解説してたらはちゃめちゃな長さになってしまったので、2回にわけてお送りします。 今回はheaderとfooterをいざBEMる。 かかってこ〜〜〜〜い 想定としてはコーポレイトサイトっぽい感じ。 いくつかページが存在してて、ヘッダーとフッターは共通化してなって言われてるていでやってみるぞい。 headerってBlockつくるぞい ヘッダーに関してはhe
![[BEM設計]うわああああ三(卍^o^)卍ってならないBEMの書き方をワイヤーフレーム使って整理するぞ（その1） - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/4d64fb55ab46239d3403d2de4f506d67d5035380/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JTVCQkVNJUU4JUE4JUFEJUU4JUE4JTg4JTVEJUUzJTgxJTg2JUUzJTgyJThGJUUzJTgxJTgyJUUzJTgxJTgyJUUzJTgxJTgyJUUzJTgxJTgyJUU0JUI4JTg5JTI4JUU1JThEJThEJTVFbyU1RSUyOSVFNSU4RCU4RCVFMyU4MSVBMyVFMyU4MSVBNiVFMyU4MSVBQSVFMyU4MiU4OSVFMyU4MSVBQSVFMyU4MSU4NEJFTSVFMyU4MSVBRSVFNiU5QiVCOCVFMyU4MSU4RCVFNiU5NiVCOSVFMyU4MiU5MiVFMyU4MyVBRiVFMyU4MiVBNCVFMyU4MyVBNCVFMyU4MyVCQyVFMyU4MyU5NSVFMyU4MyVBQyVFMyU4MyVCQyVFMyU4MyVBMCVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSVBNiVFNiU5NSVCNCVFNyU5MCU4NiVFMyU4MSU5OSVFMyU4MiU4QiVFMyU4MSU5RSVFRiVCQyU4OCVFMyU4MSU5RCVFMyU4MSVBRTElRUYlQkMlODkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTE0NjVkODNlMTQ0NzJlMjc5OTU5Yzg4NzRkN2E2N2Nm%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbWFtZV9oYXNoYmlsbCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NDliN2YwMGYxY2U3YjJkMjQ3MWU2MWFhNzAyMDRiNzQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Da7c56850d18e0cf9241cd408d1f64f39)
FLOCSSとBEMを理解する - bagelee（ベーグリー）
はじめに 本記事では、FLOCSSとBEMについて整理して学んでいきます！ 私はマークアップをする際に、CSS/Sassのクラス名の命名に悩んでしまうことがあります。 一緒にFLOCSSとBEMをマスターして、より分かりやすい記述ができるようになりましょう！ FLOCSSとは FLOCSS（Foundation Layout Object CSS）は、ファイルやディレクトリの構成だけでなく、命名のルールもMindBEMding（BEM）を用いて決められている設計思想で、導入することで混乱の少ない記述になるとされています。 FLOCSSの構造 Foundation デフォルトとなるスタイルのファイル（reset.scssやfont.scssなど） Layout サイト全体のレイアウトに関わる要素のファイル（header.scssやfooter.scssなど） Object 使い回す要素のファ
class名の命名規則BEMのルールとカスタマイズ | ジョブテク
よく使われるclass名の命名規則 HTMLにclass名をつける時の代表的な命名規則には以下の3つがあります。今回はこの中のBEMについて紹介します。 BEM（Block-Element-Modifier：ベム） OOCSS（Object Oriented CSS：オーオーシーエスエス） SMACSS（Scalable and Modular Architecture for CSS：スマックス） BEMとは BEM（ベム）はHTML要素を「Block」「Element」「Modifier」に分けてclass名をつけます。この3つの頭文字を使って「BEM」と呼びます。 BEMのメリット パーツ単位でデザインを管理する為、変更時に他のパーツへの影響を考慮しなくていい セレクタを入れ子にしないので優先度問題が発生しにくい BEMを採用している会社が多い BEMのデメリット class名が長い
坂本真綾 ニューシングル「宇宙の記憶」 7.24 Release TVアニメ『BEM』オープニングテーマ VTCL-35303 ￥1,512(税込) 昨夏リリースされた、シングル「逆光」(スマートフォン向けゲーム「Fate/Grand Order」第2部主題歌)が大ヒットし、続く、30枚目となるニューシングル『宇宙の記憶』のリリースが決定した！記念すべきリリースとなる本作は、7月より放送開始予定のTVアニメ「BEM」のオープニングテーマ。 本作はなんと、“椎名林檎”がプロデュース！作詞、作曲、編曲を椎名林檎、演奏はTVアニメ「BEM」の劇伴も手がけるSOIL＆“PIMP”SESSIONSが参加。異色とも言える今回の組み合わせ、どのような楽曲に仕上がるのかをぜひご注目いただきたい。 また、カップリングには、坂本自身が作詞・作曲を手がける新曲「序曲」と、昨年坂本がカヴァーで参加したth
BLOG ブログ ホーム ブログ css設計・命名規則の歴史(BEM・OOCSS・SMACSS・FLOCSS・tailwindcss) 前置き css設計・命名規則の件ですが、マークアップする上で避けては通れない比較的面倒な悩み事です。 案件によってはクライアント様側からのルールが決められている場合もあり、その場合はそのルールに則って構築すれば済むことですが、一般的にはマークアップする方にお任せされることも多いですね。 その場合、個人の好みだったり、その時の流行りなどから、悪く言えば適当に設計されることも多いかと思います。 なんだったら「css設計ってナニ？」的な場合も多々見受けられます… 新規構築も、運用も1人で全て行うような案件であれば問題ないとも言えますが、チームでの構築や運用は別の方(もしくは別会社の方)が行うような場合は、その設計自体や命名規則などがハッキリとしたルールに則ってい
BEM #1 WATER アニメ/動画 - ニコニコ動画
BEM 湾港都市「リブラシティ」。 政治・経済・文化の中心であり、街の“富”が結集した「アッパーサイド」と、汚職や犯罪に溢れ、人々がお互いを疑い合わざるを得ない「アウドサイド」、その両エリアを分かつ巨大な運河と、一本の「橋」。 これらにより構成される、まさに人間の“差別意識”が顕在化した様な街である。...
SCSSのファイル設計について Vol.1 SCSSのファイル設計について、解説します。 ディレクトリ構造は次のようなテンプレートとなります。 - scss - base - mixin - module - page - pulgins - setting style.scss それぞれのディレクトリの役割は、次のようになります。 baseディレクトリ ベースとなるスタイルが定義さているSCSSファイルを格納するディレクトリです。 mixinディレクトリ mixinが定義されているSCSSファイルを格納するディレクトリです。 moduleディレクトリ サイト共通で使用するモジュール別にスタイルが定義さているSCSSファイルを格納するディレクトリです。 pageディレクトリ ページ単位で使用するスタイルが定義さているSCSSファイルを格納するディレクトリです。 pulginsディレクトリ
＜「妖怪人間ベム」50周年記念作品＞ あの「妖怪人間ベム」が新作アニメ―ション『BEM』として蘇る！ 2019年7月から放送開始！ テレビ東京にて7月14日放送開始 毎週日曜深夜１時35分 テレビ大阪にて７月15日放送開始 毎週月曜深夜1時05分 テレビ愛知にて７月14日放送開始 毎週日曜深夜１時35分 BSテレ東にて7月17日放送開始 毎週水曜深夜0時30分 ※放送日時は変更になる可能性がございます STAFF 原作：ADKエモーションズ 企画：NAS プロジェクト協力：Production I.G 監督：小高義規 シリーズ構成：冨岡淳広 キャラクター原案：村田蓮爾 キャラクターデザイン：砂川正和 音楽：SOIL&"PIMP"SESSIONS 未知瑠 音楽制作：フライングドッグ アニメーション制作：ランドック・スタジオ CAST ベム：小西克幸
数年間、BEMとSassの「&__Element」記法を使ってコーディングしていました。しかしあるきっかけでその記法を使わない派に転向したところ、想像していたのとは違うメリットを感じました。その理由などをご紹介します。 はじめに（「&__Element」記法とは） ※「&__Element」記法という言葉は造語です。 CSS設計手法のBEMと、Sassの&（親参照）を組み合わせて、以下のように書けます。
Webプログラマーといえど、実際にはロジック部分だけ触っているわけではなく、フロントエンド（CSS）も触ります。 そこで、つまずくのが CSS のプロパティ名の付け方。 Laravel ではコントローラやモデルの命名規則がありますよね。 命名規則について 同様に CSS のプロパティ名も命名規則があります。 最もメジャーな CSS の命名規則といえば、BEM という記法になります。 今回は、CSS の命名規則（BEM記法）についてエントリーします。 BEM記法 Block Element Modifier の略で、Webサイトのコンポーネント化のための厳密なClass命名規則です。 Block：大枠となる独立した要素 Element：Blockを構成する要素 Modifier：基本のスタイルから派生させる場合に追加 の３つで構成し、CSSのプロパティ名を命名します。 BEM という名前は上
SCSSのファイル設計（BEM設計からFLOCSS設計に） 昨年(2018年)の5月ごろに、吉本式BEM設計という考え方のガイドラインコンテンツをまとめました。 一部の表現の甘さなどにより予期せぬ方向で話題になってしまいましたが、設計の考え方に関しては、それなりに評価していただけたのかなと思っています。 実は、吉本式BEM設計のガイドラインコンテンツを発信した頃には既に、実務では吉本式BEM設計は採用しておらず、FLOCSS設計の考え方で独自にカスタマイズしたSCSSファイルの設計でやっていました。 誤解のないように補足しておくと、吉本式BEM設計は長年BEM設計をやってきた中でカスタマイズしたものですので、完成度はそれなりに高いと思っており、また美しいファイル設計になっていると自負しています。 その中でFLOCSS設計の考え方に移行した理由は、BEM設計の考え方以外にも実務として経験して
SASS(SCSS)とBEMのお話 - Qiita
言いたいこと 今更ながら、CSSを便利に活用する為にSCSSとBEM記法を活用してみよう sass、scssとは CSSのアレなところを何とかしようという目的で作成されたメタ言語 Syntactically(構文が) Awesome(イケてる) Style Sheets の略 ネスト、変数、ミックスイン、セレクタ継承な便利な拡張を使うことができるようになる SCSS（Sassy CSS）構文型とSASS構文型がある //CSS .btn { display: block; } .btn span { display: inline-block; } //SASS .btn display: block span display: inline-block //SCSS .btn { display: block; span { display: inline-block; } } 最近のト
BEM #2 LIAR アニメ/動画 - ニコニコ動画
BEM 湾港都市「リブラシティ」。 政治・経済・文化の中心であり、街の“富”が結集した「アッパーサイド」と、汚職や犯罪に溢れ、人々がお互いを疑い合わざるを得ない「アウドサイド」、その両エリアを分かつ巨大な運河と、一本の「橋」。 これらにより構成される、まさに人間の“差別意識”が顕在化した様な街である。...
BEM 壁紙 | スマポ
スマポではアニメやアイドル、イケメン・俳優さん達の画像。iPhoneなどのスマホ(スマートフォン)用の待ち受け・壁紙を紹介しています。
SCSSのファイル設計について Vol.2 前回の記事の続きです、SCSSファイル設計について解説していきます。 必要なディレクトリ構成は次になります。 - scss - base - mixin - module - page - pulgins - setting style.scss 前回の記事で、baseディレクトリ、mixinディレクトリ、moduleディレクトリについて解説しました。 baseディレクトリに関しては、リセットCSS用の_reset.scssとサイト全体のベースとなる_base.scssが格納されます。 mixinディレクトリには、別Blockで同じスタイルが必要になった場合にmixinを定義するというルールで、mixinファイルを作成します。 moduleディレクトリには、サイト共通で使用するモジュール単位（Block単位）で定義されます。 また、吉本式BEM設
クラス命名規則 : クラス名（クラス設計）ルール ここからが吉本式BEM設計（BEM設計ベース）のメインになります。 まずは、基本設計についてですが、ベースとなる考え方はBEM設計となります。 BEM設計について知識がない場合、とても素晴らしい概念ですので、ぜひ習得してください。 ここではBEM設計については詳しく解説しません。 ある程度知識がある、または実務でBEM設計で構築しているというマークアップエンジニアをターゲットとします。 少しだけここで（吉本式BEM設計（BEM設計ベース）的に）解説すると、BEM設計とは「ブロック（Block）」「エレメント（Element）」「モディファイア（Modifier）」の3つの概念があります。 ブロック（Block） いくつかのエレメントで構成されたアウトライン要素。この要素は、独立されており、ページのどこに配置しても機能する（CSSが正しく機能
WEBサイト制作をしていると避けて通れないのが修正やコンテンツの追加作業です。 また一人で一つのWEBサイトを作るときもあれば、チームで作業するときもあります。 自分にはわかりやすくても他の人にはわかりづらいようなコーディング方法ではチームメンバーのパフォーマンスを引き出せません。 今回はコーディングルールの一つとしてBEM（ベム）とFLOCSS（フロックス）について考えてみたいと思います。 BEM記法について 「BEM」は Block（ブロック）Element（要素）Modifier（装飾） の頭文字をつなげたもので、CSSの命名の規則をBlock（ブロック）、Element（要素）、Modifier（装飾）を合わせて命名します。 【block】__【element】–【modifier】 のようにBlockとElementをアンダースコアを二つで繋ぎElementとModifierをハ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BEM Naming Cheat Sheet by 9elements
REMM｜BEMとOOCSSの混在が可能なCSS設計・コーディングメソッド
【命名規則】BEMを使った書き方についてまとめてみた【CSS】 - Qiita
５分でCSS設計規則「BEM」をおさらい | エンジニアBLOG
BEMから脱出したHTMLとCSSのコーディング規約・命名規則と例（2021年最新版） - Irohabook
妖怪人間ベム新作アニメ「BEM」公式サイト NEWS
【CSS設計】今さら聞けないBEMの基本【初心者・入門】 – N.Y.C. Tech Library
坂本真綾 - 宇宙の記憶（Short Ver.）_TVアニメ『BEM』オープニングテーマ
css設計・命名規則の歴史(BEM・OOCSS・SMACSS・FLOCSS・tailwindcss)
SCSSのファイル設計について Vol.1 吉本式BEM設計（BEM設計ベース）
TVアニメ『BEM』本PV 2019年7月から放送開始！
BEMとSassの「&__Element」記法を使わない派に転向した理由
CSSプロパティ名の命名規則（BEM記法） - Laravel学習帳
SCSSのファイル設計（BEM設計からFLOCSS設計に） | 吉本式 Web制作のコーディングガイドライン
SCSSのファイル設計について Vol.2 吉本式BEM設計（BEM設計ベース）
クラス命名規則 | クラス名（クラス設計）ルール | 吉本式BEM設計（BEM設計ベース）
修正に強いコーディング手法【BEM記法とFLOCSS】 | マツイウェブワークス ｜新潟県十日町市のWEB制作事務所
www.msn.com
rose0502blog.com
www.sakurajimusyo.com
note.com/goetche_chan
togetter.com
konomi.st.coresv.net