コーディング flexboxで上下左右中央揃えをするやり方
こういうのやりたいとき実際にコード書いてみる。 真ん中.flexbox-center { display: flex; /* 子要素をflexboxで揃える */ flex-direction: column; /* 子要素をflexbox...
CSS
コーディング 
コーディング 【Sass（SCSS）】Koalaの基本的な使い方をやさしく解説【コーディング効率化】
CSSコーディングを効率化するためのツールに「Sass（SCSS）」がありますよね。でも、普通に書くだけでは使えず変換作業が必要です。※変換作業→コンパイルといいます。コンパイルするためには通常、黒い画面（ターミナル）と呼ばれるソフトを起動...
コーディング 【CSS】要素を中央に配置する方法（上下・中央）
コーディングをしていく中で、テキストや画像を中央に配置するデザインと、なにかしらの要素を中央に配置することがよくあります。でもコーディングを始めたばかりだと、どのようにcssを書けばいいのか迷うこともあります。この記事は以下のような人の役に...
コーディング 【初心者必見】まずはこれだけ！デベロッパーツールの使い方【chrome】
web制作に欠かせないのが、GoogleChromeのデベロッパーツール（開発者ツール）。CSSやJavaScriptが上手く反映されないときに使ったり、他のサイトのソースコードを覗いたり、使い方はさまざまです。最初は少し難しく思うかもしれ...
コーディング 【コーディング】今さら聞けない！レスポンシブデザインの対応方法
皆さん、レスポンシブwebデザインに対応したコーディング、できますか？ちょっと前まではやりますか？とお客さんに確認をとって対応していましたが、レスポンシブコーディングは今ではあたりまえになっています。でもコーディングを始めたばかりだと、レス...
コーディング 【htmlコーディング】現役コーダーが選んだ必須ツール11選
今回は私が普段業務で使用しているアプリケーション、ツールのご紹介です。デザイン関係Adobe製品Web業界ではAdobe製品ないと生きていけません。Photoshop、Illustratorがないと仕事になりません。それくらい大事な便利なソ...
コーディング 【初心者向け】CSS擬似クラスnth-child、nth-of-typeの違いを解説
「nth-child」、「nth-of-type」と似たような処理の擬似クラスがあります。どちらも「n番目の要素」に処理を行う擬似クラスになります。どういう違いがあるか解説してきます。「nth-child」と「nth-of-type」nth...
コーディング 【HTML/CSS】初心者コーダーが自信をつけるためにやること
コーダーになってはや14年が経ちました。新しい知識がいっぱいでてきてまだいろいろ覚えることがあって大変です。さて、先日下記のツイートをしました。初心者コーダーさんにまず言いたいこと。一度サイトを組み上げてください。htmlやcssは汚くたっ...
コーディング 【CSS】float（フロート）の使い方と解除方法を現役コーダーが解説
今回はツイッターで思ったより反響がありましたのでfloat（フロート）についてを解説していこうと思います。難しいとよく耳にしますが理解すると意外と簡単ですよ。そもそもfloat（フロート）とはそもそもfloat（フロート）とはどういうスタイ...
コーディング 【コーダー向け】CSSでつまづきやすいポイントと解決法
CSS覚えることいっぱいあって面倒ですよね。慣れないうちは、セレクタ？プロパティ？宣言？なにそれって感じですよね。今回は初心者コーダー向けにCSSについてつまづきやすいポイントと解決法を解説していこうと思います。CSSとはCSSとはCasc...