WebLife

Web制作・Webマーケティングを中心に投稿します。

Sass入門！＠mixinを使ったレスポンシブ対応ブレークポイントの記述方法を詳しく解説！

今回は、はにわまさんの記述したSassを使ってレスポンシブ対応のブレークポイントを作る方法を細かく解説していきます。はにわまんさんが記述した内容をそのまま使えばレスポンシブ対応になるのですが、アレンジする場合には理解しておいたほうがよいと思います。そこで僕が調べたことをすべて解説していきます。以下の書籍も参考にしました。それでは以下がはにわまんさんの記述した内容になります。 Sass // レイアウト幅$layout-width-inner: 1180px;

JavaScript入門 DOM操作でモーダルウィンドウの表示・非表示する方法を詳しく解説！

DOM操作することを覚えるということは、モーダルウィンドウを使えるようにするためにあると言ってもいいくらい、WEB制作者にとっては欠かせない操作になります。今回はJavaScriptのDOM操作でモーダルウィンドウを表示・非表示する方法を解説していきます。jQueryでもできるので次回はjQueryでの操作をご紹介しますね。モーダルウィンドウとは？モーダルウィンドウとはウィンドウ内で指定された操作を完了したりキャンセルしたりするまで他の操作ができないウィンドウのことで

WebLife

2年前

7
JavaScript入門　イベント伝搬を利用してToDoリストに取り消し線を追加削除する方法を徹底解説！

今回はJavaScriptのDOMを操作して、ToDoリストに取り消し線を入れる方法を解説します。 DOMとは「Document Object Model」の略でJavaScriptでhtmlの要素を操作するための仕組みのことです。このDOMを操作することで、ToDoリストをクリックするたびに取り消し線を入れたり削除したりすることができるようになります。たとえば以下の図のようにします。それでは詳しく解説していきますね。 HTML<!DOCTYPE html><

WebLife

2年前

5
JavaScript DOM操作　ラジオボタンをクリックしてliに追加する方法！

今回はJavaScriptのDOM操作でラジオボタンをクリックしてliに追加する方法を解説します！たとえば以下の図があります。このラジオボタンのいずれかを選択し、ボタンをクリックすると以下の図のようになる仕組みを作る方法を解説していきますので最後まで御覧ください。それではHTMLとJavaScriptのコードを記述します。 HTML<!DOCTYPE html><html lang="ja"><head> <meta charset="utf-8"> <titl

WebLife

2年前

6