ディレクション
初心者もこれでバッチリ！ワイヤーフレームの作り方
ライフスタイル 在宅ワークを快適に！悩み別おすすめグッズ15選
こんにちは。webディレクターのayaです。在宅ワーク（リモートワーク、在宅勤務）が一般的になって、2年以上がたちました。この2年間は、私も主に在宅ワークで働いています。通勤もなく、朝もゆっくりできる在宅ワークですが、一方で自宅はオフィスほ...
コーディング 【li・pタグ】CSSで2行目以降をインデント（字下げ）する簡単な方法
箇条書きや長い文章を、リストタグやpタグ等で囲ってマークアップする場合、「・」や「※」といった記号や数字を文の頭につけることがありますよね。そんな時、2行目以降の開始位置を一字下げたい場合があります。しかし、スペースを入れたりして位置調整を...
ディレクション 新人webディレクター必読。スキルアップにオススメの本6選
こんにちは。webディレクターのayaです。webディレクターの悩みは尽きることがないもの。特に新人さんであれば、このような悩みがあるのではないでしょうか？「webディレクターとしてスキルアップしたいけど、どうしたらいいのか分からない」「言...
コーディング flexboxで上下左右中央揃えをするやり方
こういうのやりたいとき実際にコード書いてみる。 真ん中.flexbox-center { display: flex; /* 子要素をflexboxで揃える */ flex-direction: column; /* 子要素をflexbox...
コーディング 【CSSアニメーション】コピペでできる。CSSでボタンを光らせる方法
光るボタンよくサイトで使われています。難しいと思ってませんか？実は簡単に実装できるんです。コピペでいけるソースコードをまとめましたので、よかったらご覧ください。光るボタンaタグにshineとういうクラスを追加ください。■CSSa.test ...
コーディング Photoshopのうざいやつ（字形パネル）を消す方法
Adobe Photoshopで文字選択をした時に出てくるあいつ...すごく邪魔ですよね。無駄に現れて作業効率も落ちるしモチベーションも落ちるし、もう大変でした。実は邪魔な「字形パネル」は消すことができるんです。そもそも何のツールなのか？実...
コーディング 【Sass（SCSS）】Koalaの基本的な使い方をやさしく解説【コーディング効率化】
CSSコーディングを効率化するためのツールに「Sass（SCSS）」がありますよね。でも、普通に書くだけでは使えず変換作業が必要です。※変換作業→コンパイルといいます。コンパイルするためには通常、黒い画面（ターミナル）と呼ばれるソフトを起動...
コーディング 【CSS】要素を中央に配置する方法（上下・中央）
コーディングをしていく中で、テキストや画像を中央に配置するデザインと、なにかしらの要素を中央に配置することがよくあります。でもコーディングを始めたばかりだと、どのようにcssを書けばいいのか迷うこともあります。この記事は以下のような人の役に...
コーディング 【初心者必見】まずはこれだけ！デベロッパーツールの使い方【chrome】
web制作に欠かせないのが、GoogleChromeのデベロッパーツール（開発者ツール）。CSSやJavaScriptが上手く反映されないときに使ったり、他のサイトのソースコードを覗いたり、使い方はさまざまです。最初は少し難しく思うかもしれ...
コーディング 【jQuery】手軽に使えるスライダープラグイン3選
スクリプトがわかるようになれば、一から作ることはできる「スライダー」。でも、ラクしたいですよね？私もできることならラクして作業を進めたいです。今回は、よく使われているスライダープラグインのご紹介です。この記事は以下のような人の役に立つように...