ライフスタイル

在宅ワークを快適に!悩み別おすすめグッズ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選

スクリプトがわかるようになれば、一から作ることはできる「スライダー」。でも、ラクしたいですよね?私もできることならラクして作業を進めたいです。今回は、よく使われているスライダープラグインのご紹介です。この記事は以下のような人の役に立つように...
スポンサーリンク