コーディング練習 ブログトップページ編 1 / 3
この内容についてこの内容は、Progateやドットインストールなどをやって、次に何をすれば良いかわからない人向けに、簡単で分かりやすく、実際に通用するデザインでコーディングを練習していこうという記事です。全3回に分けて、なるべく分かりやすく紹介していきます(^^)完成品完成したデザインがこちらです。よく見る2カラムのブログのデザインです。ヘッダーにメニューとタイトルがあり、ファーストビューにスライド...
View Article文字列を円形に切り取る
index.html<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><linkrel="stylesheet"href="stylesheet.css"><title></title></head><body><p>...
View Article初心者によるプログラミング学習ログ 341日目
100日チャレンジの341日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 341日目は、おはようございます341日目...
View Articleコーディング練習 ブログトップページ編 2 / 3
まずはじめにProgateやドットインストールなどをやって、次に何をすれば良いかわからない人向けに、簡単で分かりやすく、実際に通用するコーディングを練習していこうという内容です。全3回の内、今回はその2回目の記事です。1回目の記事↓コーディング練習 ブログトップページ編 1 / 3完成品 See the Pen Design_Blog-top by engineerhikaru...
View Article【初心者向け】プログラミング初心者がまずフロントエンドで押えておくべき用語メモ
はじめに 備忘録として、フロントエンドで押えておくべき用語をメモしていきます。1.CSS1-1.Floats float(フロート)プロパティは、<div>などの要素を横並びにする際に使うCSSのコード。floatは浮くと言う意味があり、要素を浮いた状態にして並び替えれるようにする。...
View Articleflex-wrap: wrap; を使ってみた
親要素の中に子要素を綺麗に並べたい。1段ではなく、2段にして並べる方法は何かないだろうか。青いボックスを動かしてみる。親要素に display: flex; justify-content: center;を加える。さらに、 flex-wrap: wrap;を加えると、綺麗に並べることができた。
View ArticleHTML/CSS 入門
今回は基本に立ち返ってHTMLとCSSを投稿します。ただ後ほど投稿するflaskでの使用を前提としてるので注意して下さい。基本HTML&CSSとはHTML Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略...
View ArticlePCとスマホ(縦向き)とスマホ(横向き)でレイアウト変える
PCブラウザで見る場合と、スマホで見る場合(縦横の判別)でレイアウトを変えようと試行錯誤(ググった)結果です※javascriptが苦手なのでCSSのメディアクエリでやれました。...
View ArticleGASでHTML③ Font Awesomeを使ってみた (ファビコン設定・ページタイトル設定)
前回の記事前回の記事に続き、GASのHTMLを試しています。GASで動的HTML② HTML内でGoogleドライブ内の画像ファイルをダイナミックに表示させる。https://qiita.com/jooji/items/b89ce338af359742e813本記事でやることFont Awesomeを使ってファビコンの設定をします。ついでにページタイトルも。Font...
View Articleプログラミング 英単語
プログラミング英単語プログラミングをはじめてみて以外に英単語の重要性に気づかされました!なので英単語を随時追加していきます!参考にしていただけると幸いです。※()内の意味は適切なものもあれば、意味から勝手に類推したものもあります。また、実際の意味と異なる場合があるとおもいますので、発見された際にはご指摘のほうよろしくお願いします。1 HTML, CSSbr[HTML] =...
View Article2020/06/09〜11 プログラミング(フロントエンド)学習10〜12日目 メモ
3日間の学習範囲模写コーディング【無料練習素材】あなたはできる?模写コーディング腕試し!|東京フリーランス|notehttps://note.com/tokyofreelance/n/n4baf7dd10306(学習時間:5時間)学習メモcalc関数{プロパティ: calc(数式)}...
View Article初心者によるプログラミング学習ログ 342日目
100日チャレンジの342日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 342日目は、おはようございます342日目...
View Articleコーディング練習 ブログトップページ編 3 / 3
まずはじめにProgateやドットインストールなどをやって、次に何をすれば良いかわからない人向けに、簡単で分かりやすく、実際に通用するコーディングを練習していこうという内容です。全3回の内、今回はその3回目の記事です。1,2回目の記事↓コーディング練習 ブログトップページ編 1 / 3コーディング練習 ブログトップページ編 2 / 3完成品 See the Pen Design_Blog-top...
View Article2020/06/12 プログラミング(フロントエンド)学習13日目 メモ
本日の学習範囲たにぐち まことのともすたチャンネル(YouTube)https://www.youtube.com/user/tomostajp Bootstrap 4入門 #01:コンテナとスペーシング Bootstrap 4入門 #02:グリッドシステムで簡単ページレイアウト(学習時間:2時間)Bootstrap学習メモBootstraphttps://getbootstrap.jp/...
View Article初心者によるプログラミング学習ログ 343日目
100日チャレンジの343日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。すでに100日超えましたが、継続。 100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。 343日目は、おはようございます343日目 2.5h・ポートフォリオ作成#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode—...
View ArticleCSS:Bulma:Centering menu items in Navbar(メニューを中央に配置)
CodePut "navbar-end" class divs continuously.OutputRemarkThis code was modified with reference to Bulma's Navbar sample code.▶ Navbar | BulmaBulmaでメニューを中央に配置するコードがなかなか探してもなかったので、掲載します。
View Article画像とテキストをcssで重ねてみた6日目【WEBサイトを作る30日チャレンジ】
CSSで使用するposition:relative;を活用し、画像を重ねておしゃれにデザインしてみる・画像を4枚重ねる・画像はフリーサイトから拾ってきました(PhotoACさん)・1枚目の画像にテキストを重ねる・せっかくなので(文字以外)真ん中に重ねていく・合計5つ重ねたことになる・ナビゲーションバーやロゴのアニメーションは過去に実装したコードをもってきた【ナビゲーションバー」https://qii...
View ArticleiOSでWebページの一部要素のみスクロール可能にする
背景(参考)iOS でページ全体はスクロールを無効にし、個別の要素(textarea など)では有効にする方法PC や Android など、iOS 以外のデバイスで、ページ全体をスクロール無効にし、それ以外の要素は有効にしたい場合は、以下の CSS を追加すれば良いです。(中略)しかし、iOS...
View Article