もりのくまさん

今回はマークダウン記法について紹介します。ブログやコンテンツなどで『もっと効率的に文章を書きたい！』というときに、この効果が発揮されます。 ぜひ一度チャレンジをしてマークダウン記法をマスターしましょう 主も最近この書き方を始めて、生産性が上がりました！ マークダウン記法の書き方 基本的には、『〇〇』+ 『スペース』の順で書くことになります。 例：見出しh1 # + スペース ※スペースを押さずに変換されるものもあります 見出し # = 見出しh1 ## = 見出しh2 ### = 見出しh3 ... ## ...

Chromeのおすすめの拡張機能があれば教えて下さい〜！ 今回はオススメの設定も含めて紹介するね！もりのくま Web制作を行うにあたって拡張機能を使うことは大きな便宜となります。今回はWebデザイナー、Webコーダーにとってオススメな便利ツールをご紹介しますのでご欄ください！ 拡張機能 What Font サイトで使われている、フォントを調べることができます。またフォントのstyle、Weight、Size，カラー等も調べることが可能。アイコンをクリックして、そのフォントをクリックすると表示されます。 W ...

何度もカーソル移動や、選択するのはめんどくさい〜！ そんな時はショートカットを使うといいよ！もりのくま 今回は実践でよく使う 操作についてご紹介します。 マルチカーソルとは？ マルチカーソルとは言葉の通り、カーソルを複数にしたりすること。 ・・・と言っても、どういうときに使うのか？ 説明するより、実際に見てもらったほうが早いので、早速行きましょう〜！ macを前提として説明しています。windowsの方は『 cmd 』→ 『 Ctrl 』『 opt 』→ 『 Alt 』 マルチカーソルの操作方法 クリック ...

もっと量を少なくしてコードを打ちたい〜。。。 そんな時はEmmet記法で書くと早くなるよ！もりのくま 今回はEmmet記述についてご紹介します。 Visual Studio Code エディタはVSCodeを前提に説明します。 こちらはデフォルトでEmmet機能が使えます。 もし他のエディタをご使用の場合は、Emmentを使えるように設定してください。 VSCodeのダウンロードはこちらから。 Emmetとは？ Emmetとは、コードを省略して記述できる書き方です。 以下のように短縮して記述できます。 こ ...

毎回同じコードを打ちたくない〜！ そんな時はコードスニペットを登録するよいいよ！もりのくま VSCodeにはスニペットという、『コードの登録機能』があります。 今回はその設定方法についてご紹介します。 スニペットの登録の手順 はじめにスニペットを登録するため、登録したい言語のjsonファイルを開きます ※今回はhtmlにスニペットを登録します。他にもcss,scss,javascript,phpのjsonファイルなどあります。 『Code』→『基本設定』→『ユーザースニペット』 ※windowsの場合は『 ...

今回は、CSSで要素を縦の中央揃えのやり方をまとめました。 実際のコーディングでも頻繁に出てくる部分ですのでしっかりと抑えおきましょう。 テキスト要素を縦の中央に配置する場合 line-height （1行のみの場合） line-height テキストが１行の場合の縦中央に配置します。line-heightはテキストの行間を指定するプロパティです。テキストを囲んでいる高さと同じ高さを指定することで上下中央となります。 See the Pen 上下中央 line-height by morikuma (@m ...

今回はテキストとブロック要素の、2点に分けてご紹介します。 それぞれ指定の仕方が異なりますので、抑えておきたいポイントです！ テキスト要素を上下左右中央に配置する場合 line-height text-align を組み合わせる 縦はheightとline-heightを同じ高さに揃えて縦中央に調整。横はtext-align: centerで左右中央に配置します。 See the Pen テキスト　上下左右中央寄せ by morikuma (@morikuma) on CodePen. table-cel ...

今回は、CSSで要素を左右中央に寄せるやり方をまとめました。 実際のコーディングでも頻繁に出てくる部分ですのでしっかりと抑えおきましょう。 text-align:center text-align: center; インライン要素であるテキストや画像は、親のブロック要素に指定すると中央寄せになります。※text-align:centerは子要素にも継承されます。 See the Pen 左右中央揃え by morikuma (@morikuma) on CodePen. margin: 0 auto ma ...

参考サイト こちらはローディングアニメーション参考サイト①の続編です。引き続きご紹介します。 CSSPIN CSSPIN Github ダウンロードの手順は以下の通りです。 ①Githubからcsspin-master.zipをダウンロード。 ②csspin-master.zip解凍後に、csspin.cssファイルをローカルフォルダに入れる。index.htmlでcsspin.cssファイルを読み込んで下さい。 <link rel="stylesheet" href=&quot ...

参考サイト ローディングアニメーションの引き出しを増やしたいけど、どうすれば良いのだろう・・・？ アニメーションの数を増やしたいけど、ゼロから作るのって難しいですよね。。 そんなときはアニメーションのソースを配布されているサイトを活用しましょう！ 今回は10個のサイトをご紹介します。   Creating a Collection of CSS3 Animated Pre-loaders Creating a Collection of CSS3 Animated Pre-loaders こちら ...