まっちゃんlog

【WEB制作の営業先の基本は下記の４つ】 １）知りあい２）CS（クラウドソーシング）３）WEB制作会社４）エンドクライアント（直請）それぞれの詳細について下記に開設していきます 【知り合い】 自分の今までのリアルな知り合いから、ホームページの制作な...

画像の縦横比を指定して、どのような縦横比の画像が設定されても、指定した縦横比にしたい時がある。 例として上記のような縦長の画像を縦横の長さが同じ正方形の画像として表示したい場合aspect-ratioを使用する。aspect-ratio：横の長さ/ 縦の長さを指定...

画像によっては、1枚の画像でＰＣでの表示とスマホでの表示を両方ともいい感じで表示するのが難しい場合がある。その時にＰＣ版とスマホ版で画像を切り替える必要がある。すぐに思いつくのはその２つの画像にクラスつけて、CSSでdisplay:none と　display:...

一定速度で横に流れ続ける無限ループスライドについて記述します特徴としては、以下のようなことです１）一定速度で横に流れる２）一枚ずつでなく連続的に動くそれでは、具体的に記述していきます。表示例は以下の通りです １）HTML <div class = "...

WEBサイト上では画像が自動的にスライドしているコンテンツをよく見かける。実際の処理しては、JavaScriptのプラグインである、SwiperやSlickなど使用する場合がほとんどであるちなみに私はスライドの実装でSwiperしか使用したことが無いがSwiperのメリッ...

スクロールする出てきて、クリックするとページのトップに戻る「トップへ戻る」ボタンの記述ですまず、ボタンのデザインは以下の通りです。 それでは、HTML,CSS,JS を記述してみましょう １）HTML上矢印のアイコンをfontawesomeからとるため、fontawesome...

タブメニューは、タブ選択によって 表示するコンテンツを切り替える機能を持ったメニューです。Heartタブを選択すると、Heartのアルバムの情報が表示れます。（ちなみに初期状態はHeartタブが選択する選択された状態となっています） ここで、Nightwishタ...

アコーディオンメニューとは、WEBサイトでは、よくある質問（FAQ）などで、よく使われる。例えば、初めは質問文の領域のみ表示し、その領域をクリックすれば、回答文を表示し、もう一度質問文をクリックすれば閉じる動作をするアニメーションである。 ①初...

AOSとは、下にスクロール時に、コンテンツまでスクロールしたタイミングで、そのコンテンツがふわっと表示されるアニメーションの仕組みのこと早速、HTMLとJSを記述します。 １）HTMLまず、ふわっとさせたいコンテンツの先頭に以下のように記述します <...

スムーススクロールとは、ヘッダーの項目などをクリックして同じページ内の別の位置に移動するときに、滑らかに動いてスクロールする表現のことです。HTMLでページ内リンクを作るだけでは、クリックしたときに瞬時にスクロールしてしまうので、閲覧者に違...