カテゴリー : フロントエンド
2020年8月2日
Development > フロントエンド
スマホ画面になったらボタンになって開閉するメニュー
ヘッダーメニューのよく見るやつ。 パソコンの大きい画面では普通に表示されていて、スマホ画面になったらボタンに変わって出したりしまったりできるやつです。 これが↓ こう↓ JavaScriptのoncl...
2019年6月19日
Development > フロントエンド
cssだけで作るアコーディオンメニュー
じゅげむ じゅげむじゅげむ ごこうのすりきれ かいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつ くうねるところにすむところ やぶらこうじのぶらこうじ ぱいぽぱいぽぱいぽのしゅーりんがん しゅ...
2019年4月27日
Development > フロントエンド
[display:flex]フッターの高さが分からないときでも常に最下部に表示する
むかし書いたこちらの記事から月日が経ち、display:flex;が発明されたので、書き直します。 HTMLは、こう。 <body> <header></h...
2019年3月29日
Development > フロントエンド
flexボックスでコンテンツを2つ並べる！
cssに、flexのあれこれを記述して、HTMLでクラス名を書くだけ！ /* css */ .df{ display: flex; }.justify-between{ justify-content...
2019年3月22日
Development > フロントエンド
基本のSEO対策！
SEO対策とは、ほかにたくさん詳しいサイトがあるから省きます。 簡単に言うとインターネットで検索したら検索結果上位にヒットさせること！ 1.HTMLの<head>をしっかり書く いつもお世...
2018年9月24日
Development > フロントエンド
IEでもflexボックスでグリッドデザインを作る方法！
※結論までワープする タイルのように同じ大きさのボックスを並べるデザイン。 CSSのdisplay:gridを使うと簡単に表示できます。 画面幅に合わせて表示するタイルの列が自動で変わる優れもの。 で...
2017年8月15日
Development > フロントエンド
PCとスマートフォンのクリックイベント
「ある要素をクリックしたら～する」という関数をJavaScriptで書いた場合、スマホだと反応が遅かったり、動作が変になったりする場合があります。 //例 function hoge()...
2017年8月2日
Development > フロントエンド
フッターの高さが分からないときでも常に最下部に表示する
※2019年4月27日 display:flexが発明されたので、古い記事になりました。 新しい記事はこちら 表示するコンテンツが少ないと、 フッターが真ん中あたりに表示さ...