Web制作

2021/8/25

納品時における端末やブラウザのチェックとは？

Web制作の納品時にブラウザチェックするらしいけど、どうすればいいの？ブラウザだけじゃなくて端末でのチェックも必要だよ！今回は納品時におけるチェック項目について解説していきます。ブラウザチェックとは？ Webサイトを見るのに必要なブラウザですが、様々な種類があります。 chrome safari FireFox Microsoft Edge IE（Internet Explorer）例えばchromeでは正常に表示されていてもsafariでは崩れてるという事があるので、基本的には上記主要ブラウザ全 ...

VSCode Web制作コーディング

2021/8/25

VS Codeの自動保存設定

VS Codeって自動で保存できない？今回はそんな疑問にお答えします。 VS Codeで自動保存する設定まずはVS Codeを開いて画面左下にある歯車マークをクリックします。そして設定をクリックします。もしくは画面左上のファイル → ユーザー設定 → 設定でもOKです。ここで設定の検索でauto saveと入力します（下の画像ではよく使用するものとして表示されますが）何件か項目が表示されますが、今回の目的はこちらの2つです。 Auto Save Auto Saveは4種類あります ...

Web制作ノウハウ

2021/8/15

プログラミング初心者でも稼げるようになってノマドになれるのか？

旅しながら働くノマドになりたいけど、プログラミング勉強すれば可能？ Web制作系であれば可能だよ！ 2021年現在コロナ過という事もあり、ノマドワーカーという働き方に関心が集まってきていると思います。結論から言えばプログラミング初心者でもWeb制作系であればノマドになれます。今回は30代後半から独学で勉強し、2年後に海外移住を計画出来るようになった私の経験から解説していきます。ノマドとは？まずノマドとはなんぞや？という所から軽く説明しておきます。ノマドとは英語で遊牧民という意味です。つまり特定 ...

Web制作スライダー

2021/8/27

【slick】サムネイルクリックで画像が切り替わるスライダーの作り方

slickでサムネイル付きのスライダーって作れない？色々なタイプが作れるよ！今回はslickを使ったサムネイル付きのスライダーをいくつかご紹介していきます。 slickを使った事がない人はこちらの記事を参照下さい。レスポンシブ対応のスライダープラグイン「slick」の使い方サムネイル付きスライダー（サムネイルクリックでメインスライド変更）まずはサムネイルが3枚で、サムネイルをクリックするとメインの画像が切り替わるスライダーです。 See the Pen slick（サムネイル：） by junp ...

Web制作スライダー

2021/8/27

【slick】スライダーの中央だけ大きく（左右の画像は小さく）する方法

slickスライダーで中央だけ大きくさせる方法ない？出来るけどちょっと注意点があるよ！今回はそんな疑問にお答えします。 slickで中央の画像だけ大きくする方法まずはslickを使えるようにします。 slickを使った事がない人はこちらの記事を参照下さい。レスポンシブ対応のスライダープラグイン「slick」の使い方それでは最初に完成形を見てみます。 See the Pen by junpei (@junpei-sugiyama) on CodePen. 中央の画像が大きく、左右の画像は小さく薄く ...

Web制作スライダー

2021/8/27

【slick】スライドの総数と現在のスライドが何番目か表示させる方法

slickのスライダーでスライドの数って表示出来ない？スライドの総数と現在のスライドが何番目か表示させられるよ！ DEMO 最初に完成形を見てみましょう。 See the Pen by junpei (@junpei-sugiyama) on CodePen. 極力余計なコードは書かないようにしましたが、多少cssで整えています。コード解説それではコードを見てみましょう。 <div class="container"> <div class="slider"> ...

Web制作ノウハウ

2021/8/25

【Web制作初心者向け】コーディングやデザインの勉強でおすすめしたい本まとめ

コーディングやデザインの勉強におすすめの本あったら教えて今回はこんな声にお応えしていきます。 Web制作の勉強方法は様々ですが、今回は書籍で勉強したい方向けの記事となります。今まで自分が購入して良かったものから、周りで持っている人が多い評判のいい本まで幅広くご紹介していきます。このブログを見ている方にはご自身の目的に合ったものが必ず見つかると思います。またAmazonではレビューも沢山書いてあるので、購入するかどうかはレビューを見て判断してもいいかと思います。コーディングの書籍まずはコーディン ...

jQuery Web制作コーディング

2021/8/25

【コピペOK！】jQueryを使ったタブで切り替え出来るメニューの作り方

タブで切り替えるメニューってどうやって作るの？今回はこんな疑問にお答えします。タブの切り替えメニューは実務でそこまで頻繁に使うわけではありませんが、知らないと確実に困る時が来ると思うので出来るようになっておきましょう。タブ切り替えメニュー（シンプル版）まずはシンプルなタブ切り替えメニューを見てみます。 See the Pen by junpei (@junpei-sugiyama) on CodePen. これは、選択されているタブは色付最初のコンテンツは表示タブのクリックでコンテンツ切り替 ...

jQuery Web制作コーディング

2021/8/25

【保存版】jQueryを使ったアコーディオンメニューの作り方【矢印と十字あり】

アコーディオンメニューってどうやって作るの？今回はこんな疑問にお答えします。アコーディオンメニューはよくある質問ページ（Q&A）などに良くありますね。実務でも使う機会は非常に多いです。このページのコードをどこかにコピペしておくと便利かと思います。またアコーディオンメニューといっても色々種類があるので、今回はよく使う物をご紹介していきたいと思います。 jQueryを使うのでjQuery本体の読み込みを忘れずにアコーディオンメニュー（基本形）まずは基本となるアコーディオンメニューを見てみ ...

jQuery Web制作コーディング

2021/8/25

【jQuery】スクロールをドラッグで動かせるようにする方法【コピペでOK】

スクロールってドラッグで動かせるように出来ないの？ js使えば出来るようになるよ！通常横スクロールなどはドラッグでは動かすことは出来ませんが、jsを使えば出来るようになります。今回はその方法をご紹介します。通常スクロールはドラッグで動かせないまずは通常の横スクロールを見てみましょう。 See the Pen by junpei (@junpei-sugiyama) on CodePen. スクロールバーを使えば当然動かすことが出来ますが、マウスのドラッグでは動かせません。 jsを使っ ...

« Prev 1 2 3 4 … 11 Next »