HTML / CSS
khiroWebエンジニア(@khiro14726723)です。Sassとbootstrap、jQueryがすぐに使える状態のHTMLテンプレートを作りました。すでにデザインが入ってるテンプレートをお求めの方は、こちらで紹介されているものがいいと思います。 今回は、無料ダウンロードでき…
khiroWebエンジニア(@khiro14726723)です。このwordpressテーマで使われているような、画像にカーソルを当てた時の挙動はどのように実装すれば良いのでしょうか。 gyazo.com実際にサンプルサイトを作ってみました。 サンプル ki-hi-ro.com タブレット、スマ…
CSSで以下の画像のような見た目を作る方法についてです。 サンプルサイトへのリンク ki-hi-ro.com サンプルサイトのgithubリポジトリ github.comCode → Download ZIP で、Zipファイルのダウンロードが可能です。 HTML <div class="ellipsis-text">text text text text text text text te</div>…
この記事で作りたいもの 動画素材を用意する ブラウザに動画を表示させる 最前面に要素を持ってくる 完成！ 参考にした記事 この記事で作りたいもの GrouwGroup株式会社 様 (https://grow-group.jp/) こんなUIを最近よく見かけるので、自分で作ってみたいと…
擬似要素とは 具体的な活用例 横棒を追加する 画像やコードのタイトルをうっすらと表示させる アイコンを表示させる コメントボックスを作る 参考にしたサイト HTMLとCSSでコーディングをいていて、beforeやafter、hoverなどの擬似要素を使う機会が最近よく…
はじめに 筆者の環境 ヘッダーアイコンを作成する モーダルを作成する クリックイベントを作成する はじめに スマホの画面幅は、iphone6/7/8 Plusの場合414pxです。 WebサイトをPC(自分のMacBookの画面幅は、1440px)で閲覧する時には、このようなヘッダーが…
faviconとは 公式サイトにアクセスする イラストを書く or 画像をアップロードする 画像をアップロードする場合 ダウンロードする 読み込ませる ブックマークをファビコンのみ表示させる方法 参考にしたサイト faviconとは ブラウザタブの左側に付いているア…
素材 画面 HTML CSS HTMLを用いた方法 リンク元 画面 HTML リンク先 画面 HTML jQueryを用いた方法 画面 HTML jQuery 最後に ページ内でリンクを作る方法について2パターンを紹介します。 素材 ヘッダー、メイン、フッターに分かれています。 メインの中に、…
パターン1 HTML CSS パターン 2 CSS パターン3 CSS パターン4 CSS hover時にマーカーが引かれるようにする CSS 参考にしたサイト HTML / CSSで、マーカー線を引く方法と、自分が気に入っているマーカーのパターン、最後には、カーソルを合わせた時にマーカー…
完成イメージ 使用するファイル 土台を作る 画面(1/4) 左側が欠けた半円を重ねる 画面(2/4) 内側の円を作成する 画面(3/4) 56%を表現する 画面(4/4 → 完成) ソースコード index.html style.css 完成イメージ HTML / CSS で、このようなグラフが出来上がるま…
完成イメージ 1 カレンダーの背景を作る index.html style.css 画面 2 表を利用する index.html 画面 3 カレンダーを背景に収める style.css 画面 4 カレンダーを装飾する 5 仕上げ 画面(完成) 参考にしたサイト 完成イメージ この記事では、これを作ってい…
slickerとは 導入手順 スライドさせたい画像を用意する スライドの骨格を作る 公式サイトからフォルダをダウンロードする 必要なファイルをSlickを導入したいフォルダに配置する スライドを動かすためのコードを書く autoplay: true, autoplaySpeed: 5000 do…
HTML / CSSでwebサイトを作っている時に、アイコンを使用したくなることがあるかと思います。 そんな時便利なのが、Font Awesomeです。 しかし、英語で書かれているので、使う時に少し戸惑ってしまうかも知れません。 そこで、Font Awesomeの読み込み方につ…
このようなアップロードスペースのどこをクリックしてもファイルの選択画面が開けるようにしたい。 現状、この部分をクリックした時にしか開けない。 さらに、この部分を非表示にしたい。 現在のHTML <div class="upload-space"> <input type="file"> </div> CSS .upload-space { background-color: #f5f5f5; hei…
ノートPCは、スマホと画面幅が異なるため、デプロイ後にスマホで確認するとレイアウトが崩れている・・・ということがあります。 例えば、ノートPCだとこんな感じだったのが、 スマホの画面だと(GoogleChromeの検証ツールを使用しています)、 こんな感じに崩…
重なった要素に対して用います。 例えばこんな画面があるとします。 一見、Cと書かれた図形のみがあるように見えますが、実はAとBという文字が書かれた 図形が背後に隠れています。 HTML CSS z-index: 1; これを.boxBに追記すると、こうなります。 Bと書かれ…
参考記事： ①【CSS】vh vwとは何か https://qiita.com/sanriyochan/items/be55bc9f544422d8456c ②使用したreset css https://meyerweb.com/eric/tools/css/reset/ htmlとcssを使用して、こんな画面を作りたい。 まずは、htmlで骨格を作ります(<head>タグ内で、vh.c</head>…
HTMLとCSSのファイルを編集して、「よし！ブラウザで確認しよう」と思った時、「あれ？CSSが適応されていない・・・」となってしまったことがあったので、cssをhtmlで読み込む方法について記述していきます。 例えば、こんな画面があるとします。 HTMLはこち…
例えば、こんなボックスが3つあるとします。 HTMLはこちらです(boxesという親クラスは、box1〜box3の子クラスを持っています)。 <body> <div class="boxes"> <div class="box1"> box1 </div> <div class="box2"> box2 </div> <div class="box3"> box3 </div> </div> </body> CSSはこちらです。 .box1 , .box2, .box3 { background-color: paleturquoise; width: 110px; font-s…
cssには、ボックスモデルという概念があります。 例えば、 こんな画面があるとします。 HTMLはこちらです。 <body> <div class="box"> BOX </div> </body> CSSはこちらです。 .box { background-color: paleturquoise; width: 230px; font-size: 100px; } border: 10px solid black; この1行をCSS…
プログラミングはProgateで独学していましたが、TECH::EXPERTの教材で今日から学習し始めました！ アウトプットは重要なので、毎週月曜日と木曜日にブログ更新しようと思います。 早速、今日学んだことを思い出せるところから書いていこうと思います。 ◯箇条…
