ジャーナルモジュール - DESIGN JOURNAL - 株式会社モンスターラボ

ACO Journal モジュール一覧

h2 フリーアドレス、スタンディングテーブル、照明などなど。ACO的オフィス改善アイデア大公開

h3 多くのお金と広いスペースがあれば簡単ですが、企業である以上予算やスペースにある程度の制限が出てくる

<div class="tableOfContents">
<h2><span>目次</span></h2>
<ul>
<li><a href="#contents01">2021年最初のA.C.O. JAMがオンラインで開催されました</a></li>
<li><a href="#contents02">#1 新入社員自己紹介</a></li>
<li><a href="#contents03">#2 グローバルクリエイティブ部について</a></li>
<li><a href="#contents04">#3 事業推進室について</a></li>
<li><a href="#contents05">運営チームからのコメント：GC部とともに、今年度から新設された事業推進室について</a></li>
</ul>
</div>

2021年最初のA.C.O. JAMがオンラインで開催されましたアンカー注意点

class=”anchorSection” id=”アンカーID”がdivに追加されます。2021年最初のA.C.O. JAMがオンラインで開催されました2021年最初のA.C.O. JAMがオンラインで開催されました2021年最初のA.C.O. JAMがオンラインで開催されました2021年最初のA.C.O. JAMがオンラインで開催されました

<div class="anchorSection" id="contents01">
<h2>2021年最初のA.C.O. JAMがオンラインで開催されました</h2>
<p>class="anchorSection" id="アンカーID"がdivに追加されます。2021年最初のA.C.O. JAMがオンラインで開催されました2021年最初のA.C.O. JAMがオンラインで開催されました2021年最初のA.C.O. JAMがオンラインで開催されました2021年最初のA.C.O. JAMがオンラインで開催されました</p>
</div>

Yahoo!ニュース

Yahoo!ニュース

https://news.yahoo.co.jp

Yahoo!ニュースは、新聞・通信社が配信するニュースのほか、映像、雑誌や個人の書き手が執筆する記事など多種多様なニュースを掲載しています。

[a] ↑リンクカードのボタンを一回押してURLを入れてもう一度押すと閉じタグが自動的に入ります。

p こんにちは、UX/IA部の長谷川です。質の高い仕事をする上で、良いオフィスは必要不可欠なもの。ACOのオフィスは、この春に拡張工事を行いました。 ACOのオフィスにいらしていただいた方からは、よくオシャレなオフィスですねとお褒めの言葉をいただきます。

実はただ [a] オシャレなだけではなく、ぼくたち [a target:blank] メンバーが働きやすくするための [em] たくさんの工夫やノウハウが凝縮されています。

p-small 通常、会議というとある程度の大きさの空間とテーブル、そして人数分の椅子が必要ですが、スタンディングスタイルにすることで椅子が不要になります。

<h2>テキストテキストテキスト</h2>
<h3>テキストテキストテキスト</h3>
<p>テキストテキストテキスト</p>
<p>[a] <a href="">リンク</a> [a target:blank] <a class="linkBlank4" target="_blank" href="">外部リンク</a> [em] <em>ボールド</em></p>

画像モジュール

S（max-height: 300px）

imgに【brd】classをつけると画像に枠線をつけることができます

<div class="imgS">
<img class="brd" src="ImgURL" alt="">
<p class="caption">キャプション</p>
</div>

M（width: 75%）

キャプション

<div class="imgM">
<img src="ImgURL.jpg" alt="">
<p class="caption">キャプション</p>
</div>

L（width: 100%）

キャプション

<div class="imgL">
<img src="ImgURL.jpg" alt="">
<p class="caption">キャプション</p>
</div>

XL（width: 100vw）

キャプション

<div class="imgXL"><img src="ImgURL.jpg" alt=""></div>
<p class="caption">キャプション</p>

2カラム

キャプション

h2タイトル

実はただオシャレなだけではなく、ぼくたちメンバーが働きやすくするためのたくさんの工夫やノウハウが凝縮されています。

<div class="clearfix"><div class="col2"><div class="right">
<img src="ImgURL.jpg" alt="">
<p class="caption">キャプション</p>
</div>
<div class="txL">
<p>テキストテキストテキスト</p>
</div></div></div>

キャプション

h3タイトル

実はただオシャレなだけではなく、ぼくたちメンバーが働きやすくするためのたくさんの工夫やノウハウが凝縮されています。

<div class="clearfix"><div class="col2"><div class="left">
<img src="ImgURL.jpg" alt="">
<p class="caption">キャプション</p>
</div><div class="txR">
<p>テキストテキストテキスト</p>
</div></div></div>

ゲスト

Guest

: Iwata Saki

岩田紗季・武蔵野美術大学基礎デザイン学科卒業。制作会社にてランディングサイトやコーポレートサイトなどのデザインを経て現在に至る。デザイン担当。デザイン部所属。

Guest

Iwata Saki

岩田紗季・武蔵野美術大学基礎デザイン学科卒業。制作会社にてランディングサイトやコーポレートサイトなどのデザインを経て現在に至る。デザイン担当。デザイン部所属。

See Articles

Masashi Ikeno

池野将司・武蔵野美術大学デザイン情報学科卒業。デザイン制作会社にて企業サイトや紙媒体のデザインを経て、現在に至る。

<div class="guest">
<h2>Guest</h2>
<dl>
<dt><img src="ImgURL.jpg" alt=""></dt>
<dd>
<h3>EnglishName</h3>
<p>日本語氏名・肩書や紹介文など</p>
</dd>
</dl>
</div>

<div class="guest">
<h2>Guest</h2>
<dl>
<dt><img src="ImgURL.jpg" alt=""></dt>
<dd>
<h3>EnglishName</h3>
<p>日本語氏名・肩書や紹介文など</p>
<p class="linkArrowRight6 fontCM"><a href="">TextLink</a></p>
</dd>
<dt><img src="ImgURL.jpg" alt=""></dt>
<dd>
<h3>EnglishName</h3>
<p>日本語氏名・肩書や紹介文など</p>
</dd>
</dl>
</div>

References

鶏肉、じゃがいも、玉ねぎ、にんじんは一口大に切る。
厚手の鍋にサラダ油を熱し、(1)の鶏肉、じゃがいも、玉ねぎ、にんじんと、トマトをよく炒める。
水を加え、沸騰したらあくを取り、弱火～中火で材料が柔らかくなるまで約15分煮込む。
いったん火を止め、ルウを割り入れて溶かし、再び弱火でとろみがつくまで約10分煮込む。

<ul class="bullet">
<li>テキストテキストテキスト</li>
<li>テキストテキストテキスト</li>
<li>テキストテキストテキスト</li>
</ul>

1鶏肉、じゃがいも、玉ねぎ、にんじんは一口大に切る。
2厚手の鍋にサラダ油を熱し、(1)の鶏肉、じゃがいも、玉ねぎ、にんじんと、トマトをよく炒める。
3水を加え、沸騰したらあくを取り、弱火～中火で材料が柔らかくなるまで約15分煮込む。
4いったん火を止め、ルウを割り入れて溶かし、再び弱火でとろみがつくまで約10分煮込む。

<ul class="number">
<li><span>1</span>テキストテキストテキスト</li>
<li><span>2</span>テキストテキストテキスト</li>
<li><span>3</span>テキストテキストテキスト</li>
</ul>

引用

ウェブは人類史上最大の規模で個人間の情報交換を可能とした。ウェブを通して、地球全体で多種多様な情報を自由に交換することができるようになったのである。

Wikipedia World wide web

<div class="qoute"><span style="color:rgba(0,0,0,0.12);"></span>
<p>テキストテキストテキスト</p>
<p class="text-right mt-1 txOpacity50 p-small"><a href="URL">引用元</a></p>
</div>

会話

JB: 昔から、ジャンル問わず自他共に認める大の漫画好きでした。漫画をきっかけに人の新しい一面が見られることもあるので、ACOでも漫画について語らう場を開きたいと思ってました。

鈴木: それではさっそく取材に移りたいのですが、今回「イチオシ漫画特集」を書きたいと思ったきっかけを教えてください。

<div class="clearfix mt-4"><dl class="talkA">
<dt><img src="ImgURL.jpg" alt=""><br>名前</dt>
<dd>
<p>最初の会話モジュールだけclass【mt-4】がつきます</p>
</dd></dl></div>

<div class="clearfix"><dl class="talkB">
<dt><img src="ImgURL.jpg" alt=""><br>名前</dt>
<dd>
<p>テキストテキストテキスト</p>
</dd></dl></div>

<div class="clearfix"><dl class="talkA">
<dt><img src="ImgURL.jpg" alt=""><br>名前</dt>
<dd>
<p>テキストテキストテキスト</p>
</dd></dl></div>

バナー

<div class="bannerWrap"><div class="banner">
<p>ACOでは、コミュニケーション戦略をつくるお手伝いをしています。<br>
興味があればぜひ、<a href="https://aco-tokyo.com/contact/service-contact/">お問い合わせください。</a></p>
</div>
<p class="img"><img src="https://design-journal.monstar-lab.com/wp-content/uploads/2018/06/module_bannar_contact.png" width="219" alt=""></p>
</div>

<div class="bannerWrap"><div class="banner">
<p>ACOでは、一緒に働きたい人を募集しています。<br>
<a href="https://www.wantedly.com/companies/aco/projects">Wantedlyから応募</a>お待ちしています</p>
</div>
<p class="img"><img src="https://design-journal.monstar-lab.com/wp-content/uploads/2017/03/module_idea.png" width="219" alt=""></p>
</div>

iframe（Youtube）

キャプション

<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/YNXJ2KQ8crg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<p class="caption">キャプション</p>
</div>

色変更

h2 フリーアドレス、スタンディングテーブル、照明などなど。ACO的オフィス改善アイデア大公開

h3 多くのお金と広いスペースがあれば簡単ですが、企業である以上予算やスペースにある程度の制限が出てくる

こんにちは、UX/IA部の長谷川です。質の高い仕事をする上で、良いオフィスは必要不可欠なもの。ACOのオフィスは、この春に拡張工事を行いました。 ACOのオフィスにいらしていただいた方からは、よくオシャレなオフィスですねとお褒めの言葉をいただきます。

実はただオシャレなだけではなく、ぼくたちメンバーが働きやすくするためのたくさんの工夫やノウハウが凝縮されています。

<div class="wideBox" style="background-color: #FFFBCB（背景色）;">
<div class="container" style="color:#256EC2（文字色）;">
<p>テキストテキストテキスト</p>
</div></div>

matgin-top調整用class

pとpの間に余白をつけたい時や、画像の上の余白をツメたい時などに使ってください

mt-8 マージントップ6rem

mt-7 マージントップ5rem

mt-6 マージントップ4rem

mt-5 マージントップ3rem

mt-4 マージントップ1.5rem

mt-3 マージントップ1rem

mt-2 マージントップ0.5rem

mt-1 マージントップ0.25rem

<p class="mt-8">6rem</p>
<p class="mt-7">5rem</p>
<p class="mt-6">4rem</p>
<p class="mt-5">3rem</p>
<p class="mt-4">1.5rem</p>
<p class="mt-3">1rem</p>
<p class="mt-2">0.5rem</p>
<p class="mt-1">0.25rem</p>

補足

こちらのモジュールはこちらからアクセスできます。
https://design-journal.monstar-lab.com/wp-admin/post.php?post=17369&action=edit

※モジュールcssを調整する際は
https://design-journal.monstar-lab.com/wp-content/themes/aco/common/css/module.css
ftps://aco-tokyo.xsrv.jp/aco-tokyo.com/public_html/wp-aco/wp-content/themes/aco/common/css/module.css
こちらを修正・追加下さい。

A.C.O. JournalはMonstarlab Design Journalにリ
ニューアルしました。

How can we help?

お悩みのことがあれば、お気軽にお問い合わせください。

お問い合わせ

ACO Journal モジュール一覧

h2 フリーアドレス、スタンディングテーブル、照明などなど。ACO的オフィス改善アイデア大公開

h3 多くのお金と広いスペースがあれば簡単ですが、企業である以上予算やスペースにある程度の制限が出てくる

目次

2021年最初のA.C.O. JAMがオンラインで開催されましたアンカー注意点

画像モジュール

2カラム

h2タイトル

h3タイトル

ゲスト

Guest

Iwata Saki

Guest

Iwata Saki

Masashi Ikeno

関連リンク

References

Related Links

リスト

引用

会話

バナー

iframe（Youtube）

色変更

h2 フリーアドレス、スタンディングテーブル、照明などなど。ACO的オフィス改善アイデア大公開

h3 多くのお金と広いスペースがあれば簡単ですが、企業である以上予算やスペースにある程度の制限が出てくる

matgin-top調整用class

補足

How can we help?

ACO Journal モジュール一覧

h2 フリーアドレス、スタンディングテーブル、照明などなど。ACO的オフィス改善アイデア大公開

h3 多くのお金と広いスペースがあれば簡単ですが、企業である以上予算やスペースにある程度の制限が出てくる

目次

2021年最初のA.C.O. JAMがオンラインで開催されましたアンカー注意点

画像モジュール

2カラム

h2タイトル

h3タイトル

ゲスト

Guest

Iwata Saki

Guest

Iwata Saki

Masashi Ikeno

関連リンク

References

Related Links

リスト

引用

会話

バナー

iframe（Youtube）

色変更

h2 フリーアドレス、スタンディングテーブル、照明などなど。ACO的オフィス改善アイデア大公開

h3 多くのお金と広いスペースがあれば簡単ですが、企業である以上予算やスペースにある程度の制限が出てくる

matgin-top調整用class

補足

How can we help?

Overview